Главная » Создание сайтов » Верстка » Оформление маркера в ul списках

Оформление маркера в ul списках

Маркер для UL списка

Этот пост являеться некоторым напоминанием для меня на будующее, так как я не всегда вспоминаю про оформления списков в своих проектах, стандартные маркеры у UL списков не всегда вписываются в дизайн сайта и порой на фоне красивого дизайна выглядят пугающе(пример из реальной жизни, вот такие вот косяки есть на моем сайте ):

Пример списка

Я не изменил оформление списка стоящее по умолчанию, и вот что получилось в итоге. Это нужно быстренько исправить, и я покажу вам 2 способа как сделать это.

Оформление списка. Способ первый

CSS без проблем может помочь изменить внешний вид списка, и для этого даже есть специальное свойство под названием list-style-image, в его значении нужно указать ссылку на нужное изображение маркера (примерно так — url (some_image.gif)). CSS для оформления списка:

ul {
margin:0 0 0 30px;
padding:0;
list-style-position: outside; //фикс для IE
}
ul li{
font:normal 11px/14px Verdana, Geneva, sans-serif;
text-transform:uppercase;
list-style-image: url(ul_marker.png); //маркер размером 4x5px
}

HTML код я приводить не буду, так как это просто небольшое дерево из UL LI элементов.

Всё сделано точно в соответствии со спецификацией, но как всегда на деле получилось не то что ожидалось.

3002Однажды я столкнулся с этой проблемой, и вместо того чтобы искать решение я начал эксперементировать с размерами изображения маркера, отступами, применять хаки для отдельных браузеров. Но есть более простой путь вставки маркера в списки.

Оформление списка. Способ второй

Когда я понял что нужно использовать именно его, я стукнул себя по голове, мол, как я не догадался раньше. А заключается этот способ в использовании CSS свойствbackground и background-position. То есть идея заключается в том, чтобы отображать не маркер в списке, а фоновое изображение у пунктов списка. CSS код:

ul {
margin:0 0 0 30px;
padding:0;
list-style-position: outside;
}
ul li{
padding:0 0 0 10px; // добавляем отступ слева
list-style:none; // отменяем отображение маркера стоящего по умолчанию
background:url(ul_marker.png) no-repeat 0 5px;
// указываем путь и положение фоновой картинки в пункте списка
font:normal 11px/14px Verdana, Geneva, sans-serif;
text-transform:uppercase;
}

Теперь маркер отображается во всех браузерах почти одинаково(как всегда подвёл IE6...), с погрешностью в 1px (наверное стоило сделать маркер размерами 5x5px, а не 4x5px), но по сравнению с предыдущим способом виден значительный прогресс!

3003

Ещё можно повозиться с JavaScript, но это совсем другая история... Удачи вам в оформлении списков!

С уважением, Vasilenko Ivan!

Комментарии — 2 комментария

  1. #292 Сергей М. в 0:18, 3 февраля 2009: (подписался)

    Ответить | Цитировать

    Ну, бэками проще, конечно. Но проблема первого варианта могла быть в отсчете от базовой линии — попробуй задать пиксельно vertical-align.

  2. #9610 akuba в 16:59, 15 апреля 2010:

    Ответить | Цитировать

    а как изменить расстояние между текстом и маркером в штатном li?

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting