Post Archive
› May 28, 2005
Inline Mini Tabs
One of the most underestimated part of CSS are inline boxes. Probably most of you know the CSS specifications on the subject, but if you haven't read it, I suggest to look at the article on inline formatting model, by Eric Meyer, one of the most in-depth articles on CSS I've ever read for its level of detail.
Personally I tend first to use display:inline to make horizontal navlists for two main
reasons:
- Since you don't use floated elements, you don't have to contain them
- you can get centered, right or left aligned menus just by using the
text-alignproperty
With the helpful concepts explained on Eric Meyer's article, a while ago I turned to inline one of the nicest horizontal menus in its simplicity: the famous Mini Tabs by Dan Cederholm. I thought I'd share here the results.
Here is the example I prepared. Let's see the markup: a simple unordered list.
<ul id="minitabs">
<li><a href="#">home</a></li>
<li><a id="current" href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
Now, let's see the whole CSS, with key declarations emphasized:
body{padding-top: 60px;background: #FFF;
font: 76% Arial,sans-serif}
ul#minitabs{list-style: none;margin: 0;padding: 7px 0;
border-bottom: 1px solid #CCC;font-weight: bold;
text-align: center;white-space: nowrap}
ul#minitabs li{display: inline;margin: 0 2px}
ul#minitabs a{text-decoration: none;padding: 0 0 3px;
border-bottom: 4px solid #FFF;color: #999}
ul#minitabs a#current{border-color: #F60;color: #06F}
ul#minitabs a:hover{border-color: #F60;color: #666}
For the list I've setted a vertical padding of 7 pixels. However, the important
is just the bottom padding for the technique to work:
top one is in effect used to get thing spatially balanced.
The text-align property is used to get a centered menu,
while the white-space:nowrap is used to prevent the menu to break on
multiple lines.
The list-items are simply setted to display:inline and furtherly spaced
with horizontal margins. For the links, I
added a bottom padding of 3px, and a white bottom border 4 pixel tick. Note that the sum of these two values is 7 pixels, exactly the bottom padding of the list. This in order to display the bottom border, that is rendered outside the links.
Finally, for the current link of the menu and the :hover state I simply changed
border color.
That's it. You can view again the live example. Compatibility of the technique should be extended to all modern browsers. On IE5 no bottom border is displayed, while I've tested it with success in IE 5.5, IE6, Firefox and Opera 7.6. Enjoy!
Comments
1. May 28, 2005 09:16 PM
2. May 28, 2005 11:04 PM
Oliver Posted…
I've been using inline tabs for all horizontal menus, thanks to Dan, too. It's compatible with almost anything and also very flexible in terms of margins/padding/background.
3. May 29, 2005 01:05 PM
Bart Posted…
Way cool! Pardon my CSS newbie ignorance, but what's the advantage of inline vs the float used in the previous minitabs? any disatvantage? Thanks!
4. May 29, 2005 02:31 PM
Alessandro Posted…
Hi Bart. As I said, the main advantages are that you don't have to contain floats since you don't use them, and you can also get a centered menu. Besides, the implementation is a little bit easier once you've understand how use padding and borders on inline elements.
The main disavantage is that this version doesn't work in IE5 (no border is displayed) while Dan Cederholm's original version does. Consider also that only 3% of internet users use this browser (source w3Schools.com) and anyway it degrades well (you loose only bottom border in the end).
5. May 29, 2005 02:49 PM
6. May 29, 2005 07:30 PM
spike Posted…
We've been using that on our website for a little while. great work!
7. May 30, 2005 10:19 AM
Jesse Andrews Posted…
Love the design of both your site and the example. Great use of color and minimalism
I'm going to have to read Eric Meyer's article
8. May 31, 2005 09:07 AM
Mike Stenhouse Posted…
Use the Holly Hack if you want the borders to show up in IE5...
* html ul#minitabs a{ height: 1%; margin: 0 0 -10px 0; ma\rgin: 0; }
9. May 31, 2005 12:36 PM
Elaine Nelson Posted…
I've used the inline version a few times too, and the benefit that I've seen is that you don't need to declare a width on the li elements, which makes it easier to scale, work with tabs of various sizes, etc.
10. May 31, 2005 12:37 PM
Alessandro Posted…
Hi Mike, thanks a lot for the suggestion. In my opinion a bottom border missing on the 3% of users is better than a hack. I've always been reticent about hacks (the only one I've used sometimes is the box model hack) and I tend to consider them as "the last beach". In this case, I'd prefer to mantain the css logical and hack-free. Anyway, nice tip. Best regards.
11. June 2, 2005 10:35 AM
Vitaly Friedman Posted…
Allesandro, thanks for a great work. Submitted in Web-Dev-Bookmarks.
12. June 4, 2005 06:00 AM
Andreas Posted…
I've been thinking about using inline for my next site. I guess I have a good reason to do it now, and even the code to start with. Thanks a lot!
13. June 9, 2005 12:24 PM
Craig Posted…
Seems like you should be able to get the border to show in IE5, no hacks, just by adding "height: 1em" to the A element.
14. June 22, 2005 11:23 AM
'ju:femaiz Posted…
Two similar articles covering things I've already looked at... Nice... Used this method about 15months back on my site... Nice to see someone else thinks it's a worthwhile method and is telling others about it...
15. May 17, 2006 08:02 AM
Posted…
Please put your comments in paragraph tags, no auto-line-breaking anymore.
16. May 18, 2006 01:29 AM
Posted…
Please put your comments in paragraph tags, no auto-line-breaking anymore.
17. June 11, 2006 05:35 PM
Ryan Fait Posted…
Ah, it's nice, but unfortunately Safari 2 doesn't handle white-space: nowrap; I haven't tested in other browsers, but if they all use a 4 pixel white space margin, setting margin-left: -4px; will take care of it. The other option is to simply remove the white space between lines, but I'm not a fan of muddling the document structure.
LinkTiger Posted…
I absolutely love everything about these mini-tabs! Both their minimalistic appearance (very Google-esque) and the miniscule code involved make this a very attractive navigation option. I might just have to work these in to one of my next designs.