Оформление маркированного списка в HTML картинками с помощью CSS

Октябрь 08, 2013   Александр Маврин   11 комментариев

Маркированный списокЗдравствуйте, друзья. Иногда полезно возвращаться к основам HTML, чтобы освежить память и проверить не забыли ли что-нибудь. И в этой статье речь пойдет про оформление маркированного списка, а если более конкретно, то попробуем сделать маркеры списка картинками. Да, именно так. Все эти кружочки и квадратики нас вовсе не интересуют, будем оформлять свои списки красиво. И для этого есть 3 способа оформления. Начнем по порядку. Для начала вспомним, как же пишутся маркированные списки на HTML. А пишутся они вот так:

1
2
3
4
5
6
7
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
	<li>Пункт 4</li>
	<li>Пункт 5</li>
</ul>

То есть по умолчанию, без какого либо оформления, список будет выглядеть так, только кружочки маркера будут полностью черными:

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5

Итак, давайте поменяем эти черные кружочки на картинку. Я использовал в примере изображение зеленой галочки. Вы же можете подобрать другую картинку, звездочки, сердечки, что угодно. Только желательно, чтобы размер этой картинки был небольшим, а лучше всего 16×16 пикселей. Надеюсь, что вы знаете, как изменить размер изображения. Все, что нужно это в CSS свойстве прописать путь до картинки.

1
2
3
ul {
    list-style:url("list.png");
}

И давайте посмотрим, что у нас из этого получилось.
Демо

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

1
2
3
4
5
6
7
ul {
    list-style: none; // Убираем маркеры
}
 li {
    background: url("list.png")no-repeat left center; // Картинка слева по центру
    padding-left: 20px; // Отступ слева от маркера
}

Выглядеть будет это так же, как и в первом примере, но лишь слегка будет отличатся положением самой картинки. Для наглядности я сделал вторую страницу. Посмотрите и сравните оба варианта оформления маркированных списков.

Демо

И наконец третий способ и он достаточно гибкий. В нем мы используем псевдокласс before. То есть мы укажем в CSS, что будет выводится перед каждым пунктом списка. Посмотрим на код:

1
2
3
4
5
6
7
8
ul {
    list-style:none;
}
li:before {
    content: url(list.png);
    position: relative;
    left: -5px;
}

В дополнение ко всему мы используем в этом примере относительное позиционирование, что позволяет нам размещать наши маркеры так, как нам удобно и располагать их в любом месте. Посмотрите пример. Он практически не отличается от второго варианта.

Демо

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

Не стесняйтесь делиться записью в социальных сетях. Спасибо


11 комментариев
  1. Не совсем поняла, в какой папке должна находиться картинка, чтобы достаточно было указать только ее название? Или это только для примера, и путь надо прописывать целиком, с http? 😯

    • В примере у меня картинка находится той же папке, что и страница примера, так что достаточно только названия. На сайте же можно указывать как относительный, так и абсолютный путь к картинке. Не важно в какую папку вы ее положите, но желательно вместе со всеми картинками, чтобы не путаться.

      1
      2
      
      .../images/list.png // Относительный путь
      http://serblog.ru/wp-content/themes/MyTheme/images/list.png //Абсолютный путь
  2. Алена:

    Здравствуйте!

    Александр, а подскажите, пожалуйста, как сделать, чтобы ля разных списков можно было выводить разные картинки?

    Как Вы тут как раз со Светланой обсуждали — через классы… Как это сделать? Или направьте, где почитать об этом, пожалуйста.

    • Да, через классы. Пример:

      1
      2
      3
      4
      5
      
      <ul class="list">
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>Пункт 3</li>
      </ul>

      В css:

      1
      2
      3
      
      .list {
          list-style:url("list.png");
      }
      • Алена:

        Спасибо большое!

        Только я еще совсем чайник, у меня почему-то получается тогда во втором списке (который list), что две картинки рядом стоят. Старая (для всех списков) и перед ней новая (для списков list).

        Не знаю, как сюда код скопировать… Вот этот кусок с кодами списков в style.css, если получится:

        #content ul{list-style-type:none}
        #content ul li{border-top:none;list-style-type:none;padding:0px 0px 8px 20px;background:#fff url(images/bullet_ball_glass_green.png) no-repeat}
        #content .list{list-style:url(images/7.gif);}

        • Страницу можно посмотреть, где вы все это делаете?

          • Алена:

            Напишу Вам письмо, чтобы здесь не засорять 💡 Буду благодарна за помощь!

            И с наступившим Вас! А то совсем забыла и поздравить в этой возне…

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *