View Full Version : How do I make a DIV block move?

01-07-2004, 10:20 PM
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.


01-08-2004, 03:03 AM
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 (http://devnull.tagsoup.com/fixed/) that has a tutorial for a CSS hack that works in IE6-only. IE 5.x is outta luck.

01-08-2004, 05:11 PM
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.

01-08-2004, 06:19 PM
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 (http://devnull.tagsoup.com/fixed/) to emulate fixed positioning in IE6.

01-08-2004, 08:01 PM
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.

01-08-2004, 08:03 PM
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 (http://www.pixy.cz/blogg/clanky/cssunderscorehack/):
position: fixed;
_position: absolute;

01-08-2004, 09:41 PM
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!

01-08-2004, 10:11 PM
Or better yet, use the "* html" hack, which is valid, instead of the invalid underscore hack.

01-08-2004, 10:16 PM
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:
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.

01-08-2004, 11:26 PM
MS IE is a lost cause! LOL


* html div#navbuttons { position: abosulute; }

worked just fine elsewhere, including Opera.

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

this might explain: http://www.vandervossen.net/2003/07/ie_unsupported