I do not understand how to insert an image. I have a horizontal menu with a height of 50 px, made an image that I want to put in place of the list marker, the image height is also 50 px.

Page Code:

.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; } 
 <div class="menu"> <ul> <li><a href="index.html">Главная</a></li> <li><a href="sotrud.html">Сотрудники</a></li> <li><a href="docum.html">Документы</a></li> <li><a href="news.html">Новости</a></li> <li><a href="photo.html">Фотоальбом</a></li> </ul> </div>

If I write display: inline or inline-block in li , then markers and images are not displayed at all, disappear.

With the code that is now, everything works, but the image shifts the link text. Thus, instead of a marker, it turns out to put only an image of such height, what height the link text has (20 px). If the height is greater, the text is shifted.

1 answer 1

Instead of using list-style-image, use plain background instead. With it, you can flexibly adjust the position of the image, which will not work in the case of list-style-image

http://jsfiddle.net/8fV3X/