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

Thread: footer

  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts

    footer

    i am having some trouble, i have found tutorials on it but it doesnt seem to be working.

    what i am trying to do is set the footer to the bottom of the window and as i add information to the site and it gets closer to the footer the footer move to the bottom of the page. here is what i have so far, let me know if someone can help. thank u in advanced

    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>
    
    	<title>Costawurks Freelance | Home</title>
    	
    	<meta name="description" content="freelance graphic design" />
    	<meta name="keywords" content="freelance, graphicdesign, logo, web, 
    
    multimedia" />
    	<meta name="author" content="Costa" />
    	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" 
    
    />
    
    	<link rel="stylesheet" type="text/css" href="general.css" />
    
    </head>
    
    <body>
    
    <div id="header"> </div> <!-- End of header -->
    
    <div id="container">
    
    <div class="clearfooter"> </div>
    
    </div> <!-- End of container -->
    
    <div id="footer">
    
    </div> <!-- End of footer -->
    
    </body>
    </html>
    Code:
    * { padding: 0;
    margin: 0; }
    
    html { height: 100%; }
    
    body { background: url(pattern.png);
    background-repeat: repeat;
    background-color: #7f9896;
    width: 100%;
    height: 100%; } /* add css3 gradient */
    
    #container { min-height: 100%
    margin-bottom: -69px;
    height: 100%;
    width: 1024px;
    position: relative; }
    
    #header { background: url(header.png);
    background-repeat: repeat-x;
    width: 100%;
    height: 100px; }
    
    .clearfooter { height: 69px;
    clear: both; }
    
    #footer { background: url(footer.png);
    background-repeat: repeat-x;
    height: 69px;
    width: 100%;
    position: relative; }
    what the problem im having is first its pushing the footer not to the bottom of the window but abit farther down, and also when i add enough data that it gets near the footer, the footer doesnt move and it juts goes over the footer and continues down.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello 1234m,
    I have never tried the method you're using. Just curious, are you following someones example?
    Try this one instead - http://nopeople.com/CSS/full-height-layout/index.html
    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

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you for the response and sorry for the late one, i tried that now, and it fixed one problem where the footer was slightly below the actual window making the viewer have to scroll to find it, but when i add content the footer just stays there. any ideas?

    thank you in advance

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Would need to see the current version of your code to know what's wrong. A link is always best.
    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


  •  

    Posting Permissions

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