Как вместо маркера списка поставить изображение через CSS
Вы уже, наверняка, заметили, что у ненумерованного списка в HTML слева от элемента имеется картинка, которая называется маркером. И по умолчанию этот маркер выглядит как жирная чёрная точка. В этой небольшой статье я расскажу, как этот маркер заменить на своё собственное изображение.
Делается это через CSS с помощью свойства list-style-image с применением к элементу ul:
ul {
list-style-image: url("images/marker.gif");
}
Таким образом, вместо точек слева от элементов будет стоять Ваше изображение marker.gif.
Вот таким несложным способом вместо маркера списка можно ставить изображение.
-
Создано 14.10.2011 13:29:09
-
Михаил Русаков
Комментарии (12):
а можно чтоб они были разными эти картинки??т.е. список один (элементов этак 20), а маркеры разные
Ответить
Проще убрать вообще маркеры (list-style: none;) и просто размещать обычные картинки у каждого элемента через img.
Ответить
вобщем-то на то и вышло...)
Ответить
Добрый день, Михаил. Я попыталась изменить маркеры приведенным способом. Почему-то Опера все отлично отображает, а вот в Гугл Хром маркеры остаются прежними. Более того, когда я задаю стиль через CSS (я пыталась сделать рамку для контейнера) - та же история - Опера все отображает, Хром - нет. У меня такое чувство, что Хром вообще таблицу стилей игнорирует. В чем проблема?
Ответить
Покажите, как Вы подключаете стили.
Ответить
<link href = "style.css" rel = "stylesheet" type = "text/css" >
Ответить
собственно сама таблица ul{list-style-image: url("images/marker.png");}
Ответить
Задайте в стиле body {font-size: 1000%;}. Если размер шрифта в Chrome не увеличится, значит, стили действительно не подключены. Также удалите кэш из браузера, обновляйте через ctrl+F5.
Ответить
не работает,кэш почистила.
Ответить
более того, даже когда я сохраняю как html-файл любую страницу из интернета, она отображается безо всяких стилей, голый текст. В опере и эксплорере все норм.
Ответить
Переустановите Chrome, возможно, он как-то сам сломался.
Ответить
Добрый день Михаил нужна помощь по верстки хочу показать картинку как с вами можно связаться. Я приобретал ваш курс по верстке
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.