Err Posted May 20, 2006 Share Posted May 20, 2006 Hi.I'm looking for a bit of help here. I've been to sites that have a fixed navigation system like: http://www.w3.org/Style/ and http://www.penname.co.uk/ but I can't if my life depended on it make one myself! I can't figure it out. It's all CSS based, no frames and no javascript. It just scrolls with you when you scroll down. How can I have a navigation system like that, but one that sits horizontialy at the top of the page? I do have a general idea how it works, but I'm going wrong somewhere and I know it. Some guidance would be nice. <style type="text/css">body { margin-top: 50px; padding-top: 50px; border: 1px solid red; overflow: auto;}#menu { padding: 5px; margin-top: -90px; border: 1px solid red; display: block;}</style> <div id="menu"> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> <a href="#">Menu 4</a></div> Here's a web page for quick refrence (html & css in same page):http://oneuse.awardspace.com/fixed_navigation.htmlI ask for your help please. Link to comment Share on other sites More sharing options...
boen_robot Posted May 20, 2006 Share Posted May 20, 2006 If I use IE6 there's no fixed menu, so the answer must be position: fixed; on the element you want fixed (which in this case is #menu) + the coordinates themselves(top, bottom, left, right). Link to comment Share on other sites More sharing options...
scott100 Posted May 20, 2006 Share Posted May 20, 2006 Yeah they probably use position fixed but IE doesn't support this. So you have to use a workaround, explained at this page.http://www.cssplay.co.uk/layouts/fixed.html Link to comment Share on other sites More sharing options...
Err Posted May 20, 2006 Author Share Posted May 20, 2006 Thanks! I figured it out. That last linked helped out a lot. You can look at the result on same link in my first post.Thanks for all your input. Link to comment Share on other sites More sharing options...
scott100 Posted May 20, 2006 Share Posted May 20, 2006 Rah, i just checked your site, looks good apart from in IE where you have two scrollbars, you need to add this to the head section for it to disapear in IE <!--[if lte IE 6]><style type="text/css">html {overflow-x:auto; overflow-y:hidden;}</style><![endif]--> Link to comment Share on other sites More sharing options...
Err Posted May 21, 2006 Author Share Posted May 21, 2006 Rah, i just checked your site, looks good apart from in IE where you have two scrollbars, you need to add this to the head section for it to disapear in IE<!--[if lte IE 6]><style type="text/css">html {overflow-x:auto; overflow-y:hidden;}</style><![endif]--> <{POST_SNAPBACK}> Thanks! I think it looks good also. :)Well, acutally that's just a test site, I use it a lot just as an example. I have a real one that I use. But yeah, I knew about that code, I just didn't get around to getting it in there until I finished adding it into my real one. However, I did add it in test site now. Looks good on your end now? I just don't know how to get rid of that margin on the right side of the scroll bar, it's annoying as heck.edit: nevermind! lol, the padding was causing that problem. it's a lot better now. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now