Monday, June 13, 2011

Easy way to do w3c standard complex layout in html

To do complex HTML layout from the scratch is pain and need to have expertise in html and css. It will take lot of time make it w3c standard website.

The best way to do is to choose one good css framework and work on top of it.
I personally suggest "blueprint", http://www.blueprintcss.org/

For example, the following creates simple 3-column layout with header and footer.

<div class="container">
   <div class="span-24">
    The header
   </div>
<div class="span-4">
    The first column
   </div>
   <div class="span-16">
    The center column
   </div>
   <div class="span-4 last">
    The last column
   </div>
<div class="span-24">
    The footer
   </div>
  </div>
Here the div.container is the main div element in this framework 
and everything is wrapped in this element.
 
div.span-24 means, 24 columns and each spanning 30px with 10px margin 
between each column and the total width comes to 950px, which is a 
good width for 1078 * 768 resolution.
 
Check the tutorial here: 
https://github.com/joshuaclayton/blueprint-css/wiki/Quick-start-tutorial
 
Check here the sample layout with blueprint framework: 
http://d2o0t5hpnwv4c1.cloudfront.net/158_blueprint/src/index.html

No comments:

Post a Comment