Специальные маркеры, использующие изображения
Стандартного множества маркеров достаточно для базового контента, однако широко распространено требование замены их специальным изображением.
Спецификация CSS содержит свойство list-style-image для добавления специального изображения списка. Однако это свойство имеет ограниченные возможности позиционирования для фонового изображения, и в некоторых ситуациях вообще не работает в браузере IE. Поэтому значительно более распространенной практикой является просто задание фонового изображения в пунктах списка.
Представим, что имеется список лент RSS и необходимо изменить маркер на стандартную оранжевую иконку RSS. Мы задаем для списка класс "rss", чтобы выделить его из других списков:
<ul class="rss">
<li><a href="http://example.com/rss.xml">News</a></li>
<li><a href="http://example.com/rss.xml">Sport</a></li>
<li><a href="http://example.com/rss.xml">Weather</a></li>
<li><a href="http://example.com/rss.xml">Business</a></li>
<li><a href="http://example.com/rss.xml">Entertainment</a></li>
<li><a href="http://example.com/rss.xml">Funny News</a></li>
</ul>
Прежде всего, определяем для списка отсутствие list-style-type и удаляем поле и заполнение. Затем мы добавляем просто фоновое изображение для каждого пункта списка, некоторое заполнение слева, чтобы сместить текст, позволяя вывести изображение, и некоторое заполнение снизу, чтобы растянуть пространство между пунктами списка:
.rss {
margin: 0;
padding: 0;
list-style-type: none;
}
.rss li {
background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
padding: 0 0 5px 15px;
}
Это создает список с изображением RSS вместо маркеров, как показано на рис. 32.3:
Рис. 32.3. Список с маркерами изображениями
Отметим,
что фоновое изображение позиционируется
для точного размещения с помощью
пикселей. В зависимости от создаваемого
дизайна, можно использовать также %, em
или ключевые слова.
Будьте внимательны при проектировании свойств контента, которые могут создавать многострочные пункты списков - если задать для фонового изображения вертикальное центрирование или 50%, то это может выглядеть достаточно странно, как показано на рис. 32.4:
Рис. 32.4. Демонстрация вертикально центрированных маркерных изображений на многострочном пункте списка
Задавая размещение изображения вверху пункта списка, мы сохраняем используемое по умолчанию поведение маркеров (когда маркер размещается в первой строке) - см. рис. 32.5:
Рис. 32.5. Демонстрация выровненных по верху маркерных изображений на многострочном пункте списка
Поля и заполнение списков
Разумное использование полей и заполнения может придать виду списка более профессиональный и безупречный вид, но вы должны знать, что делаете, и помнить также, что ситуация может отличаться для различных типов списков. В этом разделе мы рассмотрим применение разумных полей и заполнения для двух наиболее распространенных типов списков.
Неупорядоченные списки
Один момент, который можно заметить достаточно быстро, состоит в том, что используемый по умолчанию стиль оформления списков, делает для них отступ больше, чем используемый по умолчанию стиль для параграфов - см. рис. 32.6:
Рис. 32.6. Оформленные по умолчанию списки имеют отступ слева
Если требуется, чтобы пункты неупорядоченного списка находились в той же точке выравнивания слева, что и остальной контент, понадобится задать несколько стилей для управления отступом в соответствии с требованиями. Различные браузеры требуют различных настроек - некоторым требуется удаление полей, для других нужно удалить заполнение. Поэтому, чтобы удовлетворить все браузеры, обнуляем оба значения:
ul {
margin: 0;
padding: 0;
}
Это может создавать не тот результат, который ожидается, так как текст будет прижат влево, а маркеры будут располагаться за пределами текста, как показано нарис. 32.7:
Рис. 32.7. Маркеры располагаются слева от текста.
Поэтому, чтобы выровнять маркеры слева, теперь можно задать поле для пунктов списка, чтобы все лежало на одной прямой:
ul {
margin-left: 0;
padding-left: 0;
}
ul li {
margin-left: 1em;
}
... можно по прежнему обнаружить различия на уровне пикселей между различными браузерами, но результат будет согласован насколько возможно - см. рис. 32.8:
Рис. 32.8. Маркеры выровнены в соответствии с окружающими параграфами