1

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; }
Improve this question
2
  • You might want to take a look at barelyfitz.com/projects/tabber Commented Dec 6, 2009 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? Commented Dec 6, 2009 at 13:34

3 Answers 3

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

1 Comment

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?
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.

Improve this answer

2 Comments

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: sv.tinypic.com/r/k2xxfb/6, and I'm not sure how to solve it..
I posted an example that doesn't require any script :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.