The navigation always seems to be my most time consuming and troubling part of CSS. I've only done a handful of websites and it seems every site has something different with it's navigation so I haven't necessarily done the same CSS Nav twice.
With the attached image of my sprite, what would be the best approach to css this?
The one thing I want to do is have the text links placed behind the sprite image, so I believe this where I start to run into problems. I don't want text links to be margin-left:-1000px. Basically if you were to turn off images I want the links to be right behind the sprite image. So I started off with having a <span> for each <li> and applied the sprite image to the <span> and made it position:absolute and used background positioning and margins to place the sprite correctly. But so far it seems very messy and convoluted.
Plus I have the front and end caps (what I call 'caps') of the sprite image that also needs to shown. Would I give them their own <li> and just not apply an <a> tag?
Sorry for the rant - what approach would you use? I think I could do it myself but it would just be messy...
I started off with having a <span> for each <li> and applied the sprite image to the <span> and made it position:absolute and used background positioning and margins to place the sprite correctly.
You are on the right track ... except for the margins. Don't worry about them. Give the <a> and the span a width and height to match the area of the sprite you want seen. Give the <a> position: relative, so that the <span> will be placed in relation to it. Or you can give position: relative to the li itself, but also give it the width and height of the span.
I'd be more inclines to float the LIs. I find that float works better than display: inline, and then you don't have the conflict of displays either. Inline-block is very handy, but sometimes leaves gaps between elements, which is annoying if you don't want those gaps—which I expect is the case here.