css, html, php, javascript, jQuery, ajax … – решения, примеры, рецепты
22 Янв
Знаете ли Вы, что разные браузеры используют различные методы для формирования отступов в нумерованных и ненумерованных списках? Это действительно так. Браузеры IE и Opera создают отступы руководствуясь свойством margin, а Mozilla и Netscape – используют для этого же свойство padding. Для того, что бы страница выглядела одинаково во всех браузерах надо что-то предпринимать. Так что же?
Решение в этом случае достаточно простое. При создании стилевого оформления списка надо просто учесть этот факт и задать оба свойства, например вот так:
ul {
margin-left: 50px;
padding-left: 0px;
}
Если же Вы попытаетесь разделить эти 50px между свойствами margin и padding, то отображение страницы в разных браузерах будет уже неодинаковым.
С одним вопросом немного разобрались. Теперь во всех браузерах отступы одинаковые, но вот как-то бедно выглядят эти списки. У одного в качестве маркера – закрашенный кружочек, у другого – ничем не примечательные цифры.
Возможно также создавать и свои собственные маркеры для списков, причем как текстовые, так и графические, но эти возможности мы рассмотрим отдельно.
Для того, чтобы поменять стандартный стиль списка, воспользуйтесь свойством list-style-type и Вы сможете изменить маркер или тип счетчика. Приведу возможные значения для ненумерованного списка.
disc – обычно по умолчанию. Закрашенный кружок.
circle – незакрашенный кружок.
square – закрашенный квадратик.
Т.е., если мы хотим вместо появляющегося по умолчанию закрашенного кружочка увидеть квадратик, пишем:
li {
list-style-type: square;
}
Точно так же для нумерованного списка по умолчанию применяется значение decimal, т.е. начинается с 1, затем 2, 3 и так далее…
Приведу еще несколько возможных значений:
decimal-leading-zero – начинается с 01, потом идет 02, 03 и так далее. Количеству ведущих нулей может равняться числу значащих цифр. Например 0001 будет показан в списке из например 9999 элементов.
lower-roman – строчные римские цифры.
upper-roman – заглавные римские цифры.
lower-greek – начинается с букв греческого алфавита: альфа, бета, гамма и т.д. (не поддерживается в IE).
hebrew – начинается с традиционного иврита (не поддерживается в IE).
none – как же без этого – маркеры не отображаются.
Ну и еще один маленький совет: браузеры в большинстве случаев изменяют тип маркера при переходе с одного уровня списка на другой. Для того, чтобы этого избежать необходимо менять значение свойства list-style-type в каждом списке-потомке.
Отзывов (2) на «CSS: задание отступов и изменение стилей маркера в списках»
А как поставить свой значек в качестве маркера? Чтобы работало в ие 6-7.
CSS: как создать графический или текстовый маркер в списке
Оставьте отзыв