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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Location
    australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unresolved CSS Footer problem

    Hi there,

    I'm sort of an intermediate CSS user, but being mostly self taught from a million tutorials, I can do some stuff and then have NO idea about other things.

    I've set up a layout which is driving me nuts, because I can't get the footer to stretch, and I'm not sure why the width keeps blowing out..

    If anyone can help me, i will be deliriously grateful.

    Here's the code :
    html{
    height: 100%;
    }

    body {
    background-color: #020202;
    background-image: url(../images/logo_emboss.jpg);
    background-repeat: no-repeat;
    background-position: 28% 50%;
    height: 100%;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    line-height: 140%;
    }

    #topBanner {
    height: 85px;
    width: 100%;
    left: 0;
    top: 0;
    padding: 2%;
    background-color: #870000;
    border-bottom: 4px solid white;
    }

    #footer {
    clear: both;
    padding: 2%;
    width: 100%;
    height: 22%;
    /*this should go all the way to the bottom*/
    /* but every time i add height, it pushes everything out */
    bottom: 0;
    background-color: #870000;
    border-top: 4px solid white;
    }

    #bkg_graphic {
    position: absolute;
    }

    #container {
    clear: both;
    margin-right: 354px;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 2%;
    color: #FFFFFF;
    }

    #logo {
    height: 60px;
    margin-bottom: 2%;
    }

    #navZone {
    z-index: 5;
    float: left;
    width: 140px;
    margin-right: 2%;
    }

    #copy {
    z-index: 3;
    min-width: 140px;
    max-width: 800px;
    margin-left: 150px;
    padding-right: 2%;
    }

    #picArea {
    position: absolute;
    z-index: 4;
    display: block;
    top: 70px;
    right: 2%;
    width: 338px;
    height: 480px;

    border: 6px solid white;
    background-color: #999999;
    }

    h1 {
    font-size: 30px;
    padding: 0;
    margin: 0;
    line-height: 110%;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    do you have the html behind this you can show?

    do you have the html behind this you can show?

    dont know igf you can work this in but here's a simple example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>|</title>
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    body {
    font: .8em/1.4em tahoma, sans-serif;
    background: #99c;
    text-align: center;
    }
    #container {
    width: 600px;
    margin: 0 auto;
    text-align: left;
    background: #696;
    height: 80%;
    position: relative;
    }
    #footer {
    text-align: center;
    height: 20%;
    width: 600px;
    background: #d63;
    margin: 0 auto;
    }
    </style>		
    </head>
    <body>
    <div id="container">
    Content here
    </div>
    <div id="footer">I'm the footer</div>
    </body>
    Last edited by harbingerOTV; 12-08-2006 at 04:35 AM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Location
    australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    the HTML

    Thanks Harbinger - code is below:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Driving me nuts</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="topBanner">
    <div align="right"><img src="images/client_album_link.png" alt="to client albums" width="145" height="32"></div>
    </div>
    <div id="container">
    <div id="logo"><img src="images/logo_horz.png" alt="logo"></div>
    <div id="navZone">
    <ul>
    <li>NAVIGATION</li>
    <li>Will go HERE</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    </ul>
    </div>
    <div id="copy"><em><strong> Content to go here <br>
    </strong></em></div>
    </div>
    <div id="footer"><img src="images/tell_a_friend_link.png" alt="tell a friend" width="130" height="32"><br>
    <img src="images/search_site_link.png" alt="Search the site" width="155" height="32"> </div>
    <div id="picArea">
    <p>Picture goes here.</p>
    </div>
    </body>
    </html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Eskimojo,
    With a name like that I *had* to reply!
    But, I can't tell what the problem is, IE6, IE7 and FF2 all render your page the same.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Driving me nuts</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html{
    height: 100%;
    }
    
    body {
    background-color: #870000;
    background-image: url(../images/logo_emboss.jpg);
    background-repeat: no-repeat;
    background-position: 28% 50%;
    height: 100%;
    margin: 0;
    padding: 0;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    line-height: 140%;
    }
    
    #topBanner {
    height: 85px;
    padding: 10px;
    background-color: #870000;
    border-bottom: 4px solid white;
    }
    
    #footer {
    clear: both;
    padding:10px;
    
    height: 22%;
    /*this should go all the way to the bottom*/
    /* but every time i add height, it pushes everything out */
    bottom: 0;
    background-color: #870000;
    border-top: 4px solid white;
    }
    
    #bkg_graphic {
    position: absolute;
    }
    
    #container {
    clear: both;
    margin: 0;
    padding: 10px 370px 10px 10px;
    color: #FFFFFF;
    background: #020202;
    }
    
    #logo {
    height: 60px;
    margin-bottom: 2%;
    }
    
    #navZone {
    z-index: 5;
    float: left;
    width: 140px;
    margin-right: 2%;
    }
    
    
    #copy {
    z-index: 3;
    min-width: 140px;
    max-width: 800px;
    margin-left: 150px;
    }
    
    #picArea {
    position: absolute;
    z-index: 4;
    display: block;
    top: 70px;
    right: 20px;
    width: 338px;
    height: 480px;
    border: 6px solid white;
    background-color: #999999;
    }
    
    h1 {
    font-size: 30px;
    padding: 0;
    margin: 0;
    line-height: 110%;
    }
    </style>
    </head>
    <body>
    <div id="topBanner">
    <div align="right"><img src="images/client_album_link.png" alt="to client albums" width="145" height="32"></div>
    </div>
    <div id="container">
    <div id="logo"><img src="images/logo_horz.png" alt="logo">
    
    </div>
    <div id="navZone">
    <ul>
    <li>NAVIGATION</li>
    <li>Will go HERE</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    </ul>
    </div>
    <div id="copy"><em><strong> Content to go here sdfgdg df dd dssdd fdf fsfd fsdfd fdf sd dsd dsdf df dsd fd sdf sdfsd fd fdf sdfsd fdf sdf sdfsd fsd fsdf sdf sdfs fer ef ef ef sefs fsef sef sefsf4frw4rwr4rsfsef sef e sef sfs fs ee f<br>
    </strong></em></div>
    <div style="clear: left;"></div>
    </div>
    <div id="footer"><img src="images/tell_a_friend_link.png" alt="tell a friend" width="130" height="32"><br>
    <img src="images/search_site_link.png" alt="Search the site" width="155" height="32"> </div>
    <div id="picArea">
    <p>Picture goes here.</p>
    </div>
    </body>
    </html>
    I dont have th eimages but this should work. What I did was fake it. Giving the container the black background and the body the redbackground it"appears" that the footer is stretching down. I took off all th e% paddng as I wasn't sure if it was messing it up or not. I also took off width: 100% on your divs. They are block level so will always be 100% of whatever they are in unless told other wise. Leaving it on was forcing th eheader and footer to actuall ybreak the page horizontially. Maybe that's what you had the issue with too. I added a clearing just bvefre the end of t\your #container. Since the nav is floated, you need something to force the container to wrap around the floated leements.

    tested on FF 1.5, IE 6 and Opera 8. They all appear preety indentical.

    try that out and see how it goes.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Location
    australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wow!

    Thanks Harbinger, that worked a treat.

    The fact that you explain what it is you did is also very much appreciated.


  •  

    Posting Permissions

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