This seems like way too much work.

All of my pages are just one big image. I can make my pages look exactly how I want.

Why do the images disappear before they change for the hover effect?

I will test these tabs. I tried a lot of but never looks good. Hope this one will work.

Thank you so much for the simple tutorial! It is exactly what I needed, and published o my birthday no less! I am printing this off, along with the alistapart articles, as having the information at hand is incredibly useful.

A while back I was wanting to implement centered navigation on a site that I was working on. Being my first try at designing with CSS for layout, I struggled for hours trying to get a simple navigation bar that worked. Finally I managed to hack one together, although the method was a bit of a hack job (“whatever, it works”) that I can no go and fix. You can see the original site here: http://www.vugmedia.com/dustytodollars/

Thx a million! This site is my home page over the Christmas holidays and is increasing my coding skills by the day.

Cheers,

Rick

Nice article Ethan! The scaling of font sizes works great.

One thing I’m missing, though. And that’s the current active tab? In your example they ALL look like the currently active one…So how does your visitor know, which tab he/she is looking at?

Thanx very much!

I’m working on a website and need a centered navigation exactly like this one! I tried with margins/paddings and percentage but didn’t even got close enough. It’s funny that it’s so easy.

Greetings from Switzerland

Nice article, i’m gonna try this too.

And by the way. If you open the JS Console in FF 1.5 you’ll see that it thinks your CSS i broken.

I guess it doesn’t like the hacks either. ;)

Thanks for this Ethan.

Maarten,

To achieve the effect of only one tab looking “current”, you need to do 3 things:

1) Have a way to identify the current tab

2) Add a bottom border to all tabs

3) Remove the bottom border from the current tab

For (1), you can add a class “current” to the appropriate li element. [See note below for an alternative]

For (2), you’ll add a border-bottom to each tab’s inner span (adjusting the padding to account for the extra pixel used):

For (3), you’ll add a rule which targets the current tab, and remove the border (effectively undoing the more general rule in step 2):

Note An alternative (better?) way to identify the “current” tab would be to give a unique id to each li element and use contextual selectors combined with unique page ids set on the body element, like this:

Good luck,

Alan.

Mats, I’m not sure why Firefox is squawking about that CSS, but I’ll look into it; thanks for the heads-up. For what it’s worth, the validator doesn’t seem to complain too loudly.

And Maarten, Alan’s suggestions are spot on. You could take his modifications and use them as the basis for any number of improvements, such as rollovers and a “current tab” state (see the second Sliding Doors article for examples on how to do this).

Thanks for the feedback, all. Glad you liked the tip!

Love that this does away with the old ‘float: left;’ approach.

Kudos.

very handy thanks!

But—all this unnecessary markup just for a bunch of tabs? Why wrap the list in a division and, most importantly, it’s stupid to have a span inside a link.

I don’t know…

Rock on Ethan. Good writeup.

One thing to note is that I’m finding the bottom border mysteriously appears if you increase the text size twice in Firefox 1.0.7 for OS X and Windows. In 1.5, everything is fine. Odd.

Oh, and for the record, I’d like everyone to know that Ethan likes to use fun class names like “hotitude” and “ineffable” in his CSS code.

What if IE7 fixes the comment parsing bug, but doesn’t fix the padding error?

I’m going to have to side with Microsoft and say that conditional comments are the best way to work around errors in their CSS implementation.

Damn, someone figured it out. I love it.

Mats: in a caffeine-deprived binge, I’d apparently managed to put some old-school JavaScript-obscuring comments around my CSS. It’s the trailing ”//—>” that seems to be causing Firefox to complain; remove that leading double backslash (”//”), and you’ll be set. Sorry about that.

Veracon: Unnecessary in what sense? Compared to the old table-based way of doing things, I think an extra span is a small price to pay. Of course, your semantic mileage may vary.

Patrick: thanks for the Firefox 1.0.7 note. I’ll take a look at that, but I’m guessing there’s some weird pixel rounding error at play there.

Mark: Fair enough, and you’re obviously more than welcome to use that approach. I normally wouldn’t put any browser-specific hacks in my core stylesheet, but I thought it the best approach for the purposes of a quick write-up.

Thanks for the feedback, all!

Technically, if you really wanted the parent to contain it’s children, you can just set your parent to overflow:hidden

Just in time for a redesign! Thanks much! (But what’s with the “rockin’ like Dokken” reference? That’s the second time in as many days that I’ve heard that. I mean, Dokken rocked it, to be sure, but is this a new phrase making the rounds or am I just way out of touch? ;-))

Thanks for the nice article!!

I would suggest to use &nbsp instead of a normal space, because the breaks inside of the tabs are uggly (if you increase the font size or your window is to small).

The tabs get all squashed up in my IE (5.01 SP2).

Any ideas / remedies?

Anyone care?

P.S. Nice article.

You could avoid the use of the li.last class by applying equal margins to the left and the right of the li, like so: li {margin:0 .375em}

D’oh. Philippe: you’re right, of course. I was probably a bit low on caffeine when I cooked up this example. Thanks for the catch!

With that last set of tabs bleeding over the bottom border, it’s look much more than just “appropriately” sexy. These tabs are beautiful. I have loved the sliding doors for a long time now, but I’m a centered layout kind of guy. You just made my dreams come true! Or maybe I just need a vacation. ;-)

“if we ever changed the number of navigation items, or if the user increased her browser’s font size, our design could easily break.”

Sorry mate, your solution still does. Sadly, I think the reason is a fundamental one and there may not be a real answer though I hope someone proves me wrong one day.

but as Velouria pointed out, it doesnt look right in IE5.01/WIN. theres no padding or so..

Regarding your hacks, what browsers do the IE hack fix, is it all (as I will obviously need to use IE conditional statements instead of hacks with IE7 looming).

Also, is there anyway you can detect a browsers on a system with conditional statements? (For example, I want to run a statement for only Mac versions of IE 5)

Thanks

Dude! You were reading my mind! I was getting a sore head trying to crack this one … and then I gave up (see http://ianandmanda.com/ – it looks centred, but bump font sizes up and it breaks, bah!). I owe you a Shiner Bock for the chance to let me copy this idea in the future :-)

Nicely pulled off, but I’m going to have to agree with Veracon here. Apart from the span being a bit of a nasty, it’s also completely unnecessary in your example. There are already two elements in play – the list item and the anchor… why the need for a third one?

And also, with the corner images. I see you’ve made the right image big enough to scale for multiple sizes, so why not combine the two edges into one image and re-use it on both elements?

Perhaps I’m being a little picky here though. :)

Oh, forgot this.

Tryst,

You can specify specific Windows versions through conditional comments (although I’d be tempted to use only “lte IE6” and specify hacks for IE 5.x inside of it to keep the number of external style-sheets to a minimum.

Mac IE doesn’t understand conditional comments, however there is another way to feed it a separate style-sheet:

/*\*//*/ @import “ie5mac.css”; /**/

Oh, nice :) thx

looks good

How can we fix the problem with IE? The tabs appear broken in IE6…