/    Sign up×
Community /Pin to ProfileBookmark

background color

Copy linkTweet thisAlerts:
May 17.2004

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;

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

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.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@gazieMay 17.2004 — height:auto;

using '100%' will give it the full height of the viewing window.
Copy linkTweet thisAlerts:
@john_hauthorMay 17.2004 — 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

[CODE]#backdrop_l {position:absolute;z-index: -1; width:140px;height: auto;left:0px; top:0px; background-color:#000033;}[/CODE]
Copy linkTweet thisAlerts:
@gazieMay 17.2004 — 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?
Copy linkTweet thisAlerts:
@john_hauthorMay 17.2004 — 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?

<i>
</i>#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;}
Copy linkTweet thisAlerts:
@JishMay 17.2004 — Try setting a background for the [color=blue]body[/color] and getting rid of your [color=blue]backdrop_l[/color]. This is the same technique used in [URL=http://www.alistapart.com/]A list Apart's[/URL] [URL=http://www.alistapart.com/articles/fauxcolumns/]Faux Columns[/URL]

<i>
</i>body {
background: url( backdrop_l.gif ) repeat-y; }


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

Success!

Help @john_h spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...