Pure CSS Tabs
For some reason CSS Tabs are a big topic of late. I recently spent some time with the issue when trying to redesign my old weblog. I never used the design, but came up with a nice solution (in my mind). I’m using the design on my home page at the moment (though its days are numbered). The end solution has a few quirks, but looks good in most modern browsers.
To begin we have all the previous attempts I studied:
- Mark Newhouse
This didn’t quite work for me, but helped get me started
- Mark Pilgrim
The tabs don’t line up very well in Epiphany on Linux, but I liked how he used CSS to decorate the “front” tab.
- Dean Burge
This was the look I wanted to get
In addition, the following sites also tackle the problem:
- Meg Hourihan
The example looks good, but uses
<h2>for her tabs instead of a list. - Richard Rutter
Has a cool 3D effect, but the CSS is pretty complex as a result. Also has secondary navigation associated with each tab.
- Dan Cederholm
The example looks really nice, but uses images.
- Joshua Kaufman
Using Epiphany on Linux, the tabs don’t align with the baseline, spoiling the effect.
Webgraphics has most of these (and a few more) linked in one convenient place.
I’m rather fond of my own solution. The HTML and CSS are both quite simple. The HTML uses an unordered list inside a <div>.
<div id="tabs"> <ul> <li id="t_home"><a href="http://foo.com/">Home</a></li> <li id="t_journal"><a href="http://foo.com/journal/">Journal</a></li> <li id="t_about"><a href="http://foo.com/about/">About</a></li> </ul> </div>
The CSS is a little more complicated, mostly to show the correct “front” tab depending on the current page. I use an id selector on the <body> element to identify the current page.
<body id="home">
Next I display the list items inline, and remove all padding and margins.
#tabs { font-size: x-small; border-bottom: 1px solid black; padding-top: 20px; } #tabs ul { margin: 0; padding: 0; } #tabs ul li { list-style: none; display: inline; } To get the tab effect, I give each anchor a small border and pad the sides out a bit (optional).
#tabs ul li a, #tabs ul li a:link, #tabs ul li a:visited { border: 1px solid #000; text-decoration: none; padding: 0 10px; margin: 0; } Finally, I give the current tab a white border on the bottom so it appears to be in front of the others. I use the id of the <body> element to determine which tab gets to in front. I borrowed this idea from Mark Pilgrim’s version.
#home #tabs li#t_home a, #journal #tabs li#t_journal a, #bookmarks #tabs li#t_bookmarks a, #photos #tabs li#t_photos a, #about #tabs li#t_about a { font-weight: bold; border-bottom: 1px solid #fff; background: #fff; } The result is pretty nice:
(above) The result in Internet Explorer 6 for Windows
(above) The result in Mozilla Firebird for Windows
(above) The result in Opera 7 for Windows
I’ve put up a simple example.