Bruce Gust
asked on
How can I extend my background color below the fold?
Attached is a screen shot of what you see at http://hihatwebdesign.com/vbs/student_insert.php. The problem is obvious in that in previous iterations, my body content was a fixed height. This time, I'm allowing things to scroll and I'm having a tough time figuring out how to get the bottom portion of the screen with a background color of #81aade.
Every time I've tried to do a "background-color:#81aade; " somewhere, I wind up with a with a solid background and I just decided it was time to contact the ninjas. My stylesheet and html are attached.
Thanks!
Stylesheet (I've only included that which I though was relevant. You can view the whole thing at http://www.hihatwebdesign.com/vbs/stylesheet.css)...
...and here's my html:
What do you think?
Screen-Shot-2014-09-05-at-12.42.02-PM.pn
Every time I've tried to do a "background-color:#81aade;
Thanks!
Stylesheet (I've only included that which I though was relevant. You can view the whole thing at http://www.hihatwebdesign.com/vbs/stylesheet.css)...
#wrapper{margin:0;padding:0;min-height:100%;}
html, body{height:100%;margin:0;}
#header{width:956px;margin:0 auto;height:260px;position:relative;}
/*this is your header graphic */
#logo{width:956px;height:260px; overflow:hidden;}
#page{width:956px;margin:0 auto;border-top:none;padding-bottom:0px;}
/*this is not necessary. This is the gradient that starts just below the menu in your example. However, the content id that you see below gives you your "tray" */
#content{float:left;width:956px; padding-top:25px;padding-bottom:0px;min-height:450px; background-color:#ffffff;}
#footer{padding-top:525px;}
#footer p{text-align:center;font-size:9px;color:#FFF;margin:0;padding:0;background-color:transparent; font-family: Verdana, Microsoft Sans Serif;}
#footer a{font-family: Verdana, Microsoft Sans Serif; font-size: 9px; color: #ffffff;}
#bglayout{height:50%;width:100%;position:absolute;left:0px;top:0px;z-index:-1;}
/*this is your background gradient, starts at the top and goes all the way down*/
#bgtop{margin:0;min-height:1000px;height:100%;background:#252d9c url(images/background_sliver.jpg) repeat-x top;}
/*these are your clouds */
.left{position:relative;width:100%;background:url(images/right_cloud.jpg) no-repeat left top;height:1000px;float:left; z-index:100;}
.right{position:relative;width:100%;background:url(images/right_cloud.jpg) no-repeat right top;height:1000px; z-index:100;}
/*here's your regular stuff*/
...and here's my html:
<body onLoad="">
<!-- this first div sets the specs for the page in terms of dimensions, font style etc -->
<div id="wrapper" >
<!-- the header div sets the dimension for your header graphic -->
<div id="header"><BR><BR>
<!-- the logo div establishes the center graphic -->
<div id="logo">
<table id="Table_01" width="956" height="236" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" class="michelle">
<img src="images/header.jpg">
</tr>
<tr>
<td class="tray"></td>
</tr>
</table>
</div>
</div>
<div id="page">
<div id="content">
This is where all my page content goes...
</div>
<div id="footer">
<p>Thompsons Station Church | Preschool / Children's Ministry | PO Box 2018 | Thompsons Station, TN 37179 | (p) 615.791.8319 |<BR>(w) <A HREF="http://thompsonstationchurch.org" target="_blank">thompsonstationchurch.org</a> | (e) <A HREF="mailto:bruce@brucegust.com">bruce@brucegust.com</a> |</p><br><div style="text-align:center;"><img src="http://newhopeforyou.com/images/web_signature.png"></div>
</div>
</div>
</div>
</div>
<div id="bglayout" >
<div id="bgtop" >
<div class="left" >
<div class="right" >
</div>
</div>
</div>
</div>
</body>
</html>
What do you think?
Screen-Shot-2014-09-05-at-12.42.02-PM.pn
Got a link to the page?
ASKER
Confused, what is wrong with that? The background extends to the bottom
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Jeffrey! I went back and cleaned it up. Implemented your suggestions and I'm gold.
Thanks!
Thanks!