Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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
    Code:
    <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
    Code:
    /***** 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
    Last edited by XiRoCCo; 11-03-2006 at 08:04 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You seemed to be going about this the wrong way using tables and absolute positioning. Try this
    Code:
    <!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=95af4ece6d2ec2820bbdd7a83b2c3618">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=95af4ece6d2ec2820bbdd7a83b2c3618">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.
    Attached Thumbnails Attached Thumbnails CSS - Page height=100% (having problems - help!)-contbg.jpg  
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    _Aerospace_Eng_ - thanks a bunch. the code appears to be working very nicely!!!

    see here -> newventureattorneys.com/_nva


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •