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...

http://badesdesign.com/images/navSprite.jpg