css ...the devil is in the details.
So how does all this work? The nitty gritty stuff is in the code; just follow the links below to find all the glorious comments. A more general discussion follows further down the page.
code ... use the source, Luke.
- xhtml: css.html (this page)
- css: styles/main.css (this page's stylesheet)
navigation ...where are we?
- All the nav tabs here lead to one page at the same 'top' level of the site: clear and simple. (If your site has a different information architecture, then you need to think harder: what should users see 'lit up' on deeper pages? There isn't one simple answer to this; it depends on how you're organizing your information.
- The entire navigation list remains consistent, with the tabs in the same places as you click on them. Nothing changes unexpectedly.
- The current page is plainly indicated by the reddish tab. Again: "don't make me think."
- The mechanism I'm using here is to give one tab id='current',
and to set all the colors and what-not for that id in main.css.
<ul id="nav"> <li><a href="home.html" >home</a></li> <li><a href="css.html" id="current" >css</a></li> <li><a href="two.html" >two</a></li> <li><a href="three.html" >three</a></li> <li><a href="four.html" >four</a></li> </ul>
There are other ways to do this sort of thing as well. Without doing server side programming, pretty much any way of organizing a whole lot of pages that all have a similar look and feel is going to be repetitive, because the 'outer' code needs to be (nearly) replicated on each page.
positioning ...I'm leaning to the left, myself.
- The trickiest part here is the navigation tabs.
The basic idea runs like this:
- The tabs are in a div that's absolutely positioned; where they are has no effect on anything else.
- The height of the header (above the pink block) is set explicitly; that lets us decide where to put the tabs.
- I'm using 'em' for the distances that matter for the navigation tab placement, so that when the font-size changes the tabs will stay pretty much where they're supposed to be.
- The rest is fairly straightforward:
- The header's h1 (which but for margins fills the page left-to-right) has text-align:right so that the text in it is shifted right.
- Several horizontal margins are set to 'auto' to center elements.
- Image in the content float to the right of the paragraphs.
- The footer has 'clear:both' set to make sure it's below any images.
