Графические маркеры у списков

Не сказать, что это новшество, но поскольку часто спрашивают…

Такие простые вещи, которые, казалось бы, должны решаться на уровне браузера в итоге выглядят убого. Нет, в браузерах сделанных на совесть выглядит всё достаточно неплохо, но правда не гибко,  но Opera и IE располагает маркеры выше, чем нужно.

Все, кто знает об этих проблемах с маркерами, те забыли CSS-свойство list-style-image и вместо него используют background-image или просто background.

Например:

	background: url(marker.gif) 0 5px no-repeat;

Результат:

Если маркеры и прыгают, то примерно +/- 1px по высоте. Это гораздо лучший результат, чем было. Если можете предложить лучше — пожалуйста, предложите свой вариант. 

Кроме того, что расположение картинки теперь более точное, есть возможность изменения её позиции относительно не только строки, но и всего элемента списка, если это требуется.

Единственный минус — мы теряем свойство background для других нужд. Чтобы добавлять фон для каждого элемента списка требуется добавлять еще какой-нибудь элемент.

Простой пример списков с графическими маркерами.

Дата: 19.11.2008
Категории: CSS
«
Google     
(написать)

]]> wexon ]]>

Может я не грамматически правильно оформил, но у меня заработало. В смысле я попытался исправить единственный минус :)
html:
Бла-бла-бла
css:
ul.background-image-advanced li.odd div {
background: url(marker.gif) (параметры подганять чтобы стрелка стояла ровно);
}

это даёт нам в ul.background-image-advanced li.odd добавить свой слой с бекграундом. Конечно надо позаботится о прозрачности.

»
19 11.08 22:32

]]> wexon ]]>

Извините но Wordpress не показывает html :)
повторю: Бла-бла-бла

»
19 11.08 22:34

]]> Мир CSS» Blog Archive » Графические буллеты в списках ]]>

[...] Читаем [...]

»
19 11.08 22:39

]]> Никита ]]>

wexon, html напишите хоть квадратными скобками что ли.
Про ваш CSS могу сказать только себя процетировав: «Чтобы добавлять фон для каждого элемента списка требуется добавлять еще какой-нибудь элемент.»

»
20 11.08 00:00

]]> Dimox ]]>

Да, именно по этой причине я никогда не использую list-style-image.

»
20 11.08 01:19

]]> Zigzag ]]>

да, это меня всегда тоже парило и я тоже юзаю фон li для имитации буллетов.

»
20 11.08 15:38

]]> UZDaniel ]]>

Я вам очень благодарна, мне понравилось

»
24 11.08 12:08

]]> Serhiy ]]>

еще проблема в том, что горизонтальный отступ в ИЕ больше чем у других браузеров.

»
27 11.08 12:43

Напишите комментарий