on a mac using firefox - there is no float - they both look the same - except "Some Title" is slightly scrunched under the green header.

You were formatting online books during the reign of the Emperor Domitian (81-96 C.E.)? Impressive. I hadn't thought the Internet routers back then had the bandwidth to handle whole books, not to mention that SGML hadn't yet been ported to personal computers.

The print header/footer paradigm need not extend to a web page. Since you're using CSS anyway, why not try a fixed-to-the-viewport sidebar with navigation options and location information in it?

Safari has taken a different approach: two vertical bars, one on the left and one on the right sides of the page. On the right-side-vertical-bar, there is a right-arrow (next) per paragraph. On the left-side-vertical-bar, there is a left-arrow (previous) per paragraph. To see an example, you need to visit (registration is required) My Bookshelf section of Safari (http://safari.oreilly.com) and select a chapter of a book. I don't know if the Safari's approach is the best, but it seems to be practical.

@david, how odd, it works on Firefox on the Mac for me.

@john, I was working on SGML formatting of books in the fall/winter of 1994, I'm pretty sure, but maybe that was only for print. The first online versions were definitely CD-based, not meant for distribution over the web.

do it the css way:

.header { position: fixed; top: 0px; left: 0px; height: whatever; width: 100%; }

.content { padding-top: same_whatever; }

@encryptio, ahhh, thank you, that's much nicer.

I thought it should be possible with just CSS, but neither my own attempts nor web searching were successful. I'm still not sure I like it, but at least it doesn't flicker anymore.

Sweet.

The problem with the fixed header is that it interferes with the normal paging behavior in most browsers. When you hit space, most browsers will scroll up one screenful, but they have no way of knowing that part of the viewport is obscured by the header. As a result, when you hit space, part of the text on the next screen is put under the header, where you can't read it.

It might be possible to correct that in CSS as well. (Perhaps by putting the main text in another fixed block with overflow set to scroll?)

I just got a new laptop and one of the notable differences from the previous one is that the screen is wider and shorter. I think this is a trend, not a one-off occurrence. Therefore, I'd say put the navigation bar on the side (or both sides).

I also like the idea mentioned above for navigation with paragraphs, that way the user can bookmark their current position to the paragraph; so perhaps a part on the side where every paragraph has an anchor?

Idea demonstrated at http://jacek.cz/tmp/css.html

Nothing floating in firefox on ubuntu, both the fixed and floating examples look the same to me...

Why does this floating header need to be visible Norm? Just use your keyboard shortcuts for navigation?

If it *must* be shown, how about a mouseover action which would address the jerkiness of it?

I'd like to see a Google Books style of approach where the entire content has a linear ("all on one page") feel but with hypertext navigation ("page at a time" load rate and linking). The inherent balancing of short vs. long sections alone would be worth it :-)

on windows,

the the javascript float is too jerky to be usable with FF and Opera and doesn't float at all with IE

The css version works fine in FF, Opera and IE, but I much prefer Jacek's layout with the navigation to the side. (I remember early versions of ghostview (or was it xdvi, I forget) moving the navigation controls to the side rather than the top, for similar reasons.

I thought I did all right with this example: http://ugo.crl.nitech.ac.jp/~ddb/CIF/skunkworks.cgi/

The forwards backwards navigation is done via the orange box at the top that just pops up via CSS when you hover the mouse over it. As ever, it needs a little javascript to test whether the CSS is supported.

The basic CSS was this: div.accesskeyinfo { position: fixed; background-color: orange; border-color: purple; border-style: solid; border-width: 5px; overflow: clip; white-space: nowrap; padding: 5px 5px; text-align: center; left: 10%; width: 80%; top: -30px; }

div.accesskeyinfo:hover { top: 00px; }

Solves all positioning paging real estate issues, I thought anyway.

Cheers Doug

Hmm. I'm not sure if you're subjecting my comment to silent scorn, or if you just didn't bother to mouse over the links.

I'm not sure what you mean, John. I did respond (comment 5). Mostly, I think, you made me doubt my own time line. I wonder if I could still use an abacus; I did learn once.

The floating bar is really good idea. I've always wanted to put information related with the document on a floating bar, for example links to sources, to discussion forums and any other metadata related with the document.

Here's one way to implement navigation across the sections (and pages) of an online book:

http://www.pinkjuice.com/howto/vimxml/

eg the TOC on the left side on http://www.pinkjuice.com/howto/vimxml/setup.xml#catalogs