Question

I want to create a horizontal menu using a UL and LI. The only problem is that every button had the text in the image so i want to see the images and with onmouse over.

I tried giving each li a class with the image background width and height an li homeButton:hover but it doesnt work.

This is my html

 <div id="navcontainer">
    <ul id="navlist">
    <li><a href="#"><img src="imgs/nav/home.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/about.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/webshop.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/lookbook.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/blog.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/news.png" border="0" /></a></li>
    </ul>
</div>

and here is my css

    #navlist
{
list-style: none;
padding: 0;
margin: 0;
}

#navlist li
{
display: inline;
padding:0;
margin: 0;
}

#navlist li:before { content: url('../imgs/nav/slash.png'); }
#navlist li:first-child:before { content: ""; }

/*IE workaround*/
/*All IE browsers*/
* html #navlist li
{
background-image: url('../imgs/nav/slash.png');
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0.5em 0 1em;
margin: 0 1em 0 -1em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #navlist { height: 1%; }

* html #navlist li
{
display: block;
float: left;
}

the :after puts a image right next to each button….

Answer 1

Use background-image inside of your li tags. You can play around with the margin and padding, I’ve given you some arbitrary values to start you off.

#navlist { 
    list-style: none;
    margin: 0; }
#navlist li { 
    background: url('../imgs/nav/slash.png') 0 50% no-repeat;
    margin: 0 0 0 5px; /* The amount of space you want before the image */
    padding: 0 0 0 5px; /* The amount of space you want to allocate for this image */
    display: inline-block; }