Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2003
    Location
    Central California
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I make a DIV block move?

    As I scroll down on a page?

    I have a DIV block with JavaScript rollover for navigation. I wrapped the rollover images & script in DIV block so I could position it exactly where I want it. I didn't want to use a TABLE to accomplish the same thing. Now, I would like to make the navigation buttons to move as I scroll down on the main page. I foresee more content being added to this page and having the menu do that trick would be perfect.

    Thanks.
    /hector/rooted/@/a/puter

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I understand you correctly, you want the menu to stay fixed at the top of the screen no matter how far you scroll down the page, correct? Well applying position:fixed; works for Mozilla (1.2 or 1.3+, I don't remember when support started). I have no idea if Opera 7 supports it though. You'll have to try that out for yourself.

    IE doesn't support it at all (suprise, suprise). However, I did come across this link that has a tutorial for a CSS hack that works in IE6-only. IE 5.x is outta luck.

  • #3
    New Coder
    Join Date
    Dec 2003
    Location
    Central California
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply.

    I think the wording of my question got kind of mixed up.

    I want the menu to follow along the scrolling of the page.

    Sort of like floating, and showing on the page even if I'm at the bottom of the page.

    I did a search for 'floating menu' and I think the trick can only be accomplished by using JavaScript in combination with CSS.

    Am I right to assume JavaScript is needed?

    Thanks again.
    /hector/rooted/@/a/puter

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think Skyzyx is right: what you want is the div to remain fixed in a certain place in the screen, no matter how much the user scrolls? set position: fixed (which IE will ignore, as it doesn't support it), and use this hack to emulate fixed positioning in IE6.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    New Coder
    Join Date
    Dec 2003
    Location
    Central California
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep, IE totally ignores the fixed attribute.

    I'm going to try the hack next.

    Also, I've noticed that fixed in IE will ignore the 'left' and 'top' properties that I've given to my <DIV>'s.

    Thanks for your help guys.
    /hector/rooted/@/a/puter

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It'll ignore left and top, because it doesn't recognise position: fixed, and so as far as it's concerned, the element isn't positioned. Try the underscore hack:
    Code:
    position: fixed;
    _position: absolute;
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #7
    New Coder
    Join Date
    Dec 2003
    Location
    Central California
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is too cool.

    Amazingly enough, the page worked the way I want it to in Opera, Mozilla and Netscape. IE on the other hand, totally ignored the underscore hack. LOL Wow!
    /hector/rooted/@/a/puter

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Or better yet, use the "* html" hack, which is valid, instead of the invalid underscore hack.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by liorean
    Or better yet, use the "* html" hack, which is valid, instead of the invalid underscore hack.
    That would work also. It goes something like this:
    Code:
    div#example { position: fixed } /*good browser rule */
    * html div#example { position: absolute } /*ie rule*/
    The second rule reads 'Any div with the id of 'example' which is a descandant of an html element, which is a descendant of anything'. <html> isn't a descendant of anything, so this rule never normally applies, but IE lets it's through.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #10
    New Coder
    Join Date
    Dec 2003
    Location
    Central California
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    MS IE is a lost cause! LOL

    The

    Code:
    * html div#navbuttons { position: abosulute; }
    worked just fine elsewhere, including Opera.

    Man! What is up MS _ _ _ about complying with CSS?

    p.s.
    this might explain: http://www.vandervossen.net/2003/07/ie_unsupported
    Last edited by hrp2171; 01-08-2004 at 11:01 PM.
    /hector/rooted/@/a/puter


  •  

    Posting Permissions

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