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. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.


Fatal error: Call to undefined function wp_related_posts() in /home/k/kazanets/htmlcssinfo/public_html/wp-content/themes/htmlcsstheme/single.php on line 70