Advanced Search

Results 1 to 9 of 9

Thread: cant keep a good footer down...

  1. #1
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Unhappy cant keep a good footer down...

    Hello every, grateful if some one could me with this,

    im trying to keep my footer down, its set to abolsute. However when i test it in 1024x768 it begins to over lap my <body>

    is there another way to keep it down?

    code attached

    <!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" xml:lang="en" lang="en">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="styles_home.css" />
    </head>
    <body>
    <div id="container">

    <div id="header"></div>
    <!--Navigation-->
    <div id="body">
    <div class="links mainmenu">
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact Us</a></li>
    <li><a href="">Search</a></li>
    </ul>
    </div>
    <div id="welcome">
    <div id="welcometext"></div>
    </div>
    <div id="leftholdertop">
    <div id="leftholdertoptext"></div>
    </div>
    <div id="rightholdertop">
    <div id="rightholdertoptext"></div>
    </div>
    <div id="leftholderbottom">
    <div id="leftholderbottomtext"></div>
    </div>
    <div id="rightholderbottom">
    <div id="rightholderbottomtext"></div>
    </div>

    </div>

    <div id="footer"></div>
    </div>

    </body>
    </html>




    @charset "utf-8";
    /* CSS Document */

    html, body {height:100%}
    body {

    height: 100%;
    background:#339900;
    color:#000000;
    text-align:center;
    margin:0;
    font-size: 100%;


    }

    #container {

    width:750px;
    min-height:100%;
    position:relative;
    text-align:left;
    margin: 0 auto 95 auto;

    }


    #header {

    width:750px; height:150px; background:url('images/header.jpg') no-repeat top; float:left; position:relative;

    }

    #body {

    padding-bottom:95px;


    }

    .links {

    float:left;
    width:750px;
    text-align:left;
    background:url('/images/homepagedivider.jpg') repeat ;

    }



    .mainmenu {

    width:750px;
    float:left;
    padding:0px;
    display:inline;

    }

    .mainmenu ul {


    float:left;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-transform:uppercase;
    display:inline;

    }

    .mainmenu ul li {


    float:left;
    margin:0px;
    padding:0px;
    display:inline;
    list-style:none;

    }

    .mainmenu ul a
    {

    float:left;
    display:block;
    padding:2px 8px 2px 4px;
    font-weight:bold;
    font-size:85%;
    text-decoration:none;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    background:url('/images/homepagedivider.jpg') no-repeat 0px 0px;


    }



    #welcome {

    width: 750px;
    height: 260px;
    float: right;
    background:url('images/welcomebg.jpg') no-repeat;

    }

    #welcometext {

    padding: 1px 360px 0px 115px;
    font-weight:bold;
    font-size:85%;
    text-decoration:none;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;

    }


    #leftholdertop {

    width: 350px;
    height: 150px;
    float: left;
    background:url('images/left_holder_top.jpg') no-repeat;
    margin: 0 0 0 0;

    }

    #leftholdertoptext {

    padding: 0px 0px 0px 0px;

    }


    #rightholdertop {

    width: 400px;
    height: 150px;
    float: right;
    background:url('images/right_holder_top.jpg') no-repeat;
    margin: 0 0 0 0;


    }


    #rightholdertoptext {

    padding: 0px 0px 0px 0px;

    }




    #leftholderbottom {

    width: 350px;
    height: 150px;
    float: left;
    background:url('images/left_holder_bottom.jpg') no-repeat;
    margin: 0 0 0 0;


    }

    #leftholderbottomtext {

    padding: 0px 0px 0px 0px;

    }

    #rightholderbottom {

    width: 400px;
    height: 150px;
    float: right;
    background:url('images/right_holder_bottom.jpg') no-repeat;
    margin: 0 0 0 0;


    }


    #rightholderbottomtext {

    padding: 0px 0px 0px 0px;

    }



    #footer {
    position: absolute;
    bottom:0;
    margin: 0 0 0 0;
    width: 750px;
    height:95px;
    background:url('images/footer.jpg') bottom center no-repeat;

    }

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Have you tried the sticky footer?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. The Following User Says Thank You to Snookerman For This Useful Post:

    SirTom909 (02-19-2009)

  4. #3
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    yeah i tried it, however when viewing the page in 1024x768 the footer still sits ontop of the content :S

  5. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Try this:
    Code:
    #container {
    width: 750px;
    min-height: 100%;
    position: relative;
    text-align: left;
    margin: 0 auto 95px;
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  6. #5
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    thank you SnookerMan, sadly the footer still creeps up the page....

    this is driving me mad....

  7. #6
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    update:

    I went through Ryans tutorial, and the footer sits at the top of the page behind the header.

    what attribute should I give the footer on top of what ive already set?

    Code:
        width: 750px;
        background:url('images/footer.jpg') bottom center no-repeat;
    note that if i set it to absolute it will sit on top of the content and if i set

    HTML Code:
    bottom:0;
    it wont display the footer in IE :S

  8. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Do you have a page where you test this? It would be easier if you posted a link so we can take a look.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #8
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    unfortunately its running on an intranet..

    ill keep trying...

  10. #9
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

Tags for this Thread

Bookmarks

Posting Permissions

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