HTML5 & CSS - Lab exercise 8. Navigation Icons

massbless 5 Points

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>

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

Тагове:

15/06/2016 21:27:45 Софтуерни технологии

massbless:

Problem solved.

r3v3nan7 365 Points

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

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

15/06/2016 21:32:39 15/06/2016 21:32:57

massbless 5 Points

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

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

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

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

15/06/2016 21:50:32 15/06/2016 22:27:06

idmitrov 55 Points

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

15/06/2016 22:38:09 15/06/2016 22:38:33

massbless 5 Points

@idmitrov

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

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

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

15/06/2016 22:54:24 15/06/2016 22:54:57

Tanyo 152 Points

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

15/06/2016 21:43:31

peterborisov 123 Points

<!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 според мен.

15/06/2016 22:37:09