Web Prose

Few month ago I needed to make tabs on the webpage. I googled and found standard solutions that I didn’t like. The problem was solved using two independent blocks: the first one contains headers, the second one – texts.

I didn’t like that structure, mainly because there was no semantic link between the header and the content. I googled more and more)) and found a GREAT solution using <DL> (definition list). The author of these <DL> html tabs is Sergey Chikuyonok – one of best web designers in Russia and in the World. I found many great HTML/CSS trick and solutions that I use in my works.

So here is HTML tabs with <dl>

And here is consideration of this solution:

Let’s make an attribute float:left for all elements:

This will happen if we set the float:right attribute for one of the elements:

As you can see, the elements following are placed on the same line. But we need the tab content to be stretched to the whole width, so we set width:100% for <DD>:

The <DD> element has broken the document flow. So what we have: if an element is snapped to the container’s right edge, then changing the container’s width will shift the element’s left edge (i.e., increases from right to left). That’s way we need to suppress the influence of the element’s left edge, and that can be done by setting margin-left:-100%:

Now we just need to move the <DD> down. We’ll do this using margin-top attribute:

That’s all! To hide all elements by default, we set the display:none attribute for them, while setting display: block for the selected element.

For the tab toggling we’ll use simple jQuery script:

$(function(){
	$('dl.tabs dt').click(function(){
		$(this).siblings().removeClass('selected').end()
        .next('dd').andSelf().addClass('selected');
	});
});

Enjoy!