Centered Tabs with CSS

32 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Rick Vugteveen

    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

  2. Maarten Docter

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

    Tabs are still popular and often used in websites, because they look the same as in the real world. So people automatically know how to use them.

    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?

  3. gunni

    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

  4. Mats Lindblad

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

  5. Alan Pyne

    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):

    #navigation ul li a span {

    ...

    padding: 5px 1em 4px 1em;

    border-bottom:1px solid #979797;

    }

    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):

    #navigation ul li.current a span {

    padding: 5px 1em;

    border-bottom: 0;

    }

    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:

    body#home #navigation ul li#nav_home { <em>somerules</em> }

    Good luck,

    Alan.

  6. Ethan

    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!

  7. Veracon

    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…

  8. Patrick Haney

    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.

  9. Ethan

    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!

  10. Bob Sawyer

    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? ;-))

  11. Gregor Martynus

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

  12. Scott Johnson

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

  13. MikeWS

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

  14. Tryst

    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

  15. Ian Lloyd

    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 :-)

  16. Egor

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

  17. Egor

    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”; /**/

Impress us

Be friendly / use Textile