箇条書きの画像ではなく、ボタン自体を表す画像を各LIに追加でき、htmlでテキストを使用できるようにしたいと考えています。#glass_menu ul li.shard1,.shard1 を試してみました 誰か助けてください!!
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-->