Css Problem, Creating Tabs

I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following: I have three buttons/tabs like this http://sv.tinypic.com/r/21

Solution 1:

Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.

Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.

CSS

.MainContent {
 float: left;
 width: 400px;
 height: 400px;
 background: #444;
}

.buttons {
 float: left;
 margin: 10px010px0;
 width: 27px;
 clear: both;
}

.Button1 {
 background: #555url(images/Button1.png) no-repeat 00;
 height: 79px;
}

.Button2 {
 background: #555url(images/Button2.png) no-repeat 00;
 height: 97px;
}

.Button3 {
 background: #555url(images/Button3.png) no-repeat 00;
 height: 127px;
}

.tabsHolder {
 float: left;
 position: relative;
}

.tabs {
 width: 200px;
 height: 200px;
 margin: 0020px0;
 border: solid 1px#ACCD45;
 background: #444;
 overflow: hidden;
 padding: 20px;
 display: none;
 position: absolute;
 left: 0;
}

#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }

a:hover.tabs {display: block;}

HTML

<divclass="MainContent">Content</div><divclass="tabsHolder"><ahref="#tab1"><divclass="buttons Button1">1</div><divid="tab1"class="tabs">
    Content tab 1
   </div></a><ahref="#tab2"><divclass="buttons Button2">2</div><divid="tab2"class="tabs">
    Content tab 2
   </div></a><ahref="#tab3"><divclass="buttons Button3">3</div><divid="tab3"class="tabs">
    Content tab 3
   </div></a></div></div>

Solution 2:

You will need to define the pages (divs to hide/show) and tabs in two separate divs.

These will want to be floated next to each other, so you will have something like

<divclass="pages"><divclass="page"id="tab1">....</div><divclass="page"id="tab2">....</div></div><divclass="tabs"><divclass="tab"><ahref="#tab1">Tab 1</a></div><divclass="tab"><ahref="#tab2">Tab 2</a></div></div>

You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.

Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.

Solution 3:

Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).

If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).

Hope that'll help you.