Monday, August 3, 2009

A Stylin' Homepage

‹prev | My Chain | next›

Tonight, I need to get the homepage into order. Currently it has no CSS and looks like this:

By way of illustration, the legacy site looks like this:

In both cases, I have the content split into three sections which will correspond to a simple three column layout. I denote the right-handed column as "rhc" and the left handed column as "lhc". The main content column gets the more semantically significant name of "meals".

Important note: I do not care at all about cross browser compatibility here. This is a personal site mostly for family and friends (though it has earned a fairly decent following). As such, I exact a little professional vengeance on IE users, making them pay with a slightly less than perfect experience. Yeah, it's childish, but having developed for IE for 10+ years, I feel I've earned the right to be a little childish.

I add much in the way of style to get the colors and the text flow right, but the layout is accomplished with this bit of less CSS:
#homepage {
margin:10px 10px 75px;
padding:0 5px;

.lhc {
.rhc {
margin:0 0 0 80%;

.meals {
The homepage <div> that serves as the top-level DOM element, is positioned relative to the normal flow. Doing so ensures that the absolutely positioned "lhc" and "rhc" <div> tags will be absolutely positioned relative to the homepage <div>, rather than the body of the document. Beyond that, it is a simple matter of allocating the appropriate percentages of width to the columns, along with offset margins. Add a little color and:

There are still a couple of tweaks that I need to do before deploying. The "all recipes" link is not working. Also, some of the lesser traveled pages may need some CSS love. Hopefully I can wrap both things up tomorrow.

No comments:

Post a Comment