There are several ways you can do CSS sprites, but I like to set the image on the LI rather than the UL. This gives you more flexibility as to where you put the buttons. So place your UL on your page. Make sure to set the position to relative. All other styles can be set however you want.
#buttonnav {
position: relative;
margin: 10px auto;
padding: 3px;
height: 56px;
}
Then, put the background image on the LI. The default setting will be with the upper left most image.
#buttonnav li {
background: url(sprites.png) 0 0 no-repeat;
position: absolute;
height: 56px;
display: block;
list-style: none;
}
#buttonnav a {
height: 56px;
display: block;
}
Make sure the URL in the background points to the correct image sprite file. And be sure to se the position of these elements to absolute. If you know that all your sprites are exactly the same height and width you can set the height and width in these styles. My sprites are different widths, so I'll set them in the specific sections.
You should also make the anchor tags within the LI the same width as the LI and make them a block element. This will make your buttons fully click-able.
