27/04/2015

BrainJar.com: Tabs

Home | 1 | 2 | 3

Tabs
In this example, we'll look at using CSS to build a tabbed
display. One where the user can click on individual tabs to
view different content within the same space.

See the demo page for the

finished version of the code.

It will require a few lines of JavaScript to dynamically update the individual tabs but we'll
cover that code later. For now, we'll look at building the display.

Constructing the Display

The Tabs
The tabs consist of simple A tags using style classes designed to make them look like the
little tabs found on file folders.
Tab A

Tab B

Tab C

Tab D

The CSS and HTML code is shown below. Each tab is basically a small box with a border
on three sides.
div.tabArea {
font-size: 80%;
font-weight: bold;
}
a.tab {
background-color: #f0f0f0;
border: 1px solid #000000;
border-bottom-width: 0px;
padding: 2px 1em 2px 1em;
text-decoration: none;
}
a.tab, a.tab:visited {
color: #808080;
}
a.tab:hover {
background-color: #d0d0d0;
color: #606060;
}
...
<div class="tabArea">
<a class="tab">Tab A</a>
<a class="tab">Tab B</a>
<a class="tab">Tab C</a>
<a class="tab">Tab D</a>
</div>

The outer DIV element provides a container for the tabs, its "tabArea" class setting a base
font for them. The "tab" class creates a boxed look for the individual links while a :hover
pseudo-class is used to highlight the tabs on mouseover.
The Active Tab
To make one tab stand out, we define a new style class named "activeTab" which can then
be combined with the "tab" class on any link.
a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
www.brainjar.com/css/tabs/

1/3

27/04/2015

BrainJar.com: Tabs

background-color: #c0c0c0;
color: #000000;
}

Then the HTML code is updated to make one tab appear active by adding this class name to
the link tag.
You can assign multiple style classes to an element by separating the names with
spaces in its CLASS attribute.
<div class="tabArea">
<a class="tab">Tab A</a>
<a class="tab">Tab B</a>
<a class="tab activeTab">Tab C</a>
<a class="tab">Tab D</a>
</div>

This produces the effect shown below.

Tab A

Tab B

Tab C

Tab D

The Content Area

Next comes the area where the content for the tabs will be displayed. This will consist of an
IFRAME inside of a DIV tag. A style class is defined for the outer DIV to make it match the
active tab's style.
div.tabMain {
background-color: #c0c0c0;
border: 1px solid #000000;
padding: 1em;
}
...
<div class="tabMain">
<iframe src="sample.html" marginheight="8" marginwidth="8"
frameborder="0"></iframe>
</div>

Note the result below.

Level 2 Header
Paragraph paragraph paragraph paragraph
paragraph paragraph paragraph. Paragraph
paragraph paragraph paragraph paragraph
paragraph paragraph. Italic italic italic italic
italic italic italic italic italic. Paragraph
paragraph paragraph paragraph paragraph
As you can see, this isn't quite right. The problem is that the IFRAME doesn't fill the DIV
area. The solution would be to give the inline frame a style setting of width:100%.
Unfortunately, this does not work in Internet Explorer. It makes the inline frame just a little
too wide, apparently not accounting for the vertical scrollbar. The right-hand edge extends
too far, overlapping its containing DIV.
To fix this, another DIV tag is used as a wrapper for the IFRAME tag. Both this tag and the
inline frame are given a style width of 100%.
div.tabMain {
www.brainjar.com/css/tabs/

2/3

27/04/2015

BrainJar.com: Tabs

background-color: #c0c0c0;
border: 1px solid #000000;
padding: 1em;
}
div.tabIframeWrapper {
width: 100%;
}
iframe.tabContent {
background-color: #c0c0c0;
border: 1px solid #000000;
width: 100%;
}
...
<div class="tabMain">
<div class="tabIframeWrapper">
<iframe class="tabContent" src="sample.html"
marginheight="8" marginwidth="8" frameborder="0"></iframe>
</div>
</div>

The inline frame is also given a border, to give it a more defined look. The result can be seen
below.

Level 2 Header
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph. Italic
italic italic italic italic italic italic italic italic. Paragraph paragraph paragraph
paragraph paragraph paragraph paragraph. Paragraph paragraph paragraph
paragraph paragraph paragraph paragraph.
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
Much better. The next step is to put the tabs above this content area.
Next
BrainJar.com 1999-2015 by Mike Hall

www.brainjar.com/css/tabs/

Home | 1 | 2 | 3

3/3