CSS: Средство от синдрома «лестницы»

В статье рассматривается пример решения типовой проблемы позиционирования элементов меню с помощью каскадных таблиц стилей. Когда я в первый раз столкнулся с ней сам, решение пришлось искать методом тыка. Вероятно, инструкция Криса может оказаться полезной для многих.

Оригинал: http://css-tricks.com/prevent-menu-stepdown/
Автор: Chris Coyier (css-tricks.com)
Перевод: Александр Мусаев (paradigm.ru)

Всем, кто работал с «плавающими» HTML-элементами, должно быть известно, что при задании контейнеру значения CSS-свойства float:left, следующий за ним «всплывает» вверх, если это возможно. В подобной ситуации часто встречается одна проблема — позиционируемые элементы выстраиваются «лестницей».

Например, при оформлении таким образом меню, сделанного на основе ненумерованного списка (<ul>), браузер может отобразить его примерно так:

Рассмотрим пример корректного горизонтального форматирования элементов меню для следующего HTML кода:

<ul id="menu">
	<li><a href="#">My</a></li>
	<li><a href="#">Little</a></li>
	<li><a href="#">Menu</a></li>
</ul>

Для того, чтобы придать списку необходимый внешний вид, ссылки внутри него оформляются в виде блоков увеличенной ширины:

ul#menu li a {
	display: block;
	width: 130px;
	text-align: center;
	font-weight: bold;
	float: left;
	color: white;
	font-size: 1.2em;
	text-decoration: none;
	background: #600;
}

(Прим. переводчика: при оформлении подобного меню, я бы дополнительно задал увеличенное значение верхнего и нижнего padding. Кроме того, сочетание фиксированной в пикселях ширины контейнера и размера шрифта, определенного в относительных единицах —, не слишком хорошее решение автора.)

При подобном оформлении, элементы меню не выстроятся в горизонтальную линию, т.к. «якоря» (<a>) находятся внутри блочных контейнеров <li>. А блочные контейнеры всегда выводятся браузером так, как если бы за ними следовал перенос строки (невидимый <br>). При этом, высота «ступеньки» может варьироваться в соответствии с текущим значением line-height.

Решение элементарно:

ul#menu li {
	display: inline; /* Средство от "лестницы" */
}

Теперь элементы списка будут выводиться браузером линейно, и меню приобретет подобающий вид:

Комментарии к заметке «CSS: Средство от синдрома «лестницы»»

# IE6, CSS и интервью с Алексом Могилевским | Paradigm.ru: ^{(24 апреля, 2008 @ 11:47)}

[...] Предполагается, что последовательность плавающих объектов должна выстраиваться в линию. Везде происходит именно так, но IE 6 зачем-то добавляет невидимый перенос строки после каждого блока, что приводит к ступенчатому отображению элементов. Проблема исправляется обнулением line-height. Более подробно это описано в отдельной заметке. [...]

# Интересное для веб-мастеров (04.07.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с: ^{(4 июля, 2008 @ 15:48)}

[...] CSS: Средство от синдрома «лестницы» В статье рассматривается пример решения типовой проблемы позиционирования элементов меню с помощью каскадных таблиц стилей. Когда я в первый раз столкнулся с ней сам, решение пришлось искать методом тыка. Вероятно, инструкция Криса может оказаться полезной для многих. [...]

Написать комментарий