Skip to content

24 ways to impress your friends

Vote down?

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.