Не пойму, как вставить изображение. У меня горизонтальное меню высотой 50 px, сделал изображение, которое хочу поставить вместо маркера списка, высота изображения тоже 50 px.
Код страницы:
.menu{
background-image: url(images/fon_menu.jpg);
height: 50px;
}
li {
float: left;
list-style-image: url(images/kn_cl.png);
font-family: sans-serif;
font-size: 20px;
margin: 10px 40px;
}
Если в li пишу display: inline или inline-block, то маркеры и изображения вообще не отображаются, исчезают.
С тем кодом, который есть сейчас, всё работает, но изображение смещает текст ссылки. Таким образом вместо маркера получается поставить только изображение такой высоты, какую высоту имеет текст ссылки (20 px). Если высота больше, сдвигается текст.
Ответ
Вместо list-style-image лучше используйте обычный background. С его помощью можно гибко настроить позицию изображения, чего не получится в случае с list-style-image http://jsfiddle.net/8fV3X/
Комментариев нет:
Отправить комментарий