homepage Welcome to WebmasterWorld Guest from 54.197.19.35
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS Menu Idea / Interesting Question
sithicus




msg:1184769
 7:21 pm on Jan 27, 2003 (gmt 0)

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




msg:1184770
 10:32 am on Jan 29, 2003 (gmt 0)

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

Nick

sithicus




msg:1184771
 4:47 pm on Jan 29, 2003 (gmt 0)

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




msg:1184772
 7:29 pm on Jan 29, 2003 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved