...
PDA

CSS - Page height=100% (having problems - help!)

XiRoCCo
11-03-2006, 06:52 PM
the situation:
i'm working on a new site design that requires that the page length (vertical - top to bottom) stretch to 100% of the browser's height. after working on my CSS, i have the page stretching to 100% of the height of each users screen.

link to the site (in development):
www.newventureattorneys.com/_nva

the problem:
the footer which consists of the bottom left corner piece, and the words "professionalism trust & integrity", when viewed in a vertically small browser window will overlap the text above it. try shrinking the height of your browser while viewing this page and you'll see what i mean.

my desire:
i would like the site to be 100% in height, and also for the bottom graphics to extend downward, creating a vertical scroll bar as text and content on any given page pushes down into the footer area.

the question:
what changes can i make that will allow the footer to show at the bottom of the page UNLESS there is more verticle text/content on the page - whereby i would rather just have the footer disappear off the bottom of the page (downward) and have a vertical scroll bar appear?

the code:
following is my current code from my main index.html and style.css. techically speaking, this site is being developed within a CMS (phpWebSite) and the index is actually a different file stored within a theme folder - but as far as design goes, works the same.

index.html<body bgcolor="#000000" leftmargin="0" topmargin="0">
<table width="775" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="775" valign="top" bgcolor="#FFFFFF" id="mainTable">
<div id="header"><img src="{THEME_DIRECTORY}images/theme/nva-theme01.jpg" width="586" height="145" /></div>
<div id="content">{TOP} {BODY} {BOTTOM}</div>
<div id="footer"><img src="{THEME_DIRECTORY}images/theme/nva-theme08.jpg" alt="" width="354" height="125" border="0" />
<div id="copyright">{COPYRIGHT}</div></td>
<td width="189" valign="top" id="rightTable"><div id="rightColumn">{LEFT_COL_TOP} {LEFT_COL_MID} {LEFT_COL_BOTTOM} {RIGHT_COL_TOP} {RIGHT_COL_MID} {RIGHT_COL_BOTTOM}</div>
<img src="{THEME_DIRECTORY}images/theme/spacer.gif" width="189" height="1" /></td>
</tr>
</table>
</body>Please consider any content from the index.html shown in brackets "{ }" as valid html content. phpWebSite will replace these values with database content when the site is in production.

style.css - these are just the pertinant sections for this post
/***** HEADER *****/
#header {
height:145px;
padding:0px;
margin:0px;
position: absolute;
top: 0px;
}

/***** CONTENT *****/
#content {
width:470px;
padding:160px 42px 0px 74px;
}

/***** FOOTER *****/
#footer {
height:125px;
padding:0px;
margin-left:0px;
position: absolute;
bottom: 0px;
}thanks in advance any help you can give...
--kevin
_Aerospace_Eng_
11-03-2006, 07:52 PM
You seemed to be going about this the wrong way using tables and absolute positioning. Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>phpWebSite</title>
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}

html,body {
border:0;
font-family:Arial, Verdana, Sans-serif;
font-size:12px;
color:#333;
height:100%;
line-height:1.3em;
background:#000 url(themes/Default/images/theme/nva-theme03.jpg) 775px 0 no-repeat;
margin:0;
padding:0;
}

#container {
width:775px;
min-height:100%;
background:#FFF url(themes/Default/images/theme/contbg.jpg) repeat-y;
position:relative;
}

* html #container {
height:100%;
}

#main {
width:586px;
float:left;
}

#header {
background:url(themes/Default/images/theme/nva-theme01.jpg);
text-indent:-9999px;
height:145px;
}

#content {
padding:0 42px 0 74px;
}

#content a,#content a:link,#content a:visited {
color:#006;
text-decoration:underline;
}

#content a:hover {
color:#009;
}

#content b {
color:#006;
}

#content h1 {
color:#006;
font-family:Verdana, Arial, Helvetica;
font-size:12px;
font-weight:700;
text-align:right;
border-bottom:#CCC 1px solid;
margin:0 0 15px;
padding:10px 0 0;
}

#content h2 {
font-size:13px;
font-weight:700;
text-align:left;
color:#600;
border-bottom:1px #999 dotted;
margin:22px 0 13px;
}

#content h3 {
font-family:Verdana, Arial, Helvetica;
font-size:12px;
font-weight:700;
font-variant:normal;
text-align:right;
color:#FFF;
border-bottom:#FFF 1px solid;
margin:0 0 6px;
}

#content h4 {
font-family:Verdana, Arial, Helvetica;
font-size:13px;
font-weight:700;
text-align:left;
color:#2E3C56;
background-image:url(images/H2line.gif);
background-repeat:no-repeat;
margin:0 0 7px;
}

