Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Почему меню не выстраивается в ряд? 
:(
    Опции темы
GQU
Дата 16.6.2011, 17:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 272
Регистрация: 13.2.2011

Репутация: нет
Всего: нет



Почему меню не выстраивается в горизонтальный ряд, написано же display:inline;?
Код

<title>Создание базового горизонтального меню для сайта CSS методами</title>
</head>
<style type="text/css">
ul.css-menu-1 {
list-style: none;
}

ul.css-menu-1 li a {
display:inline;
background-color:#006600;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
font-weight: bold;
color: #ffaa00;
padding: 6px 10px 6px 10px
}
</style>
<body>
<ul class="css-menu-1">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#">Справочник</a></li>
</ul>
<head>


Это сообщение отредактировал(а) GQU - 16.6.2011, 18:27
PM MAIL   Вверх
bars80080
Дата 16.6.2011, 19:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



во-первых, проблема в тэгах вводящих сумятицу
а display: inline задано ссылке, а не элементу списка li, который остаётся по-умолчанию блоковым
PM MAIL WWW   Вверх
GQU
Дата 16.6.2011, 20:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 272
Регистрация: 13.2.2011

Репутация: нет
Всего: нет



Цитата

а display: inline задано ссылке, а не элементу списка li, который остаётся по-умолчанию блоковым 

А почему нужно задавать display: inline именно элементу li?

Это сообщение отредактировал(а) GQU - 16.6.2011, 20:19
PM MAIL   Вверх
bars80080
Дата 16.6.2011, 22:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(GQU @  16.6.2011,  20:18 Найти цитируемый пост)
А почему нужно задавать display: inline именно элементу li?

дык, он же блочный. по-умолчанию он выстраивается в вертикальный список.
а ссылка и так по-умолчанию inline (в строку), но она же в блоке li.
PM MAIL WWW   Вверх
GQU
Дата 17.6.2011, 12:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 272
Регистрация: 13.2.2011

Репутация: нет
Всего: нет



Цитата

дык, он же блочный. по-умолчанию он выстраивается в вертикальный список.
а ссылка и так по-умолчанию inline (в строку), но она же в блоке li. 
 
А вот есть же такое правило, что каждое следующее значение стиля дочернего элемента, перекрывает значение такого же стиля у его родительского элемента.
Смотрим наш пример:
<а>является дочерним для<li>, поэтому можно <а> присвоить inline и по правилу выше inline присваивается и <li>
Почему так не происодит?
PM MAIL   Вверх
bars80080
Дата 17.6.2011, 14:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(GQU @  17.6.2011,  12:46 Найти цитируемый пост)
 каждое следующее значение стиля дочернего элемента, перекрывает значение такого же стиля у его родительского элемента.

, для дочернего элемента

имеется в виду, что если задать цвет текста для <body> красным, то он будет красным для всех элементов. но если для <p> задать другой цвет, то он перекроет тот, что идёт от <body>. но никак не перепишет цвет для всего <body>. что, если здраво подумать, очень даже хорошо.

однако, правило даже так далеко не полное. так как есть наследуемые стили, вроде цвета, а есть не наследуемые в неявном виде.
к примеру, если задать для 

div { display: block; color: #ffff00; }

здесь стиль color унаследуется всеми вложенными элементами, кроме ссылок. а стиль display никем не унаследуется
чтобы он распространился дальше, надо было бы написать:

div * { display: block; color: #ffff00; }
PM MAIL WWW   Вверх
SelenIT
Дата 17.6.2011, 14:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Цитата(GQU @  17.6.2011,  12:46 Найти цитируемый пост)
каждое следующее значение стиля дочернего элемента, перекрывает значение такого же стиля у его родительского элемента

Имеется в виду, что любой явно заданный стиль потомка приоритетнее стиля, унаследованного от предка. Не наоборот. "Дети" на "родителей" в CSS напрямую не влияют (кроме, пожалуй, нюансов с наложением маргинов, но это совсем другая песня).


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.3162 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.