→ При разработке сайта лендинг в подарок! ЖМИ! ←
Янв
20

Используем list-style-image

В своем очередном проекте по созданию сайта столкнулся с интересной задачей: необходимо маркер списка задать рисунком. Оказывается, есть такая фича, как list-style-image, которая именно это и делает.

list-style-image работает корректно во всех браузерах и на ура проходит валидацию. А валидация в деле создания сайтов — вещь далеко не последняя.

Буквально только что обнаружил одну интересную особенность, которая заключается во взаимосвязи тегов ul и li. Если задать list-style-image для ul, то первый элемент будет как бы пустым, а всё остальные нормально отобразятся. Пофиксим эту штуку

Итак, вот небольшой пример по использованию (css):

1
2
ul {list-style:none}
li {list-style-image:url(../images/list_line.gif);}

Используя этот простой метод, можно заставить свои списки выглядеть более привлекательно, а сайты — более современно.

  • Отличный портал о xoops. Будет полезно разработчикам на этой КМС-ке.

Прокомментировать

Рубрики

Наши услуги

В прямом эфире