Как добавить картинку вместо маркеров в списке.

Мы с вами уже изменяли, некоторым образом, оформление наших списков. Про это я рассказывал в прошлом посте: «Как изменить оформление списка»

Иногда бывают ситуации,  когда нам нужно изменить не просто стиль и цвет маркера, но и вообще сам маркер. Например, поставить вместо него какую - либо картинку.

Для этого нам понадобится сама картинка. Я рекомендую использовать небольшие изображения, примерно 16х16 рх . Следует помнить, что сам сюжет на картинке, если там таковой имеется, лучше расположить ближе к левому краю. Так  у вас будет лучше смотреться вся конструкция.

Сделать картинку можно самому. Как это сделать я рассказывал в отдельном посте. Посмотрите здесь. «Как сделать прозрачный фон укартинки»

Теперь, когда у нас есть готовая картинка, нам нужно загрузить ее в интернет и получить ссылку. Это я подробно рассказывал в посте«Как загрузить картинку в интернет и получить ссылку»

Теперь остается перейти к самому главному – редактированию нашего кода. Как вы помните из поста «списки» состоят из li ( открывающего и закрывающего) внутри  ul

<ul>

<li><a href=”Адрес”></a></li>

<li><a href=” Адрес”></a></li>

<li><a href=” Адрес”></a></li>

</ul>

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

ul {

    list-style-image: url(images/book.png); /* Путь к изображению маркера */

   }

  

Все готово. Осталось только напомнить, что CSS код вставляется в блоге в разделе Шаблон – Настроить – Дополнительные – Добавить  СSS.

От себя добавлю, что код , который вы добавляете, лучше всего комментировать текстом (что это и для чего добавлено). Для добавления комментария в  CSS используйте /*---Здесь комментарий---*/ ,а в HTML <!--<комментарий>- ->
 

Сейчас рассмотрим случай, когда вам нужно изменить только один список, а не все списки в блоге.

Для этого, нам нужно присвоить списку какой либо класс. Например, вот так:

<ul class="news">

<li><a href=” Адрес”></a></li>

<li><a href=” Адрес”></a></li>

<li><a href=” Адрес”></a></li>

</ul>

А уже в  CSS написать :

.news li{

list-style-image: url(https://sites.google.com/site/youmorestop/home/arrow_1.png);

}

.news a:hover{

color:red;

Если перевести все это на нормальный язык, то получится приблизительно так:

маркером перед всеми тегами li , которые расположены внутри класса news, будет картинка, которая находится по этому адресу: https://sites.google.com/site/youmorestop/home/arrow_1.png
При наведении курсора (a:hover) на ссылку «а», которая находится внутри класса  news , цвет ссылки меняется на красный.

Результат можете посмотреть в блоге «Трейдер», раздел «Новости».Я сделал, таким образом, там страницу.
 
Вы можете использовать любые свои значения или такие де как у меня.

Бывают случаи, когда в списке нужен:
 

Нужен квадратный маркер:
list-style-type: square;

Если нам не нужен вообще маркер, то ставим:

list-style-type: none;
 

Если хотим символ вместо маркера, то например так:

li {

    list-style-type: none; /* Убираем маркеры у списка */

   }

   li:before {

    content: "ƥ "; /* Добавляем в качестве маркера символ */

   }

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