fixed CSS navigation

[hkysk8r86]

I'm trying to create my navigational div to where my content of my body will scroll behind it, and it will always be fixed at the top of the page; very similar to the footer application bar on facebook and myspace.
Can anyone point me to a tutorial or provide me with the information i would need to build something along these lines?

Thanks for all the help.

[bluewalrus]

#nav_bar {
position:fixed;
width:100%;
top:0px;
left:0px;
height:you decide;
}

<div id="nav_bar">
nav bar
</div>

Check the spellings of the attributes there did this by hand quickly. The width 100% is extend the full width of the page as the facebook does remove that if you only want it as wide as your content.

[hkysk8r86]

Sweet, appreciate the quick response Walrus; going to test it out and see how it works for my site.

[hkysk8r86]

Hey walrus, got a quick question: the implementation actually fubar'd my site quite a bit.
I'm using spry menus for my dropdowns, yet the DIV that contains them is now jumping all over the place, and for some reason, making the content 100%; also made the BG img that size, centering it in the header. Take a look at the implementation here and the original site here

Any suggestions on how to fix that? as you can see the BG image in the static header is supposed to line up with the BG in the content area, which is also fixed. the main issue is the jumping nav bar content when the page is re-sized.

***walrus, i've done proper edits to make it so that the images and the header are not moving; only issue now is the Body content and the BG of that area, and the Footer itself as well. when i take my page-container div. and fix it, give it the padding it needs to sit in the middle of the BG image, the borders form the body-cont div go all the way to the top of the page, overlapping the fixed navigational header. then when i fix that content and give it it's left padding to center it as well, it all jumps to the top, and makes it as if i'm going to have to add proper placement padding to ALL my divs. any suggestions/help would be much appreciative.***

[bluewalrus]

I don't see what your talking about. can you do a screen shot?

[hkysk8r86]

if you full screen the site; take a look at the BG; you'll notice that the blue circle BG continues onto the graphics used for the Header Navigation. once you un-maximize your browser, the background on the index2.html will jump around, as will the body content.