SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question footer won't stay at the bottom

    Still a Newbie here .....

    I'm not sure what is wrong on this one. All the gallery pages show a scrollbar and I have a good inch or more below my footer. Can you see what is creating this?

    It is fine on my home page, about me, and guestbook. So I am assuming it is the gallery container that is doing this ... I just don't see a way to take out the space?

    I thought I had it so if my page did scroll that my footer would stay at the bottom and not ride up like it is doing on the gallery pages.

    As I get my guestbook page up and running this would be a problem as that will eventually have a long scroll .... and I need the footer to stay at the bottom.

    http://kathykuczek.com

    Thanks,
    Kuczek

  2. #2
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I realize part of my mistake now .... the container height was way too long. I reset the background to white to check it and sure enough it was the culprit.
    That has been scaled back from 700px to 555px.

    #container {position relative; width:620px; height:555px; background:none; border:1px solid none; margin:-50px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

    But I still need to keep the footer at the bottom for my guestbook page since that will indeed have a scrollbar.

    Thanks,

    Kuczek

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, before I begin, do you wnat a fixed footer or a sticky footer? I wasn't able to quite follow what you want from your description
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sticky Footer

    I just found this site - http://www.cssstickyfooter.com

    I'll try this out tomorrow. Hopefully it will make some sense after some sleep.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Trust me when I say that that sticky footer isn't the best

    This is
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ryan mentioned the only fully working sticky footer in the world today is the one Ryan linked to and documented in the FAQ here.

  7. #7
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I understand how you did it for your sticky footer example but I haven't been able to incorporate your markup into my existing home page and CSS.

    It just jumbles all my elements .....


    I guess I will start another test and try to see what I'm doing wrong ...

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    little lever
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would go with a fixed footer, sticky ones just get on every bodies nerves to be honest
    Manchester Free Ads - Free classifieds, only in manchester.
    Best web hosting

  9. #9
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, can you give me the markup for a fixed footer?

    I just want the footer to stay put where it belongs ....

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dddougal View Post
    i would go with a fixed footer, sticky ones just get on every bodies nerves to be honest
    They don't get on my nerves.

    Sticky footers do their job in the right place and have done since I created the original in 2003.

    Fixed footers don't work in IE6 so they are a lot more work if you want to support IE6.

    Both have their uses in the right place just like many other elements

    Quote Originally Posted by Kuczek
    It just jumbles all my elements .....
    The reason you can't have a normal footer on your page is because you have used absolute positioning for your content and columns. Absolute elements are removed from the flow and you can't place a footer under absolute columns. This also means you can't use a sticky footer because the page has no flow and nothing for the element to foot. (Think of absolute elements as elements that don't exist in respect to anything outside them on the page.)

    With your current structure it is impossible for you to have any footer apart from a fixed positioned footer (as mentioned in the post above). However that means that IE6 will have no support and the footer will overlap other content. Usually you would float things and limit the use of absolute positioning where structural elements are concerned.

    If you don't care about IE6 then wrap your footer up in a div called something like this:
    Code:
    #foot {
        position:fixed;
        bottom:0;
        left:0;width:100%;
    }
    The only other thing you will need to do is to apply some padding to the bottom of the left and right columns equal to the height of the footer so that you will be able to scroll the content into view and not have it hidden behind the footer.

    Hope that helps

  11. #11
    SitePoint Enthusiast Kuczek's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only other thing you will need to do is to apply some padding to the bottom of the left and right columns equal to the height of the footer so that you will be able to scroll the content into view and not have it hidden behind the footer.
    As far as padding goes ... I don't have any columns? (I think of columns as in tables) Do I just add padding beyond my last navigation bar on the left which would take care of all the gallery pages. Or just add padding to the last element on the page. I know it probably isn't the proper way but would it work?
    --------------------------------------------------------

    I just applied ....#foot .... to my home page.

    #foot {
    position:fixed;
    bottom:0;
    left:0;width:100%;
    }

    So now the footer will always show up on the bottom of the screen? I needed to scroll up to see the bottom of the image that was hidden under the footer. (I can make the footer more narrow so it hides less)


    Although the thought of this is scary ... would it be better to replace all the absolute positioning to floats?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kuczek View Post
    As far as padding goes ... I don't have any columns? (I think of columns as in tables) Do I just add padding beyond my last navigation bar on the left which would take care of all the gallery pages. Or just add padding to the last element on the page. I know it probably isn't the proper way but would it work?
    --------------------------------------------------------
    You would need to add it to whatever element is nearest the bottom on each page.

    Usually a page takes on a column structure and you stack content in each column. That would mean that you just add the padding bottom to the end of each column. However you page has no real structure as you are just placing things absolutely so you will just have to make sure the the last element on the page has enough padding so that it can scroll into view above the footer.

    e.g.

    Code:
    .galleryphoto{padding-bottom:115px}
    Although the thought of this is scary ... would it be better to replace all the absolute positioning to floats?
    I think you've gone too far with this design to change it now. As long as you can live with the way it's working then it may be better to stick with what you have.

    Usually though you would use floats and static positioning to lay out a page like that.


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
  •