使用CSS和HTML上的文本将不同的图像作为按钮添加到每个LI

Question

Im trying to make it to were I can add an image to each LI not a bullet image but an image to represent the button itself, and I want to be able to use text in the html. I have tried #glass_menu ul li.shard1,.shard1 I cant figure it out can someone please help!!

css:

#glass_menu {
width:984px;
text-align:center;
text-decoration:none;
display:inline;
position:relative;
bottom:-20px;
}
#glass_menu ul li{
padding: 0 40px 0 40px;
display: inline;
}

.shard1{
background-image:url(glasshard1.png);
background-repeat: no-repeat;
width:30px;
height:30px;

}
.shard2{
background-image:url(glasshard2.png);
background-repeat: no-repeat;
width:30px;
height:30px;    
}
.shard3{

}
.shard4{

}
.shard5{ 

}
.shard6{

}

html:

<div id="glass_menu">
<ul class="menu">
<li class="shard1"><a href="index.php">home</a></li>
<li class="shard2"><a href="Estimate.php"><span>Estimate</span></a></li>
<li class="shard3"><a href="why-should-you-choose-us.html"><span>help</span></a></li>
<li class="shard4"><a href="Contact.php"><span>Contact Us</span></a></li>
<li class="shard5"><a href="affiliates.html"><span>Affiliates</span></a></li>
<li class="shard6"><a href="Location.html"><span>Location</span></a></li>
</ul>
</div><!--end glass_menu div-->

Answer 1

1) Reset your list:

#glass_menu ul li {
    list-style:none;
    margin:0;
    padding:0;
}

2) Don't style the LI, except for positioning/floats.

#glass_menu li {
    float:left
}

3) Style the LINK and use display:block . Remove the SPAN, there's no reason for it to be there.

.shard1 a {
    background-image:url(glasshard1.png);
    background-repeat: no-repeat;
    width:30px;
    display:block;
    padding-left: 30px; <--- you need this to move your text to the right to uncover the background image.
}

4) Read my tutorial: I love lists.