SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu displayed always at the bottom

    Hello, I am trying to create a site where the menu is always displayed at the bottom of the page, and is always displayed, no matter where the page is, in terms of scrolling.

    Normally I would create a lower frame, but I trying to stay clear of frames and do a CSS-only site. Is it possible with CSS to do this?

    How?

    I don't know the visitor's screen resolution, so i guess I'd have to use percentage, right?

    Is javascript involved to make the menu stay at the bottom of the page, no matter where the scrolling bar is, at all times? Or should I create a static page with the absolutely (?) positioned bottom menu and a resizable iframe above it in which to place contents?

    Thanks for any suggestions.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know that it is possible to to position an element in an absolute way (I know about absolute positiong)... What I am asking here is how to place it absolutely so that it STAYS at the bottom, independently from the scroller and how to determine where the bottom is without knowing the visitor's screen resolution.

    Unless I am missing something the answer is not as obvious.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh* Read the description of fixed positioning here.

    Code:
    position:fixed;
    bottom: 0;
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE6 (and less) doesn't understand fixed positioning so it does become a little compliacted and required a bit of hacking.

    If you are interested I have a solution here:

    http://www.pmob.co.uk/temp/fixedlayoutexample5.htm

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your solution!

    By the way, since your header says it is untested in Safari I tested it for you.
    I am on Mac OS X 10.4 and I looked at your page with: FireFox 1.5.0.1, Safari 2.0.3 (417.8), IE 5.2 (5.2.3 (5815.1)) and it works like a charm on all of them!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I am on Mac OS X 10.4 and I looked at your page with: FireFox 1.5.0.1, Safari 2.0.3 (417.8), IE 5.2 (5.2.3 (5815.1)) and it works like a charm on all of them!
    Thanks for 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
  •