08.02.05

CSS Page Layouts

Posted in web dev at 1:18 pm by Clinton

One of my all-time favourite articles A List Aparts
To Hell WIth Bad Browsers/. Its a good read.

While trolling, there are nice collections of templates out there…
ssi-developer
bluerobot

but the one i really like is…

Owen Brigss at thenoodleincident - has very slick presentation, and i’m bloggin it here just so i’ll be able to find it again easily next time i’m starting with a layout! Owen did a great design rant (2001), and emphasises very nicely the multi-layer “onion” (vegetables - their good for you) approach of getting your core message right, and then layering enhancements on top, and that form and function are related and just because we say “separate style from content” doesn’t mean what you do in HTML has no bearing on how things look… anyway - that’s his rant. I’ve been known to rant on the same topic.
To quote his quote “If you don’t know six ways to abuse a tool then you don’t know how to use it”. I like!

more links
New York Public Library online style guide
Jeffrey Zeldman CSS Lectures

Anway, I wanted a “Clean Start” === “No CSS Hacks” (aka To Hell With Bad Browsers).

So, here’s a basic #header, left #menu, .content, fluid layout, absolute position menu, *no* CSS hacks and no appologies :). I’ll demo this somewhere soon…

body {
  margin: 0px;
  padding: 0px;
}

h1 {
  margin: 0px;
  padding: 0px;
}

#header {
  margin: 0px 0px 10px 0px;
  padding: 0.5em 0px 0px 2em;
  border: 1px solid black;
  background-color: #eee;
}

.content {
  margin: 0em 2em 2em 12em;
  padding: 1em;
  border: 1px solid blue;
}

#menu {
  position: absolute;
  top: 5em;
  left: 1em;
  width: 10em;
  padding: 0;
  border: 1px dashed #999;
}

[edit:I’m missing html code because of the recent blog conversion that isn’t quite so automagic… so i’ll just do a new version of a css layout reference some time soon instead]

Visual prop’s would help i know, but …

Leave a Comment