Элементы верстки. Работаем со списками

Нет, это не те списки фамилий на клочках бумаги, которые вывешиваются обычно перед входом в МРЭО или на двери зубного лекаря. Списки в нашем понимании — это упорядоченная по пунктам информация, перечень однотипных или сходных элементов. Существует два вида списков: маркированный и нумерованный. Обозначаются, соответственно, тэгами <ul> и <ol>. Маркированный список имеет возле каждого пункта маркер: точку, квадратег, галочку и пр. Нумерованный, понятное дело, имеет упорядоченную нумерацию. Причем последняя так же бывает разной: арабские цифры, римские цифры и т.д.

Пункты любого списка, хоть маркированного, хоть нумерованного, оформляются тэгами <li>. Вот пример обычного маркированного списка:

<ul>
<li>Васильев</li>
<li>Петров</li>
<li>Сидоров</li>
</ul>

Внутри тэгов <li></li> может быть вложен другой список. Таким макаром создается иерархия списков:

<ul>
<li>Муж:
<ul><li>Васильев</li>
<li>Петров</li>
<li>Сидоров</li>
</ul></li>
<li>Жен:
<ul><li>Васильева</li>
<li>Петрова</li>
<li>Сидорова</li>
</ul></li>
<li>Сред:
<ul><li>Васильево</li>
<li>Петрово</li>
<li>Сидорово</li>
</ul></li>
</ul>

Это все просто и понятно. Рассмотрим примеры оформления списков.

Во-первых, не всегда удобно показывать у пунктов списка маркеры. Например, в горизонтальном меню блога. Чтобы избавиться от маркеров, которые по-умолчанию есть всегда, нужно в файле CSS для соответствующего списка задать правило:

list-style-type: none;

Его также можно записать немного сокращенно:

list-style: none;

Во-вторых, пункты списка всегда располагаются в столбик. Чтобы разместить их в одну линию, применяют следующее правило:

display: inline;

Обратите внимание, данное правило применяется не к самому списку, а к его пунктам. Пример полной записи:

#menu li {display: inline;}

Она означает, что список с селектором menu будет располагать свои пункты горизонтально в одну линию, пока не упрется в край монитора или блока, в котором находится. Тогда последующие пункты будут автоматом переноситься на следующую строку и снова вытягиваться в линию.

У списков есть одно неудобное свойство: они выносят маркеры или номера за пределы блока, в котором расположен сам список. Например, если вы положите список в блоке content без всяких дополнительных правил в листе стилей CSS, то маркеры вылезут за левый край этого блока. Тут есть два способа победить:

1. В листе стилей CSS задать списку приличный отступ слева. В случае, когда ширина блока достаточна, то такой отступ смотрится вполне гармонично. Но вот в узких колонках сайдбаров выглядит бестолково. Для этого есть второй вариант.

2. Все в том же листе стилей задаем пунктам внутреннее размещение маркеров (или номеров). Достигается это простым правилом:

list-style-position: inside;

Кстати, есть и третий способ, который часто применяют в шаблонах Вордпресс. Маркер рисуют в виде картинки, которую затем задают в качестве фона пунктам списка. Фон без повтора и с заданными координатами. Например:

#sidebar li {
list-style: none;
background: url(images/arrow.gif) no-repeat left 50%;
}

Здесь мы сначала убрали маркеры по-умолчанию, а затем прописали пунктам в качестве фона картинку arrow.gif, без повтора и с координатами left 50%. Последние означают, что картинка фона должна располагаться слева и по центру строки. Запись 0 50% будет означать то же самое. Соответственно, если нужно разместить картинку справа, то пишем 100% 50% или right 50%.

Обратите внимание, в данном случае картинка является фоном, но не маркером. Если же вы хотите задать картинку именно в виде маркера, то нужно в правилах прописать следующее:

#sidebar li {
list-style-image: url(images/arrow.gif);
}

Причем здесь уже не требуется уточнять, что картинка без повтора. Потому что это не фон, а именно маркер.

Какие еще бывают виды маркеров? Перечислим их:

disc — маркер в форме круга (по-умолчанию)
circle — окружность (с дыркой от бублика)
square — квадрат
none — отсутствие маркера.

Нумерация может быть следующей:

decimal — десятичная, арабскими цифрами (по-умолчанию)
lower-roman — римские цифры в нижнем регистре
upper-roman — римские цифры в верхнем регистре
lower-alpha — строчные латинские буквы
upper-alpha — прописные латинские буквы

16.03.2009

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: