Categories
Software and Programming

Head, Wall, CSS

So instead of updating my Blog, I’m fiddling with its Style Sheet.

Unlike Radio, which uses templates heavily based on work-anywhere, look-the-same-in-any-browser tables, Movable Type relies on CSS for the design of it’s default templates, which are all in XHTML-whatever.

CSS looks different in each browser, but it’s main advantage is that it makes the HTML much cleaner to write. No more <tr> <td> </td> </tr> <tr>… crap to wade through everytime.

Now, the style sheet could do with some simplifying (notice all the different fonts – they could do with some reduction), but the CSS lets you do cool stuff.

It has it’s limitations, though. For example, it took me a while to figure out how to recreate the simple design I used in my regular pages – a full-width header, two columns (content and sidebar), and a full-width footer. The tricky part was the footer, and the solution to that problem was a CSS attribute called clear, which effects how a given box of text (DIV or P) is arranged in relation to floating elements (the way I do the sidebar is to use the float attribute to float the content to the left of the sidebar, or vice-versa).

What clear does is to move the box (P or DIV) to which it applies down until it’s below the floating box(P or DIV).

God, that was horribly technical.

Anyway, I stole the float bit from Mark Pilgrim‘s style-sheets, and although I looked at the useful tips and templates at Glish.com, I found the attribute I needed on the style sheet for the front page of BlueRobot.