homepage Welcome to WebmasterWorld Guest from 54.211.180.175
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Menu 100% height workaround
An image is invovled, but it works...
MWpro




msg:1183586
 9:32 pm on May 8, 2003 (gmt 0)

I know a few people, including myself, that have difficulty when they try to get their left menu to extend all the way down the page. While this can be solved by setting the background color of the page to what the color the menu should be and using a different color in the content div, this does not always work that well and if you are trying something like border-right: 1px solid #000; in the menu div. You get the color extending all the way but the border doesn't extend to the bottom of the page.

Here is my workaround: Make an image of the same width of the menu and a height of 1px. Put your menu color on it and add one black pixel on the right side of it. Then in your css do this:

body {
background-image: url(imagename.gif);
background-repeat: repeat-y;
background-color: #FFF; /*the color of the right side content*/
}

Set your menu div to the right width, and you're done. No need to worry about the menu or the content divs extending all the way down anymore.

If there is an easier way to do this (with the border on the right) please post it here... i've tested it with ie, netscape, and opera and it seems to have no problems.

 

drbrain




msg:1183587
 10:07 pm on May 8, 2003 (gmt 0)


#main {
margin-right: 120px;
border-right: 1px solid #DCF4F4;
}

#nav {
position: absolute;
top: 40px; /* I have a header */
right: 0px;
bottom: 100%;
width: 120px;
}

<body><div id="main">content</div><div id="nav">nifty-cool CSS :hover pop-out menus</div></body>

I still have some tweaks to do to get it looking decent in IE6 (but I don't really care about broken browsers).

[edit]Er yeah, add the border[/edit]

[edited by: drbrain at 10:25 pm (utc) on May 8, 2003]

SuzyUK




msg:1183588
 10:19 pm on May 8, 2003 (gmt 0)

MWPro...that sounds like a good enough way to do it..:)

if there is an easier way to do this (with the border on the right) please post it here... i've tested it with ie, netscape, and opera and it seems to have no problems.

Not sure if it's an easier way, but the other way you describe using page background colours..
Instead of trying to put the border on the menu, put it on the left side of your content div ;)

Suzy

grahamstewart




msg:1183589
 10:55 pm on May 8, 2003 (gmt 0)

In case you missed it, see this recent posting [webmasterworld.com] that describes an alternative solution that works on IE (and degrades okay on Opera and NN).

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