Google/StackExchange Navigation Bar

I'm looking to make a navigation bar like that of Google (their new one) or StackExchange, where it's immediately at the top. It doesn't have to be persistent, and all I need on it are links, but how can I make it so that it stays immediately at the top like that? More importantly, how can I make it so that it always fills up the entire width of t开发者_StackOverflow社区he screen (rather than having a defined width)?

Currently I have a simple inline list, but the width is defined.

I'd be willing to use new HTML5 techniques as well as CSS to any extent to do so.

You need to do something like this

<div id="topBar">
    This is content
</div>

css

body{margin:0; padding:0;}
#topBar{width:100%; text-align:center; background:#ccc; height:25px;}

http://jsfiddle.net/jasongennaro/Xpxhy/

So, you

1. place the div right after the opening body tag.
2. make sure there are no margins or padding on the body.
3. set the width to 100%
4. align the text in the center.

Use position:fixed in the toolbar style to keep it in a fixed position relative to the browser window (and not the browser window's elements).

#toolbar {
    position:fixed;
    margin: auto;
}

Do something like:

<nav>
  <ul>
    <li>Link
  </ul>
</nav>

And define width:100% on the nav and a width of whatever you want on the ul. Set margin:0 auto; on the ul. To get it to stay at the top give nav position:absolute; and top:0 properties.

All you need is a div with no width value set, outside of any width-restricted containers. It will automatically fill the entire width of the page.

There is a nice navigation bar in the Twitter Bootstrap you could take a look at. It is on Github at http://twitter.github.com/bootstrap/#navigation