SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member lans's Avatar
    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I make footer flip to the bottom of the page ?

    Le'ts take standart 3 - column design, with header and footer.
    Left and right bars have fixed width. Content part has width 100%.

    How can I make footer flip to the bottom of the page with minimum amount of scripts and "sub-div" levels ?

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uhhh, what? Flip? Aren't footers by definition, at the bottom?

    Sorry, but you're gonna have to clarify before I understand. It sounds like this should be in the CSS forum, no?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  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)

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you postion it absolutely to top-left; then re-position it to bottom-left on-event.
    That might work for what you need.

    top:0px to bottom:0px of an element, either body or division
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This recent sitepoint article might also help you:
    Exploring the Limits of CSS Layout
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  6. #6
    SitePoint Member lans's Avatar
    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to make footer behave exactly as it behaves when site is implemented with tables structure.
    That means :
    - footer always flips to the bottom of the page, but
    when page height is reduced less then (for ex:600px) scrooler appears. (so you'll have to scroll down to see footer.)


    The acticle "Exploring the Limits of CSS Layout" doesn't answer on this question.

    For now I have to write scripts which find offset height of every column (because I donno which one will be the highest) and find the maximum to set position of the footer.

    Also I have to write script which will work with onresize event to move footer up\down.

    And it all looks not like optimal solution for such issue

  7. #7
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually the article is what you need, you'll just need to take some of the concepts from in and apply them to what you want to do.

    For example, instead of just making all the maxheights of the column equal, do this, but then check if the maxheight + headerheight + footerheight is greater than xClientHeight(). If it isn't, then you want to set the maxheight to the xClientHeight() - headerHeight - footerHeight (which will make the total height the height of the browser window).
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  8. #8
    SitePoint Member lans's Avatar
    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, but will footer flip at the bottom of the page if page is downloaded in small browser window and then this window be resized to fullscreen ?

  9. #9
    SitePoint Member
    Join Date
    Sep 2003
    Location
    melbourne
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it will work as I am doing the same thing as you. I started with the x.js scripts found from the cbe website as described by the sitepoint article, also you do need to read the next chapter of the article for the explanation of how to put the footer at the bottom of the page.

    Cheers Leon

    check out my go at doing this at
    leon.vicnet.net.au/vicxml/index.html


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
  •