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