SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Footer Problem

  1. #1
    SitePoint Zealot nflicanada's Avatar
    Join Date
    Feb 2001
    Location
    Sk, Canada
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Problem

    I'm currently having a problem trying to get the footer of a redesign I'm working on to rest at the bottom of the page no matter how large the height of the text stretches.

    The site is located here, and the CSS source can be viewed here.

    I've tried a few suggestions from other forums such as trying to insert the div in an include file and setting the bottom to 0px with both failing to work. If anyone can suggest a fix to this I'd greatly appreciate it as I'm hoping to have the site go live very shortly.

    Thanks.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Middle East
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please read this tutorial
    http://www.phphelp.com/article/3p1.php
    PHP smurf

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    My suggestion: wrap a <div> around your whole template, then position the other <div> that you're using as a footer absolutely within that first div.
    Code:
    <head>
    <style type="text/css">
    #frame{width:100%; height:100%}
    #footer{position:absolute; bottom:0px; height:50px;}
    </style>
    </head>
    <body>
    <div id="frame">
    ...more code, other divs...
    <div id="footer">
    Footer content here!!!!
    </div>
    <!--this bottom /div ends the frame-->
    </div>
    Of course if you're just trying to use include files to drop a footer file in then you're in the wrong forum! That would have to be accomplished with server-side includes.

    --Vinnie

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how to do what you want... (the above won't work in standards browsers, because it says "100% of the height of the window" not "100% of the height of the window unless the content is taller than the window in which case make it taller") but a work around could be this:

    - Put your footer back "in the flow" (relative positioning)
    - Put it at the end of your HTML (if its not already)
    - Give your content div a white background
    - Give your page an orange background like your header

    That way, when the content is short, the footer will be symetrical with the header, and when it is longer, so when you scroll, it will just be the black div at the very bottom.

    Not really what you wanted (and I'd like to knnow a solution myself) but a fix

    Douglas
    Hello World

  5. #5
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I posted a similar question here:
    http://www.sitepointforums.com/showt...threadid=82624

    Didn't ever get a response (posted in the general HTML forum). Haven't figured out a way to do it.
    $slider = 'n00b';

  6. #6
    SitePoint Zealot nflicanada's Avatar
    Join Date
    Feb 2001
    Location
    Sk, Canada
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if I wasn't really clear, I'm using asp and know how to use includes. The reference to includes comes from this post at Webmaster World where someone suggested that using an include would allow the footer to display at the bottom of the page.

    Unfortunatly when I tried it I ended up having the footer disappear instead of the way it is now showing at the top of the header.
    Last edited by nflicanada; Nov 5, 2002 at 21:19.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2000
    Location
    Northern California
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may have sloved this already,
    but what i have done is break it down into 3 areas.
    Position the header absolute, the top nav bar relative to it.
    Then make an id for the 'main' page positioned relative to that. Inside the main put your 3 column layout.
    Then position the footer to the main.

    Works for me.
    hth

    humanz
    "...Planet lurches to the right as ideologies engage/suddenly it's
    repression, moratorium on rights/what did they think the politics of
    panic would invite/the person on the street shrugs "security comes
    first"/but the trouble with normal is it always gets worse!" -- Bruce Cockburn

  8. #8
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    humanz: How do you get your main div to streach to fit the three columns? (Do you use floats? It would be nice to find an absolute method..)

    Douglas
    Hello World

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2000
    Location
    Northern California
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I use floats.
    This site is my personal site and therefore I haven't addressed N4 yet at all,and it is not ready for prime time as i am still working it. I believe I have a slight problem with IE5/Mac, but other than that, it has tested ok on all the other browsers.

    a bit of the css:
    #headnav {
    background-color: #669980;
    color: #66334c;
    position: absolute;
    width: 100%;
    height: 33px;
    top: 50px;
    left: 0px;
    margin: 0px;
    padding-top: 3px;
    border-bottom: #33664d 1px solid;
    border-top: #33664d 1px solid;
    }

    #main {
    position: relative;
    top: 30px;
    left: 0px;
    width: 98%;
    clear: right;
    margin: 0px;
    padding: 0px;
    }

    #content {
    position: relative;
    top: 20px;
    margin: 0px 195px 0px 10px;
    clear: none;
    background-color: #ade0c8;
    border: #33664d 1px solid;
    }

    #boxright {
    float: right;
    width: 180px;
    margin: 0px;
    position: relative;
    top: 20px;
    background-color: #ade0c8;
    color: #996676;
    border: #33664d 1px solid;
    }

    #footernav {
    position: relative;
    top: 20px;
    background-color: #669980;
    color: #996676;
    height: 33px;
    border-bottom: #33664d 1px solid;
    border-top: #33664d 1px solid;
    text-align: center;
    margin: 50px 0px 10px 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 7px;
    }
    This site only has a main content area and right column, but i started with the typical 3 col layout.

    But the footer staying put is what I was trying to address, I know floats have problems too, and i haven't had time to find the work around for that.

    humanz
    "...Planet lurches to the right as ideologies engage/suddenly it's
    repression, moratorium on rights/what did they think the politics of
    panic would invite/the person on the street shrugs "security comes
    first"/but the trouble with normal is it always gets worse!" -- Bruce Cockburn


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
  •