Simple CSS tabs:
It started with the mac (let’s not get into that debate) but a lot of people are now used to using tabs and they are increasingly used to seperate content on websites.
My personal view is that they can actually clutter up a navigation system but some people like them so here you go…..
Start out by setting your tabs in an unordered list element (I use php but your file extensions can be html/asp/whatever):
<ul id=”tabs”>
<li><a href=”pagea.php”>Page A</a></li>
<li><a href=”pageb.php”>Page B</a></li>
<li><a href=”pagec.php”>Page C</a></li>
</ul>
Then, add these styles to your external .css file or inline with the page you are editing:#tabs { margin: 1em 0 0 0; }
#tab li { display: inline; width: 40px; }
#tab a { padding: 2px 8px 2px 8px; border: 1px solid #CCCCCC; margin-left: .5em; text-decoration: none; }
You can now highlight the tabs as appropriate:
<ul id=”tab”>
<li class=”selected”><a href=”pagea.php”>Page A</a></li>
<li><a href=”pageb.php”>Page B</a></li>
<li><a href=”page3.php”>Page C</a></li>
</ul>
Then, add this line to your style sheet, and again, adjust the color to your liking:
#tabs li.selected a { color: #fff; background-color: #CCCCCC; }
