Building with blocks

This week we're looking at how to use CSS to lay out a page. To kick off, work through this tutorial on subcide called 'Creating a CSS layout from scratch' (up to, but not including page 10, the navigation).

There are some interestnig techniques used here to ensure the divisions stay in the right places. And some not-so-interesting uses of graphics instead of text (did you spot them? What would you do differently?)

One thing I noticed was a lot of code in this tutorial that set the padding and margins for various elements to zero. If you're wondering why, there's a good article on the subject called 'No Margin For Error'

Taking the idea of stacking DIV boxes to make a page layout one step further, here's two more web pages to look at:

• layout-o-matic - which lets you plug in some variables and automagically generate some CSS
  
• Little boxes - which has a set of templates ready to download
  

Once you've explored these a little, revisit your '10 things' page and apply some CSS layout...

1. Link a CSS file to the '10 things' page
2. Create a DIV with a unique ID around your heading
3. Set the background colour, border and padding for this div to have it stand out on the page
4. create divisions for the list and your image(s) so that they display side by side on the page in a 2 column layout
5. put in a 'footer' div with copyright, navigation and validation links in it
6. Upload and post a blog entry to let me know when it's ready to view