Fixed Navigation

[Err]

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.

[boen_robot]

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).

[scott100]

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

[Err]

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.

[scott100]

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]-->

[Err]

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!