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;
position:relative;
width:800px;

.lhc {
left:0;
position:absolute;
top:0;
width:12%;
}
.rhc {
margin:0 0 0 80%;
position:absolute;
right:0;
top:0;
width:30%;
}

.meals {
left:13%;
padding-bottom:10px;
position:relative;
width:56%;
}
}
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