Sliding Doors with CSS Sprites in harmony.

More CSS Sprites. This time combined with the 'sliding doors' technique. I got lots of inspiration from the guys at A List Apart for this, but I thought their examples to be a little more wordy than I really wanted, so I thought I'd write my own. Here's the working sample of this technique, with my own ugly buttons.

Let's start with the images themselves.

Here's 'left.gif':

And 'right.gif':

Now for the CSS:

The only thing worth noting here is the focus (with 2 different hacks) on controlling the font-size for the links. This is addressed at ALA, so I'll leave it out here. Suffice it to say that the size of the fonts is pretty important to making all the other measurements you'll be making with these buttons.

Next, we setup the basic settings for the list itself. We want the font size to adhere to what we set for the body, and we want the list itself to only be an html container mechanism, so we get rid of the margin and list-style in "ul".

Here's where the first bit of magic comes into play. We set the background image of the list item itself to be the left sprite, and the background image of the link (which lives inside the list item) to be the right side. The thing that makes the right side show it's rounded corner is our 100% setting in the background of the "a" style. This ensures that no matter how long or short the content of the a tag, the right side will always be the far right side of the right image. In other words, it sort of 'snaps' the right side of the background image to the right side of the link text.

Play around with the padding settings for each of these to see what they do, but it's worth noting that they will change for you in direct relation to the size of your background image and font, respectively.

Once again, these IE hacks control the presentation of the links themselves, and are explained in more detail at ALA.

Although ALA ends up using Descending Selectors for their final version, I chose not to for mine, and stuck with a 'current' tag. I figure it's less CSS, and if my dynamic pages know the name of the current page, they can throw the current tag in just as easily with a simple loop. It's a matter of preference, from what I can tell, but you can make that call yourself.

However, the thing worth noting here is that the background-position property is the only thing we're messing with here. This is where our CSS Sprite magic comes into play. Now we're working with rounded corners, variable widths, minimal code, and minimal http requests with only 2 images!!!

This last bit just sets the hover properties for both the list item and the link. It's worth noting that this works because the "a" tag is nested inside the "li" tag. And, since the "a" tag is set to display:block, when you rollover one, you're also rolling over the other, thus triggering both hover properties at once.

Finally, our html body contains a div with the id we've handled in the css, and an unordered list that contains a 'current' id somewhere in the list.