Loading...
massbless avatar massbless 5 Точки

HTML5 & CSS - Lab exercise 8. Navigation Icons

Здравейте,

Малко ме е срам да си призная, но закъсах още на първото задание, което не е straightforward. Поради някаква причина иконките отказват да се наредят хоризонтално, въпреки че в .CSS файла съм задал:

.icons li {

display: inline-block;

}

Item-ите са разписани точно както е предложено в PP презентацията:

<ul class="icons">
        <li>
            <a href="#">
                <img src="../images/home.png" />
                <div>Home</div>
            </a>
        </li>
        ...

</ul>

Някой има ли идея какво би могло да пречи на блоковете да се наредят в линия?

 

Тагове:
massbless:
Problem solved.
r3v3nan7 avatar r3v3nan7 365 Точки

Вмъкнал ли си правилно .css файла 

<link rel="stylesheet" type="text/css" href="nav-icons.css">

Другите ти стилове работят ли ?

0
15/06/2016 21:32:57
massbless avatar massbless 5 Точки

Да, всичко останало от CSS файла изглежда да работи.

Мога ли да attach-вам малки zip-ове директно към коментарите си във форума? Не виждам опция за прикачване, drag & drop не прави нищо.

EDIT: Освен да ги пусна в pastebin:

html --> http://pastebin.com/jkCBVcSU
css  --> http://pastebin.com/1DUCAuTL

 

0
15/06/2016 22:27:06
idmitrov avatar idmitrov 55 Точки

width: 130px; в .icons т.е толкова ти е широк ul елемента и няма как да ги събереш, или му дай width: 100%; или изчисли колко width ти трябва за да ги събереш всичките, или си намали самите li-та

1
15/06/2016 22:38:33
massbless avatar massbless 5 Точки

@idmitrov

Благодаря ти - това опрaви проблема!

В началото бях решил, че там се задава размерът на всяка иконка, а след това като съм стигнал до ".icons li a { }" и не съм съобразил да се върна по-нагоре и да го сменя с по-подходящо число.

Бих ти дал best answer, но като е коментар към чужд отговор и не разрешава :(

0
15/06/2016 22:54:57
Tanyo avatar Tanyo 152 Точки

Зипни си html-то и css-а и ги пусни тук за да може да се прецени къде е допусната грешка. При положение, че всичко е написано и само трябва да се препише, не би трябвало да има ядове с реализацията.

0
peterborisov avatar peterborisov 123 Точки

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.icons li {
display: inline-block;
}
</style>
</head>
<body>
<ul class="icons">
...content
</ul>
</body>
</html>

В notepad само написах това за да пробвам дали ще са в една линия и си работи коректно. Не си линкнал .css според мен.

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.