September 12th, 2007 / Ross Johnson / 42 Comments

CSS TABS – CSS Only “DOM TABS”

While working on my company site redesign, and a new project CSS Uber Clean Gallery I came across a cool CSS trick

There are several variations of “dom tabs” out there, and lets be honest they work pretty well. If a user has javascript everything works as planned, and if not you can read all of the content as all laid out vertically. However you can accomplish the same effect using just CSS, saving you the javascript download and dependency.

What do you need?

So the essentials of any dom tab script include different sections of content some which are hidden, one which is active, and a navigation bar that lets you switch between them.

We will keep it simple and start by building our basic structure in HTML (figure 1.1)

Figure 1

How do we make it work?

So now you have the basic structure of the site and content, but there is a problem; It is just layed out flat on the page, it needs some styling and it needs to hide and show content!

We will start with some basic styling. On comes the CSS:

As you can see I styled everything in “em” set a height, and gave the links some function. More on this later…

The nitty gritty

So now we have the structure, we have the styling, we have to get to the functionality. The magic here is a container div set to “overflow: hidden” that is set as the same height of the content blocks. This will cause only one active block of content to be shown at any given time. Then we will give each set of content a named anchor so that the links will jump to that content at any given time (figure 1.2)

Figure 2

we then add the xhtml:

and the css:

That is about it! Pros/cons

There you go! Here is an example to see it in action. Feel free to download it and repost it as you would like.

Now there are definite pros and cons to this method. The pros are you are keeping it simple, no need for javascript, it works in all browsers, and is accessible to anyone browsing with out CSS, screen readers, etc.

However there are some con’s. You have to have a set height for the content, meaning you need to know how much (or little) is going to be in each content block. You also have to use EM’s for sizing so that if someone has an elarged font none of the copy will get chopped off. Finally there is no way to highlight the active tab unless you use some sort of javascript.

Want to see a more practical use? Check out my company website. With javascript turned on you get fun prototype slides, however with it turned off you can still navigate through all of the tabs as if you had DOM tabs! Cool no?

