CSS problem, creating tabs

Question

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/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.

I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?

I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!

This is the HTML I'm using for my tabs:

<div class="MainContent">Content</div>
<div class="TabsHolder">
    <div id="Tab1">
        <div style="width:200px">
            Content Tab 1
        </div>
    </div>
    <a class="Button1" href="#Tab1"></a>
    <div class="clearer"></div>
    <div id="Tab2">
        <div style="width:200px">
            Content Tab 2
        </div>
    </div>
    <a class="Button2" href="#Tab2"></a>
</div>

CSS:

.MainContent {
    float: left;
}

.TabsHolder 
{
    float: left;
}

.Button1
{
    float: left;
    margin: 100px 0px 20px 0px;
    background: url(images/Button1.png) no-repeat 0 0;
    height: 79px;
    width: 27px;
}

#Tab1
{
    width: 200px;
    margin: 80px 0px 20px 0px; 
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

.Button2
{
    float: left;
    margin: 0px 0px 20px 0px;
    background: url(images/Button2.png) no-repeat 0 0;
    height: 97px;
    width: 27px;
}

#Tab2
{
    width: 200px;
    margin: 0px 0px 20px 0px;
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

div.clearer 
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px; 
height: 0px;
width: 0px;
overflow: hidden;
}

You might want to take a look at http://www.barelyfitz.com/projects/tabber/ — halfdan, Dec 06 '09 at 11:28
From what I understand that works for tabs that are not vertical like in my case or can you use the tabs in the way I'm after too? — Martin, Dec 06 '09 at 13:34

score 2 · Answer 1 · answered Dec 06 '09 at 14:59

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: 10px 0 10px 0;
 width: 27px;
 clear: both;
}

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

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

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

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

.tabs {
 width: 200px;
 height: 200px;
 margin: 0 0 20px 0;
 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

<div class="MainContent">Content</div>
 <div class="tabsHolder">

  <a href="#tab1"><div class="buttons Button1">1</div>
   <div id="tab1" class="tabs">
    Content tab 1
   </div>
  </a>

  <a href="#tab2"><div class="buttons Button2">2</div>
   <div id="tab2" class="tabs">
    Content tab 2
   </div>
  </a>

  <a href="#tab3"><div class="buttons Button3">3</div>
   <div id="tab3" class="tabs">
    Content tab 3
   </div>
  </a>

 </div>
</div>

score 0 · Answer 2 · answered Dec 06 '09 at 11:51

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

<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab"><a href="#tab1">Tab 1</a></div>
<div class="tab"><a href="#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.

Thanks! But this will make the buttons/tabs to pop out when the page is open or am I wrong? Can you please tell me more about the min-height, what will that do for the divs? — Martin, Dec 06 '09 at 13:33

score 0 · Answer 3 · edited Dec 06 '09 at 12:49

0

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.

edited Dec 06 '09 at 12:49

Peter Mortensen

30,738
21
105
131

answered Dec 06 '09 at 12:31

Maxime ARNSTAMM

5,274
10
53
76

Thanks! But I know how to show/hide the divs with jQuery, I use the built-in tabs for other things, but I can't see how it would work for what I'm after, having the tabs vertically? The problem is that the open div pushes the other tabs down like in this picture: http://sv.tinypic.com/r/k2xxfb/6, and I'm not sure how to solve it.. – Martin Dec 06 '09 at 13:29
I posted an example that doesn't require any script :) – Mottie Dec 06 '09 at 15:06

CSS problem, creating tabs

3 Answers3

Linked