HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Создание любых маркеров у списка с помощью 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
  • Вам повезет в жизни )
  • Или убедитесь, что верстать я ни фига не умею :)

Метки: , ,

Запись опубликована 27.07.2009 в 12:58 и размещена в рубрике css, html. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (10) на “Создание любых маркеров у списка с помощью CSS”

  • Ирина:
    25.11.2009 в 14:08

    Мне больше всего понравилось «Будете молиться, когда же умрет ИЕ6″ )))))))
    Факт!

  • Дмитрий:
    17.03.2010 в 06:11

    Мне интересен немного другой случай.

    Если прописать к ul li
    border-bottom: 1px solid #000000;

    То как можно избавиться от подчеркивания под тире и оставить его только на слове?

  • Костя:
    17.03.2010 в 11:19

    Взять слова во внешний спан или див и к этому спану или диву применить бордер?

  • Дмитрий:
    17.03.2010 в 15:07

    - Вам повезет в жизни )
    _____________________________ (так у меня сейчас)

    - Вам повезет в жизни )
    ___________________________ (а хотелось бы так)

    - Вам повезет в жизни )
    _____________________ (Ваш вариант)

    Немного я не правильно выразился в предыдущем посте. Бордер должен начинаться с начала слова и заканчиваться в конце строки(«ячейки»).

    Тем способом, что Вы мне предложили, происходит подчеркивание только по длине слова. Но, спасибо, подумаю может так и сделать.

  • Дмитрий:
    17.03.2010 в 15:09

    Все форматирование сползло, надеюсь поймете что я хотел изобразить :)

  • Костя:
    17.03.2010 в 15:10

    чтобы на всю ширину, используй див вместо спана, т.е. блочный элемент

  • Костя:
    17.03.2010 в 15:11

    Да, комментарии надо доработать для вставки кода. времени все нет )

  • Дмитрий:
    17.03.2010 в 15:19

    Опреативно Вы ототвечаете.
    Сасибо, помогли :)

  • Костя:
    17.03.2010 в 15:31

    Вам просто повезло, я тут неподалеку был :)

  • yanesh:
    02.04.2010 в 15:24

    при переносе строки (если текст уж очень длинный) «маркер» будет смотреться не очень…
    думаю можно написать так:
    ul li { … background:url(li.png) no-repeat 0 7px; }

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос