Реферат: CSS Design: Укрощение списков

list-style-image: url(bullet.gif);

list-style-position: inside;

}

Список в результате будет выглядеть так:

Item 1

Item 2

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы <LI> "надвисающими". Всё правило целиком будет выглядеть так:

ul {

list-style: none;

margin-left: 0;

padding-left: 1em;

text-indent: -1em;

}

Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое - значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и "надвисает" над остальным текстом.

Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: ".

» Item 1

» Item 2

» Item 3

» Item 4

» Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента :before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ " или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.

#custom-gen ul li:before {

content: "\00BB \0020";

}

Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код \00BB (другой символ \0020 - это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):

Item 1