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.