background color

[john_h]

greetings,

I am trying to make a menu navigation on the left side of the screen. I have choosen to use absolute positioning for the menu content, and a background color for the color behind the menu.

here is the code i am using for the background area behind the menu;

#backdrop_l {position:absolute;z-index: -1; width:140px;height:100%;left:0px; top:0px; background-color:#000033}


the problem is, when I make a page that extends below the default window height, the 100% doesnt continue with the scrolling. it is cut-off at the point where the original window height was.

is there a better code than the 100% besides actual pixel height? I dont want to specify a pixel height because most of my pages dont have scrolling due to small page height and I dont want them to show if they arent being used. if I set the height to say 800px then regardless if my page needs vertical scrolling, it has it.

[gazie]

height:auto;

using '100%' will give it the full height of the viewing window.

[john_h]

100% does not work once the page begins to scroll. the area I defined as a color background gets cut off at the height of a regular window, I then tried 'auto' and it erased my backdrop all together

#backdrop_l {position:absolute;z-index: -1; width:140px;height: auto;left:0px; top:0px; background-color:#000033;}

[gazie]

Oh... thats because #backdrop_l is empty and your just using it to display a background...? sorry.

Erm why are you putting the background in a seporate object behind your text just to display a background image... why dont you just have your background displayed in the same object as your text?

[john_h]

to answer your question as to why.... umm, probably because I made the page on different days and just added to it.

I guess I can try to put it in one object, which of course, is a better idea.

here is the style sheet.... maybe there is a better way to do the whole thing?


#Header {margin: 50px 0px 0px 0px;
padding:17px 0px 0px 20px;
border-style:solid;
border-color:black;
border-width:1px 0px;
line-height:31px;
background-color:#eee;}

#Menu {position:absolute;
top:84px;
left:23px;
width:130px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;}

#Menu2 {position:absolute;
top:180px;
left:23px;
width:130px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;}

#Menu3 {position:absolute;
top:260px;
left:23px;
width:130px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;}

#Menu4 {position:absolute;
top:340px;
left:23px;
width:130px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;}

#Menu5 {position:absolute;
top:405px;
left:23px;
width:130px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;}

#Content {margin:20px 0px 0px 170px; padding:5px;}

#backdrop_l {position:absolute;z-index: -1; width:140px;height: 100%;left:0px; top:0px; background-color:#000033;}

#backdrop_t {position:absolute;z-index:-1;height:110px;width:100%;top:0px; left:0px; right:0px;background-color:#000033;}

[Jish]

Try setting a background for the body and getting rid of your backdrop_l. This is the same technique used in A list Apart's (http://www.alistapart.com/) Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)


body {
background: url( backdrop_l.gif ) repeat-y; }


Here is a sample page I posted using your css (http://lubaway.com/WD/backgroundColor/). I just omitted your backdrop_l and added a background image to the body tag.