Once I needed to make tabs on the webpage. As it’s a rather routine problem, I didn’t want to reinvent the wheel, so I just googled a little bit to see how people solve it. All the solutions I found looked rather run of the mill, something like that:
As you can see, two independent lists are used, one containing the headers, and the other holding the content.
Actually, I don’t like such arrangement, mainly because there is no semantic link between the header and the content. Though I’m not addicted to absolutely valid and semantic HTML just for the sake of respect of web geeks, this lack of a link was a drawback. Firstly, the data will be taken from the backend in two steps (first the headers, then the content), not in one; that’s not much, but it adds to the volume of code and cannot be good for performance. Secondly, the client-side script for toggling tabs will be more voluminous and complicated, especially if there are several blocks with tabs on the webpage.
So I decided to try and fix those shortcomings, hopefully not overtaxing my brain. :) First of all, when selecting the element structure, I thought about the
Surely, you can just copy/paste the code, but I suggest that you first consider how this solution works.
Let’s assume we have a set of elements for which the float: left attribute is set:
What happens if we set the float: right attribute for one of the elements?
As you can see, The result is good enough — the elements following
As expected, the element has broken the document flow. Let’s think about it: 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.,
Now we only need to move the element down, which can be accomplished using the margin-top attribute:
That’s all! To hide all
The solution is not ultraflexible, as we are using the exact size of a tab, but can be handy for many similar tasks.
This post has been written by the team here at Splashnology.com
Subscribe to our email newsletter for useful tips and freebies.