-->
Bookmark and Share

Tabs

See the demo page for the finished version of the code.

Positioning the Tabs and Content

First, we'll simply combine these two components by placing the HTML together.

<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>
<div class="tabMain">
  <div class="tabIframeWrapper">
    <iframe class="tabContent" src="sample.html"
     marginheight="8" marginwidth="8" frameborder="0"></iframe>
  </div>
</div>

This gives the result seen below.

The obvious problem is where the bottom of the tabs meet the top of the main DIV. For both IE and Netscape, the tabs actually overlap the content DIV a bit, covering the border.

The desired effect is for the top border of the main DIV to blend with the border of the active tab, so that they appear to be one, while the other tabs should appear to be behind it.

Layering the Elements

The solution is to make the tabs and the main DIV positioned elements. Then they can be properly overlapped and the z-index style property can be used to set one above or below the others.

To accomplish this, position:relative; is added to the style classes defined earlier. The top style property is set for the tabs causing them to overlap the main content DIV just right and the z-index property is set to establish the proper stacking order.

a.tab {
  background-color: #f0f0f0;
  border: 1px solid #000000;
  border-bottom-width: 0px;
  padding: 2px 1em 2px 1em;
  position: relative;
  text-decoration: none;
  top: -1px;
  z-index: 100;
}

a.tab.activeTab {
  z-index: 102;
}

div.tabMain {
  background-color: #c0c0c0;
  border: 1px solid #000000;
  padding: 1em;
  position: relative;
  z-index: 101;
}

The result can be seen below. Note how the background color of the active tab covers the top border of the content DIV while its side borders extend down just enough to touch the top of the DIV.

The active tab has a higher z-index so it appears above the main content DIV. That DIV in turn has a higher z-index than the normal tabs so they appear underneath it. The end result causes the border for the active tab and main DIV to appear as a continuous line or edge snaking around those elements while the inactive tabs sit behind them.

To make this a little more clear, here's the same display but with the background color of the active tab changed and it's bottom border set so you can see how it's positioned.

The top position of the "tabs" class may need to be adjusted, either up or down, if other style values such as the border width or padding are changed on the other styles.

Finishing the Display

The last step is to wrap the entire set up in another DIV tag.

<div>
  <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>
  <div class="tabMain">
    <div class="tabIframeWrapper">
      <iframe class="tabContent" src="sample.html"
       marginheight="8" marginwidth="8" frameborder="0"></iframe>
    </div>
  </div>
</div>

This allows you, for example, to set a fixed width on the display by simply adding a style for the outermost DIV. You could also float the entire display to one side or make it absolutely positioned.

One thing to watch out, however, is to leave enough room to fit all the tabs across so that they don't wrap.

Linking the Tabs

So far in these examples, the tabs have not be set to link to anything. That's easy to fix.

In order to make new content appear in the tab display, a name is given to the IFRAME, the links are given HREFs and the TARGET attribute is set for the frame.

<div>
  <div class="tabArea">
    <a class="tab" href="a.html" target="myIframe">Tab A</a>
    <a class="tab" href="b.html" target="myIframe">Tab B</a>
    <a class="tab" href="c.html" target="myIframe">Tab C</a>
    <a class="tab" href="d.html" target="myIframe">Tab D</a>
  </div>
  <div class="tabMain">
    <div class="tabIframeWrapper">
      <iframe class="tabContent" name="myIframe" src="c.html"
       marginheight="8" marginwidth="8" frameborder="0"></iframe>
    </div>
  </div>
</div>

Note that the "activeTab" class name has been removed. We'll set the active tab using some JavaScript which we'll cover in a bit. For now, try it out.

Now you can click on any tab and load the corresponding page in the content area. The only piece missing is the active tab. It should change when you click on the different tabs.