background-image

DivMan · May 12, 2013

Почему у меня не встаёт изображение вместо маркера? почему-то оно вставляется после слова.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS</title>
<style type="text/css">
li.img{
    list-style:none;
    background-image:url("arrow_right.png");
    background-repeat:no-repeat;
    background-position:6%;
}
</style>
</head>
<body>
<ul>
    <li class="img">Главная</li>
    <li>Программы</li>
    <li>Фильмы</li>
    <li>Игры</li>
</ul>
</body>
</html>

red4pony · May 12, 2013

Потому-что Вы его сдвинули посредством background-position, удобнее было бы background-position: left 0; А ещё посмотрите тут - но тут проблема спозиционировать изображение маркера. Потребуется его корректировать в графическом редакторе.

DivMan · May 12, 2013

а как для каждой строчки поставить своё изображение?

red4pony · May 12, 2013

Для каждого пункта меню задавать уникальный класс/идентификатор и в CSS прописывать для каждого своё изображение. Ну и если хотите оставить чистым HTML код, то в CSS можно задавать правила через :nth-child()

DivMan · May 12, 2013

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

red4pony · May 12, 2013


background-position: left 10px; /*второе значение показывает на сколько изображение будет отодвигаться от верха*/

DivMan · May 12, 2013

не реагирует

red4pony · May 12, 2013

Посмотрите внимательнее. Ну или код выложите.

DivMan · May 12, 2013


li.img{
list-style:none;
font-size:25px;
list-style-image:url("arrow_right.png");
background-repeat:no-repeat;
background-position: left 10px;
}
li.img2{
list-style:none;
font-size:25px;
list-style-image:url("user.png");
background-repeat:no-repeat;
background-position: left 10px;
}
li.img3{
list-style:none;
font-size:25px;
list-style-image:url("music.png");
background-repeat:no-repeat;
background-position: left 10px;
}

<ul>
<li class="img"><a href="#">Главная</a></li>
<li class="img2"><a href="#">Программы</a></li>
<li class="img3">Музыка</li>

</ul>

Edited May 12, 2013 by DivMan

red4pony · May 12, 2013

Рассуждаем логически. Вы вставили в свойство list-style-image изображение(которое позиционируется автомачически), а спозиционировать хотите другой объект - фон. Так не получится.

1) Вы либо изображение подгоняете(в графическом редакторе) для list-style-image и вставляете.

2) Либо вставляет изображение через background-image и позиционирует его (background-position).

Второй способ предпочтительнее.

DivMan · May 12, 2013

у меня не получается. Пишу background-position: left; и иконка встаёт на буквы Му (Музыка)

Edited May 12, 2013 by DivMan

red4pony · May 12, 2013



li{
padding-left: 15px; /*—отодвинет надпись от края и Ваша иконка не будет наезжать, значение подберите сами—*/
}

li.img{
list-style:none;
font-size:25px;
/*list-style-image:url("arrow_right.png");————удалить————*/
background-image: url("arrow_right.png"); /*—————добавить——*/
background-repeat:no-repeat;
background-position: left 10px;
}
li.img2{
list-style:none;
font-size:25px;
/*list-style-image:url("user.png");————удалить————*/
background-image: url("user.png"); /*—————добавить——*/
background-repeat:no-repeat;
background-position: left 10px;
}
li.img3{
list-style:none;
font-size:25px;
/*list-style-image:url("music.png");————удалить————*/
background-image: url("music.png"); /*—————добавить——*/
background-repeat:no-repeat;
background-position: left 10px;
}

<ul>
<li class="img"><a href="#">Главная</a></li>
<li class="img2"><a href="#">Программы</a></li>
<li class="img3">Музыка</li>

</ul>

li.img - писать не нужно, достаточно .img

P.S. Почитайте это

P.S.S. Сразу не обратил внимание. Сделайте ссылки блочными и к ним добавляйте Ваши иконки и отступы.

Т.е.


<li><a href="#" class="img">Главная</a></li> /*—- ну и в CSS соответственно подправьте—*/

Edited May 12, 2013 by red4pony

DivMan · May 12, 2013

щас попробую.

li.img - писать не нужно, достаточно .img

я по книге учусь Джон Дакетт

DivMan · May 12, 2013

большое спасибо. А как вам репутацию повысить?

red4pony · May 12, 2013

я по книге учусь Джон Дакетт

Его я не знаю.Не читал. Но я уверен что подход вида div.class - хуже такоей записи .class

большое спасибо.

Этого достаточно

Sign In

background-image

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information