tabbed navigation

I’ve been working on implementing tabbed navigation. Using the sliding doors method gave really elegant results, but I had problems with the placement fo the tabs. First I put it underneath the header, but somehow their position ended up being absolute, and didn’t move when the window is resized. Placing it inside the header beneath the title description looked nice in firefox but I ran into problems with stupid IE. For a brief moment I thought about ignoring the IE anomaly but since I’ll have to look at the website at work, I know I’d be unhappy if I didn’t improve on the design.

The simplest solution, as of today, was: 1) not to use fancy rounded edge tabs and 2) place the tabs immediately above the content container rather than near the header. While I was at it, I put a light blue dotted border around the content container.

tab-blue

The html for the tabs is easy, all the items in an unordered list. I had to do a different list for each section, to distinguish between the current tab and the others.

<div id=”tabs”>
<ul>
<li><a href=”http://invisiblecompany.com/”><span>home</span></a></li>
<li><a href=”http://invisiblecompany.com/hidden%20doors”><span>words</span></a></li>
<li><a href=”http://invisiblecompany.com/gallery/simpleviewer”><span>pictures</span></a></li>
<li><a href=”http://invisiblecompany.com/gullsway”><span>places</span></a></li>
<li><a href=”http://invisiblecompany.com/taste”><span>taste</span></a></li>
<li id=”current”><a href=”http://invisiblecompany.com/shiny%20parts” id=”active”><span>technical</span></a></li>
<li><a href=”http://invisiblecompany.com/about.php”><span>about</span></a></li>
</ul&gt
</div>

The css turned out to be straight-forward too, though I spent a lot of time fiddling about and reading all sorts of different approaches. First, take out the list style and define the method of display as block. This puts the text in a nice block so I can add colours and borders.

#tabs {
float: left;
width: 100%;
margin-left: 5px;
}

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

Then define the li elements — colours, text-decoration.

#tabs ul li {
display: block;
float: left;
padding: 0;
}

#tabs ul li a {
background: #85d6ff;
color: #fff;
text-decoration: none;
display: block;
margin-left: 1px;
margin-right: 1px;
padding: 0 20px 0px 20px;
}

Finally, define different behaviours for hover and for the current tab.

#tabs ul li a:hover {
color: #006699;
}

#tabs a:active {
background: #008fd6;
color: #fff;
}

#tabs li#current a {
background: #008fd6;
color: #fff;
}