Html and Css slicing, Psd2Html, Markup2u

Found on the internet a very simple way to create tabs (to successive blocks of content). Usually such things are done with javascript, or are still experimenting with CSS3. This example is complete without it.

Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ul class="tabs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
    <ul>
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>
        <li id="four">4</li>
        <li id="five">5</li>
    </ul>
</div>

The structure is simple, I think there is nothing to comment.

Css

1
2
3
4
5
6
7
8
9

.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content li {
    width:960px;
    height:300px;
}

The links in the navigation refer to relevant content block id. These blocks are equal to the width and height of the block tabs-content. By default, when clicked, the browser looks for in a content block with id specified in the link. And because can be displayed on any one block, it makes the actual show.

Works in Firefox, Opera (for older versions need to add a little css), Safari, IE6 +.

It would seem so simple and obvious, but to be honest, I somehow did not expect such behavior of browsers.