Создание любых маркеров у списка с помощью CSS
Задача. Необходимо сделать маркированный список, где в качестве маркера может использоваться любое изображение. Для таких целей придумано свойство list-style-image. Но при его использовании картинка распологается в разных браузерах не предсказуемо по-разному. Покажем как можно одинаково во всех браузерах отобразить маркер-картинку у списка.
Идея метода состоит в том, что мы вообще убираем стиль маркеров у списков, а нужные нам маркеры-картинки ставим через background каждому элементу списка li, и ставим соответствующие отступы у фона и элементов списка.
Итак, пусть, например, нам нужно в качестве маркера списка сделать длинное тире. Нарисуем картинку длинного тире:

Следующий код реализует нашу задумку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Создание маркированного списка</title> <style type="text/css"> body { margin:0; padding:40px; font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; } p { padding:0 0 20px 0; margin:0; } ul { list-style:none; padding:0 0 20px 0; margin:0; } ul li { padding:0 0 10px 30px; margin:0; background:url(li.png) no-repeat 0 7px; } </style> </head> <body> <p>Каж же хорош наш сайт по html и css. С помощью него вы:</p> <ul> <li>Узнаете интересные приемы в верстке</li> <li>Научитесь красиво верстать</li> <li>Узнаете о возможных подводных камнях в верстке</li> <li>Будете молиться, когда же умрет ИЕ6</li> <li>Вам повезет в жизни )</li> <li>Или убедитесь, что верстать я ни фига не умею :)</li> </ul> </body> </html> |
Вот что вышло:
Каж же хорош наш сайт по html и css. С помощью него вы:
- Узнаете интересные приемы в верстке
- Научитесь красиво верстать
- Узнаете о возможных подводных камнях в верстке
- Будете молиться, когда же умрет ИЕ6
- Вам повезет в жизни )
- Или убедитесь, что верстать я ни фига не умею
Комментарии (10) на “Создание любых маркеров у списка с помощью CSS”
Оставить комментарий
Для вставки кода используйте <code> ... </code>.
Мне больше всего понравилось «Будете молиться, когда же умрет ИЕ6″ )))))))
Факт!
Мне интересен немного другой случай.
Если прописать к ul li
border-bottom: 1px solid #000000;
То как можно избавиться от подчеркивания под тире и оставить его только на слове?
Взять слова во внешний спан или див и к этому спану или диву применить бордер?
- Вам повезет в жизни )
_____________________________ (так у меня сейчас)
- Вам повезет в жизни )
___________________________ (а хотелось бы так)
- Вам повезет в жизни )
_____________________ (Ваш вариант)
Немного я не правильно выразился в предыдущем посте. Бордер должен начинаться с начала слова и заканчиваться в конце строки(«ячейки»).
Тем способом, что Вы мне предложили, происходит подчеркивание только по длине слова. Но, спасибо, подумаю может так и сделать.
Все форматирование сползло, надеюсь поймете что я хотел изобразить
чтобы на всю ширину, используй див вместо спана, т.е. блочный элемент
Да, комментарии надо доработать для вставки кода. времени все нет )
Опреативно Вы ототвечаете.
Сасибо, помогли
Вам просто повезло, я тут неподалеку был
при переносе строки (если текст уж очень длинный) «маркер» будет смотреться не очень…
думаю можно написать так:
ul li { … background:url(li.png) no-repeat 0 7px; }