One of the essentials of navigability in the pages we design is the inclusion of such features like navigation bars. Tabbed navigation is one way to achieve this. This article will give you some of the most important things that relate to tabbed navigation and the process by which we can create them.

Generally, tabbed navigation takes the form of horizontal protrusions but this is not the only form you can come up with when including navigation features in your very own websites.
In this simple discussion, we are going to try a few different things here with CSS, but we’ll be sticking with the following basic HTML structure:

<div id=”header”>

<h1>Tabs</h1>
<ul>
<li><a href=”#”>This</a></li>
<li id=”selected”><a href=”#”>That</a></li>
<li><a href=”#”>The Other</a></li>
<li><a href=”#”>Banana</a></li>
</ul>

<div id=”content”>
<p>Ispum schmipsum.</p>
</div>

Basically, our objective with this HTML is turn each list item into a tab, with the selected item appearing to be part of the corresponding content area.
First, we can rip out the list item markers and zero the margin and padding of the ul element:

#header ul {
list-style: none;
padding:0;
margin:0;
}

So, let’s get started–

Things You’ve Got to Know When Making Inline List-Items

The first thing we can do is make the list horizontal with the most straight-forward solution-by setting the display property of the li elements to inline:

#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}

This rule set also starts to make the items a little more tab-like by applying a border to the top, right, and left sides. The margin property here zeroes the margin on all sides except the right, because we’re going to space the tabs out a bit.
Now we can make things a little tidier by padding out the a elements a bit (adjusting this for the a element, rather than for the li elements, has the advantage of making the whole width of the tab clickable):

#header li a {
padding: 0 1em;
}

So far the tabs aren’t sitting on anything, so we should add a border to the content div:

#content {
border: 1px solid;
}

But there’s one essential thing missing. As it is, the tabs are just sitting across the top of the content box, all looking pretty much the same. What we need to do is make the “active” tab - the one that relates to the page we’re on, look as if it’s part of the content box, like a tab on the side of a dividing card.
Because vertical padding in inline boxes doesn’t actually push anything out around it, we can simply do this:

#header #selected {
padding-bottom: 1px;
background: white;
}

This pads the bottom of the li element with the “selected” id by one pixel, which pushes it over the top border of the content box. As the background color is white (assuming the content box’s background color is also white) it gives the illusion that the tab, and its border, are part of the content box.
To find out more about CSS tabbed navigation and see where this article was derived from please go to

http://www.htmldog.com/articles/tabs/.