I keep having trouble writing sprites. Maybe I don't understand the <ul> and <li> concept...however, my latest adventure shows a portion of the "HOME" button while in hover but only shows part of the hover state.
Like half normal state and half hover when I mouse over. Can anyone suggest where the code is wrong. I keep checking the math and it's right. ? Here's the source and css.
Thanks.
B.
html code:
<!--start buttons-->
<div id="buttons">
<ul>
<li id ="home"><a href="index.html"target="_self">Artman Graphic Design Home Page</a></li>
<li id="ill"><a href="illustration.html"target="_self">Townsend Artman Illustrations</a></li>
<li id="book"><a href="bookcovers.html"target="_self">Book Cover Designs</a></li>
<li id="lucky"><a href="luckydog.html"target="_self">A Lucky Dog</a></li>
<li id="cd"><a href="cd.html"target="_self">CD Cover Designs</a></li>
<li id ="retouch"><a href="retouch.html"target="_self">Digital Retouching and Restoration</a></li>
<li id="artwork"><a href="artwork.html"target="_self">Constructed Art Work</a></li>
<li id="artshow"><a href="artshow.html"target="_self">Close Quarters One Man Show</a></li>
<li id="church"><a href="church.html"target="_self">Church Work</a></li>
<li id="contact"><a href="mailto:artman@example.com"target="_blank">Contact Us</a></li>
</ul>
</div>
<!--end buttons-->
css:
#buttons {
position: absolute;
width:677px;
height:20px;
background:url(../images/nav_bar_ta.jpg) no-repeat;
margin:0;
padding:0;
}
#buttons li {
float:left;
}
#buttons li a {
position: absolute;
top:0;
margin:0 0 0 0px;
padding:0;
display:block;
height: 20px;
background:url(../images/nav_bar_ta.jpg);
text-indent:-9999px;
overflow:hidden;
font-size: 1px;
}
li#home a {
left:0;
width: 52px
background-position: 0 0;
}
li#ill a {
left:52px;
width: 80px
background-position: -52px 0;
}
li#book a {
left:132px;
width: 78px
background-position: -132px 0;
}
li#lucky a {
left:210px;
width: 68px
background-position: -210px 0;
}
li#cd a {
left:278px;
width: 66px
background-position: -278px 0;
}
li#retouch a {
left:344px;
width: 76px
background-position: -344px 0;
}
li#artwork a {
left:420px;
width: 62px
background-position: -420px 0;
}
li#artshow a {
left:482px;
width: 70px
background-position: -482px 0;
}
li#church a {
left:552px;
width: 58px
background-position: -552px 0;
}
li#contact a {
left:610px;
width: 67px
background-position: -610px 0;
}
<!--start hover-->
li#home a:hover {
background-position: 0 -20px;
}
li#ill a:hover {
background-position: -52px -20px;
}
li#book a:hover {
background-position: -132px -20px;
}
li#lucky a:hover {
background-position: -210px -20px;
}
li#cd a:hover {
background-position: -278px -20px;
}
li#retouch a:hover {
background-position: -344px -20px;
}
li#artwork a:hover {
background-position: -420px -20px;
}
li#artshow a:hover {
background-position: -482px -20px;
}
li#church a:hover {
background-position: -552px -20px;
}
li#contact a:hover {
background-position: -610px -20px;
}
<!--end hover-->
[edited by: eelixduppy at 9:50 pm (utc) on Mar 11, 2010]
[edit reason] removed specifics [/edit]
