DHTML Tabs

Modifying The CSS

The Selectors

    /*------------------- LEGEND -----------------------+
    |                                                   |
    | .content   -- the content div, also the className |
    |               for tabSystem divs                  |
    | .tabs      -- the div that holds all tabs         |
    | .tab       -- an inactive tab                     |
    | .tabActive -- an active tab                       |
    | .tabHover  -- an inactive tab onMouseOver         |
    |___________________________________________________*/            
		

To modify the background color:

.content {
    background-color: #c0c0c0;
}

You can change fonts, colors, borders, and more. For more information on CSS, see the w3c css specification.

Positioning

There are several ways to make the tabs overlap the content divs area.

• absolute positioning
• relative positioning
• a mix of absolute and relative positioning
• using margins for positioning

Absolute positioning works most consistently for all browsers.

Tables

If you are using absolute positioning inside a table cell (td element), use posiiton: relative for the td.

td {
    position: relative;
}

That way, an absolutely positioned element inside the td will then use the td for its nearest positioned ancestor. In IE, this happens without position: relative on the td.

Next in this tutorial: Using keyboard events to trigger tabs