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.

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.

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

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

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.

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

Much better. The next step is to put the tabs above this content area.

Next