#rightColumn {
width:174px;
float:left;
color:#FFF;
text-align:center;
padding:170px 5px 5px 10px;
}

#rightColumn a,#rightColumn a:link,#rightColumn a:visited {
color:#FFF;
text-decoration:underline;
}

#rightColumn a:hover {
color:#FF0;
}

#rightColumn b {
color:#FFF;
}

#rightColumn h1 {
font-size:12px;
font-weight:700;
text-align:right;
margin:0 0 15px;
padding:0;
}

#rightColumn h2 {
font-size:13px;
font-weight:700;
text-align:left;
margin:22px 0 13px;
}

#rightColumn h3 {
font-size:12px;
font-weight:700;
font-variant:normal;
text-align:right;
border-bottom:#FFF 1px solid;
margin:0 0 6px;
}

#rightColumn h4 {
font-size:13px;
font-weight:700;
text-align:left;
margin:0 0 7px;
}

#rightColumn form {
text-align:left;
}

#clearfoot {
height:125px;
overflow:hidden;
clear:both;
position:relative;
}

#footer {
position:absolute;
left:0;
bottom:0;
width:583px;
height:40px;
background:url(themes/Default/images/theme/nva-theme08.jpg) no-repeat;
font-size:9px;
text-align:right;
padding-top:85px;
padding-right:3px;
}

#content ul,#content ol,#rightColumn ul,#rightColumn ol {
margin:4px 0 0 25px;
padding:0;
}

#content li,#rightColumn li {
list-style-image:url(images/blt_onWhite.gif);
}
</style>
<style type="text/css" media="print">
html, body, #container, #main {
background:none;
width:auto;
}

#header, #rightside, #clearfoot, #footer {
display:none;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="header">NEW VENTURE ATTORNEYS</div>
<div id="content">
<h1>Web Page Demo</h1>
<h3>Web Page Demo Section</h3>
phpWebSite provides a complete web site content management system. Web-based administration allows for easy maintenance of interactive, community-driven web sites.<br />
<br />
phpWebSite's growing number of modules allow for easy site customization without the need for unwanted or unused features. Client output from phpWebSite is valid XHTML 1.0 and meets the W3C's Web Accessibility Initiative requirements.<br />
<br />
Founded and hosted by the Web Technology Group at Appalachian State University, phpWebSite is developed by the phpWebSite Development Team, a network of developers from around the world. phpWebSite is free, open source software and is licensed under the GNU LGPL.<br />
<br />
Thank you! - The phpWebSite Development Team<br />
<br />
Theme packs are now available through the phpWebSite Community Project and can be found <a href="http://sourceforge.net/project/showfiles.php?group_id=81360&amp;package_id=83571">here</a>.<br />
<br />
<br />
</div>
</div>
<div id="rightColumn">
<h1>Menu</h1>
<a href="./index.php?&amp;MMN_position=1:1">Home</a>
<h1>Log In</h1>
<form action="index.php" method="post" name="user_login_box">
<div>
<input type="hidden" name="module" value="users" />
<input type="hidden" name="norm_user_op" value="login" />
Username<br />
<input type="text" id="block_username" name="block_username" value="" size="15" maxlength="255" />
<br />
Password<br />
<input type="password" name="password" size="15" maxlength="255" />
<br />
Remember Me
<input class="checkbox" type="checkbox" name="rememberme" value="1" />
<br />
<input type="submit" name="login_button" value="Log In" />
<br />
</div>
<hr />
<div align="center"> <span class="smalltext"><a href="index.php?norm_user_op=signup&amp;account_signup=1&amp;module=users&amp;b12730879f6ccf9276e5055876b9564a=95af4ec e6d2ec2820bbdd7a83b2c3618">New Account Signup</a></span> <br />
<span class="smalltext"><a href="index.php?module=users&amp;norm_user_op=signup&amp;forgot_password=1&amp;b12730879f6ccf9276e5055876b9564a=95af4e ce6d2ec2820bbdd7a83b2c3618">Forgot Your Password?</a></span> </div>
</form>
</div>
<div id="clearfoot"> </div>
<div id="footer"> Copyright &copy; 2006 New Venture Attorneys<br />
Site Development by iTech Developers </div>
</div>
</body>
</html>

I had to make a new background image for the container. I also put in a print stylesheet.
XiRoCCo
11-03-2006, 08:03 PM
wow - thanks for such a detailed reply!!! i will be working on this site again next week and will implement your code and report back. again - THANK YOU!!!

--kevin
XiRoCCo
11-07-2006, 11:59 PM
_Aerospace_Eng_ - thanks a bunch. the code appears to be working very nicely!!!

see here -> newventureattorneys.com/_nva

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum