Jump to menu

Vote up?

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