Posted by: fxix on: Сентябрь 18, 2008
1. Маркер псевдо-символами.
ul {
list-style:none;
margin:0;
padding:0 0 0 1em;
text-indent:-1em;
}
li {
width:20%;
padding:0;
margin:0 0 0.25em 0;
}
li:before {
content:»0BB 020″;
}
ul – устанавливаем левый отступ 1em, но при этом сдвигаем текст влево на ту же величину, т.е. -1em для того, чтобы «вытолкнуть» стандартный маркер из блока элемента списка. С помощью псевдоэлемента :before генерируем текстовый маркер. В свойстве content нужные символы указаны с помощью шестнадцатеричного escape-эквивалента Unicode, как того требует спецификация CSS2.1. (в примере двойная стрелка-ёлочка и пробел).
2. Маркер псевдо-символами.
ul {
list-style:none;
margin:0;
padding:0 0 0 1em;
}
li {
width:20%;
padding:0;
margin:0 0 0.25em 0;
}
<ul> <li>» Первый пункт списка</li> <li>» Второй пункт списка</li> <li>» Третий пункт списка</li> <li>» Четвертый пункт списка</li> <li>» Пятый пункт списка</li> </ul> Т.е. вставляем псевдо-символы непосредственно в список. Если в браузере пользователя отключена поддержка CSS, он увидит два маркера для каждого элемента списка - маркер, генерируемый браузером и маркер, который мы добавили вручную.
3. Макер картинкой.
ul {
list-style-type: disc;
list-style-image: url(marker.png);
}
list-style-type используется здесь на всякий случай, если браузер пользователя не имеет возможности использовать изображение. А в свойстве list-style-image задается путь к нужной картинке. Управлять размером картинки, которая используется как маркер списка, из таблицы CSS мы не сможем и поэтому надо убедиться в том, что картинка имеет подходящие размеры. Еще один нюанс состоит в том, что значения графических маркеров наследуются и если вы создаете вложенные списки и хотите отказаться от маркера изображения в них, надо опять использовать свойство list-style-image:none для вложенных. Если картинка большая (к примеру 54х54px) то:
ul {
margin-left:10px;
padding-left:0px;
list-style:none;
}
li {
padding:0.5em 0 0.5em 54px;
font: 1.3em/1.6 Verdana, Arial, sans-serif;
background:url(bigMarker.png) no-repeat;
}