Menu last but displayed first
"How do you code a menu last in the html but make it display first on screen?"
This question was asked during Dan Cederholm's presentation of Bulletproof Web Design at @ Media 2006.
I didn't have a straight answer when the question was presented. However I did some thinking and after the presentation I ran out to catch the woman asking the question.
The answer I came up with is quite simple: The menu has position: absolute aligned to the top and make sure that the content has the same margin-top as the height of the menu. This will ensure the menu never overlaps the content.
The main trick is to use ems to specify the height of the menu since a height in ems will scale relatively to the font-size, giving more room when text is scaled up.
While this may work when the menu stays in one line, it does break in extreme cases where the text is blown up to massive size, so as a last counter-meassure to protect the design, I have added an overflow:auto to the menu to give it a horizontal scrollbar if needed.
The example here is simple, but this can work with more complex headers with headlines, banners, search box etc. with a bit of planning ahead on a piece of paper and some creative use of ems.
Have fun and feel free to email me any comments or examples of this technique in use.