Building a Good Author Web Site:
Fixing the Navigation Bar with CSS
by David Dvorkin
In a couple of other sections, Navigation and Accomodating Browsers, I talk about using CSS to create special effects, and why it's not a good idea to do that on a personal Web site. Nonetheless, I thought I'd show one special effect that some people might want to use.
In Navigation, I discussed the problem with keeping your links in view. You can put them on the top or the bottom or the side of the page, but unless the page is small enough to fit entirely within the typical browser window, then as the user scrolls down, the links will slide out of view. On my site, I've compromised by having links both at the top and bottom of the page. That's still far from ideal: most of the time, both sets of links are out of sight, beyond the margins of the browser window. As you can see, this page is different.
Nonetheless, in case you want to use this method for your links (or for whatever you want to put at the top of the page and have always in view), here's how this works.
First, I set up the following CSS styles:
Then I enclosed the navigation bar in a div named navbar and all of the remaining content of the page in a second div named mainbody.
In other words, the structure of the page looks like this:
So use this if you want to. Frankly, I don't think you should.