Help with Navigation

[Bades]

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

[ralph.m]

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.

Here's an example of the method:

http://www.pmob.co.uk/temp/headerreplacement3.htm

[Bades]

Because my widths differ for each nav item that means I need separate CSS for each link's width in regards to its <a> and <span>?

[Bades]

I tried applying widths to each link's <a> and the <a>'s width is only as wide as the text links. And won't seem to take to the width I'm setting forth on it.

[Bades]

HTML Example

<li><a class="home" href="index.html">Home<span></span></a></li>

[ralph.m]

Because my widths differ for each nav item that means I need separate CSS for each link's width in regards to its <a> and <span>?

Yes, a separate width will be needed on each item, so give each li a special class. Set the li, <a> and span all to the same width and height, and give them display: block for good measure.

[Bades]

My nav is left to right, so I applied a display:inline; like this

#nav li, #nav li a, #nav li span{
height: 46px;
position: relative;
display: inline;
}

Because you mentioned display:block, should I change my inline to a inline-block?

[ralph.m]

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.