Элементы верстки сайта. Работаем со списками
Нет, это не те списки фамилий на клочках бумаги, которые вывешиваются обычно перед входом в МРЭО или на двери зубного лекаря. Списки в нашем понимании — это упорядоченная по пунктам информация, перечень однотипных или сходных элементов.
Существует два вида списков: маркированный и нумерованный. Обозначаются, соответственно, тэгами <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
Во-первых, не всегда удобно показывать у пунктов списка маркеры. Например, в горизонтальном меню блога. Чтобы избавиться от маркеров, которые по-умолчанию есть всегда, нужно в файле CSS для соответствующего списка задать правило:
list-style-type: none;
Его также можно записать немного сокращенно:
list-style: none;
Во-вторых, пункты списка всегда располагаются в столбик. Чтобы разместить их в одну линию, применяют следующее правило:
display: inline;
Обратите внимание, данное правило применяется не к самому списку, а к его пунктам. Пример полной записи:
#menu li {display: inline;}
Она означает, что список с селектором menu будет располагать свои пункты горизонтально в одну линию, пока не упрется в край монитора или блока, в котором находится. Тогда последующие пункты будут автоматом переноситься на следующую строку и снова вытягиваться в линию.
У списков есть одно неудобное свойство: они выносят маркеры или номера за пределы блока, в котором расположен сам список.
Например, если вы положите список в блоке content без всяких дополнительных правил в листе стилей CSS, то маркеры вылезут за левый край этого блока. Тут есть два способа победить:
1. В листе стилей CSS задать списку приличный отступ слева. В случае, когда ширина блока достаточна, то такой отступ смотрится вполне гармонично. Но вот в узких колонках сайдбаров выглядит бестолково. Для этого есть второй вариант.
2. Все в том же листе стилей задаем пунктам внутреннее размещение маркеров (или номеров). Достигается это простым правилом:
list-style-position: inside;
Кстати, есть и третий способ, который часто применяют в шаблонах WordPress. Маркер рисуют в виде картинки, которую затем задают в качестве фона пунктам списка. Фон без повтора и с заданными координатами. Например:
#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 — прописные латинские буквы
На этом все.