42 thoughts CSS TABS – CSS Only “DOM TABS”

  1. Very good, as I never thought about this before, it is so simple!

  2. Wow, never thought of this either, great post!

  3. Another problem is that even though you specified the height of the content divs, if the elements inside it are greater than the height it will still overflow.

    To solve this, you can hide content if it overflows:


    .content {
    overflow: hidden;
    }

    Using overflow: auto will not work.. It produces nasty bugs.

  4. Another problem is that even though you specified the height of the content divs, if the elements inside it are greater than the height it will still overflow.

    To solve this, you can hide content if it overflows:


    .content {
    overflow: hidden;
    }

    Using overflow: auto will not work.. It will produce something not quite good.. ^_^

  5. There’s just one problem. It doesn’t work in Safari 2 for Mac. Love it or hate it, Safari is a legitimate web browser and people should not suffer just because they don’t use Firefox (old machines or short on RAM.)

    If a technique is going to be written about, then it needs to work across all major browsers currently in use, or we’re really not that much farther ahead.

    Trevor
  6. “it works in all browsers”

    Well, it does not work on Opera neither on Safari.

    The idea is clear and simple, but it sure does need a little more testing.

  7. I always prefer CSS tabs over tabs generated through javascript. Less chances of breaking. Easy to maintain and modify.

  8. I have been working along similar lines for presenting hidden content with CSS. Opera has problems with this idea while Firefox and even IE can process it. Here is one example:

    http://www.rumble.sy2.com/emptyhead/xcss/opera_hidden.html

    I have also done demos with :target and :hover to bring the content into view, using z-indexing to stack layers of content.

    No perfect solution yet…

  9. Excellent resource Craig, thanks for the link. It seams we are at a point where theoretically these sorts of techniques should work on all modern browsers, there are a just a few that are lagging behind.

    At some point we should get to a point where javascript and css can perform similar tasks, and the question of “presentation vs behavior” should dictate which we use. Seems we are not quite there yet?

    ross
  10. Pingback: napyfab:blog» Blog Archive » links for 2007-09-17

  11. Pingback: Skylog » Blog Archive » links for 2007-09-18

  12. Very nice. Clean and effective. I’d implemented something very similar to this on one of my past projects. I’d never put much thought in to it. I’m going to digg up my old code and mull it over.

  13. Pingback: RUDEWORKS

  14. Pingback: Nachlese September 2007 - Die Seiten des Monats | Nachlese

  15. Pingback: Best of September 2007 | Best of the Month

  16. Another drawback, is that it break the back button, as every tabs is an anchor so each click is saved in the history.

  17. Pingback: lost node » Blog Archive » Best of September 2007

  18. So easy and simple. Great!

  19. I’ve noticed that the browser “Back” and “Forward” buttons don’t work. The URL changes, but it doesn’t move through the content. I’m using Firefox, BTW…

    Bill
  20. Pingback: 行搏客 » 2007年9月最佳

  21. I noticed that once you click on the tabs the entire page shifts up or down to depending where you place the tabs in your design to focus on the container.

    Any workarounds for that??

    sanny
  22. people have been doing this on vampirefreaks.com for ages.
    its bad.
    badbadbad.
    it doesnt work in Opera >.

    poss
  23. Very nice–clean and effective. I’d implemented something very similar to this on one of my past projects. I’d never put much thought in to it. I’m going to digg up my old code and mull it over.

  24. Doesn’t work in Opera 9.5, just released yesterday?

  25. Pingback: Website Development. | 7Wins.eu

  26. I always prefer CSS tabs over tabs generated through javascript. Less chances of breaking. Easy to maintain and modify.

  27. Very nice. Clean and effective. I’d implemented something very similar to this on one of my past projects. I’d never put much thought in to it. I’m going to digg up my old code and mull it over.

  28. Pingback: A Quick Introduction | StylizedWeb.com

  29. Pingback: A Quick Introduction | Castup

  30. hy thank you for that great tutorial I love the way owerflow is hidden its like u have tabs as layers so when u click on one link the first layer come on top.. 🙂 now I can use tabed links for my small site with no extra html linked files but I have one problem!!! if class .content and id #container is 40em or higher then 40em when I click on one of 4 links like c1 c2 c3 c4 browser scroll down to the begining of content class so it just scroll a little bit down where you can’t see navbar and that kind of bothers me is it possible somehow to avoid that ?

    Thomas
  31. Nice approach!
    I’ve seen a X-Browser working only CSS tab version on http://geibi.de/wp
    The one shown there is for WordPress, but you can simply extract the html from the readme an combine it with the .htc and css.

    Thank you for that interesting tutorial!

    peter
  32. i can’t set a header image..in my css
    this is my code for header..

    image is named header.jpg

    what should i do?

    thank in advance.

  33. Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  34. Pingback: CSS Tabs - dom/javascript tab effect with just css : infoeduindia multimedia collection

  35. Very nice. I’m working with a learning management system that enables me to upload a slightly customized front page.

    This is the 5th tab-nav example I’ve worked with – and the only one that WORKED! All others had some kind of javascript that conflicted with the LMS’ built-in JS functions. I particularly would have liked the slider tab or coda slider (uses the jquery library), but Ross, this code keeps it simple. I’ve yet to see how well it’ll work with my layouts, but I’m happy to see working tabs. Thanks, Ross.

    EB
  36. Glad that it worked for your EB. It seems sometimes the simplest way of going about something is also the best. I am a huge fan of sticking with CSS when you can and only involving javascript when it is actually needed.

    Ross Johnson
  37. Two other people requested already a solution against the scrolling of the content if you have a bigger site. It would be great to find a fix for that. I spent already 3 hours with this problem but can’t come to a solution. has anyone an idea?

    Harald Engels
  38. I was looking for this and was trying to do it, without actually succeeding at all. The solution was with overflow:hidden and fixing a width to the container and to the content. Your example is very simple and effective. Great work ! And thank you.

    Regards

  39. that it worked for your EB. It seems sometimes the simplest way of going about something is also the best. I am a huge fan of sticking with CSS when you can and only involving javascript when it is actually needed.

  40. Great read. I’m doing something of this nature in one of my projects so this was very helpful. Thanks!

  41. Looking for a script like this I found yours, and then this:

    http://fire-studios.com/blog/css-only-dom-tabs

    Dude is ripping your work off, unless you’re the same person… then I apologize. Otherwise? I’d look into it.

    Jeff

Comments are closed.