Geek Out!

live.pirillo.com

More Information

How or what is it called to have a navigation bar type thing at the top of the page that scrolls down as you scroll so the navigation bar doesn't move. 

is it possible to do it in HTML and what is the code?

Tags: html, web

Views: 52

Reply to This

Replies to This Discussion

Here is a tutorial I found helpful.. http://www.jtricks.com/javascript/navigation/floating.html Hope this helps!
That's not HTML that's JavaScript. :)
Do something like:

<div style="width: 200px; position: fixed; top: 50; left: 50; height: 80px;">
Content
</div>

The position attribute is the main thing that makes it work. You can probably do this with any element that supports the position attribute. If you want the bar to be on the bottom you likely need to use JavaScript to resize it. You probably want to change the width to 100% and change the left attribute to 0 for a bar.
thank you. thats what i was looking for
position:fixed will get the job done, but it doesn't work in IE6, so keep that in mind if it matters. It's the same as position:absolute, except it moves with the screen.
There's different methods, you can use css3 too.
CSS2 does it fine
Im guessing its probably javascript.
Ok, first make sure you have a unique id on the navigation bar, then either in your CSS file or style element in your html, whichever you prefer, type:
#nav_bar
{
position: fixed;
top: 0%;
left:0%;
}

"fixed" just means it stays on screen where you placed it no matter where you scroll. like facebook chat
top & left are there to tell where its actually positioned. they are relative; so top:0; means that it'll be at the very very top of the page... if you had said top:10px; it would be 10 pixels down from the top of the window... but if your placing it somewhere use percentages (or "em"s) instead of "px" (e.g. top: 15%;)
you do not have to say top & left... you can use "top", "left", "bottom", and "right"... so if you wanted to get it at the bottom of the window all the time you'd just say "bottom:0;"
does that help?
i meant to say style attribute not style element sorry

RSS

© 2012   Created by Chris Pirillo.

Badges  |  Report an Issue  |  Terms of Service