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

Дата: 16.03.2009 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: ,

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

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (9) на запись “Элементы верстки. Работаем со списками”

  1. rust 18.03.2009 19:05

    Игорь, вы еще забыли про список определений ;)

  2. Игорь Квентор 18.03.2009 19:29

    Каких определений?

  3. Сергей 19.03.2009 14:20

    списки ,
    где их можно применить?

  4. Сергей 19.03.2009 14:21

    DL, DT, DD

  5. c1n1k 27.03.2009 09:20

    вообщето по спецификации принципиальная разница не в маркерах и нумерации, а в том что UL - неупорядоченный список, а OL - упорядоченный, т.е. разница в семантике. Если рассказывать про списки, то я согласен с rust, дополните списоком оределений.

  6. Игорь Квентор 27.03.2009 10:35

    А оно реально кому-то нужно? Мы говорим о практическом применении списков и способах верстки, а не о семантических тонкостях. Покажите мне пример, где требуется точно соблюсти данную семантику, чтобы код работал.

  7. Вадим 16.04.2009 19:56

    Привет!
    скажи пожалуйста как сделать, если списки идут в линию, что бы они разделялись слотом |

  8. Игорь Квентор 16.04.2009 20:54

    Списки или все-таки пункты одного списка?

  9. Вадим 17.04.2009 11:16

    пункты одного списка)

Трэкбеки

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