CSS Menu Idea / Interesting Question

[sithicus]

I'm making a menu going across the top of the screen, 5 boxes each with a different choice, (Home, Office furniture, ect ect ect) Underneith those choices is a content area which will be where i place the content from each choice. I wanted to do a tab effect, so when someone clicks on one of the choices it removes the bottom boarder makes the two sie boarders longer and it makes it look like that tab is selected. I originally got this idea working by making the content are absolutly positioned but I had to change and make it relative so i could place the footer below the content. Now when i try and and make the boxes change it just moves the content are down because it is positioned relativly to the menu. I'm not sure how i can hold the content are in place so it does not shift down so the menu boxes will overlap it. If you want to see an example of what i'm trying to do in css check out bluenile and you should understand. If anybody has any idea's please hook me up.
Thanks
-Sith

[Nick_W]

Sorry Sith, can't think of anything usefull there, what if you only absolutely position the nav bar?

Nick

[sithicus]

messes up the positioning on the content region that comes after that, yes i can absolutly position that also but are you seeing the chain reaction here :) I havn't figured out anything else yet either.
-sith

[DCElliott]

Sometimes you can swap margins and padding to make a box appear to grow.

e.g.
.boxsmall {
display:block;
/* other box props. here */
border:2px solid black;
border-bottom:none;
margin-bottom:5px;
padding-bottom:0;
}

.boxbig {
display:block;
border:2px solid black;
border-bottom:none;
margin-bottom:0;
padding-bottom:5px; /* border gets 5px longer */
}

There are a number of other effects you can use with overlapping boxes by changing z-index on hover or onmouseover, etc.

Good luck.

DE