Page is a not externally linkable
lucy24 - 1:55 am on Mar 3, 2013 (gmt 0)
My problem is that I cannot get the entire sprite visible. There are five icons and while it shows five separate icons, it shows each as the same last two in the sprite.
Sounds like a typo. The kind where you kick yourself for missing it. Been there. Done that.
Generic sprite CSS, here using a graphic made up of five adjoining 16x16 blocks (the clever reader will deduce that I used my system default 16-color palette):
div.icons {margin: 0; padding: 0; text-align: right;}
div.icons a {display: inline-block; margin: 0; padding: 0; width: 16px; height: 16px; background-repeat: no-repeat; background-image: url("sprites.png"); padding: 0;}
#yellow {background-position: 0 0;}
#orange {background-position: -16px 0;}
#red {background-position: -32px 0;}
#pink {background-position: -48px 0;}
#blue {background-position: -64px 0;}
Generic sprite HTML:
<div class = "icons">
<a id = "yellow"> </a><a id = "orange"> </a><a id = "red"> </a><a id = "pink"> </a><a id = "blue"> </a>
</div>
"display" has to be set to "inline-block" because only block-level elements have a width. No line breaks in the raw html because these will be interpreted as spacing between elements. nbsp because many things are safer when they have content of some kind, even if it isn't visible.
Sprites make me happy because when I first looked them up I found out that I already know how to do them. Eons ago when I made games, I used the identical system mutatis mutandis to collect groups of related images-- like, say, a wiggly thing slithering across the floor-- into a single resource file.