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 interesting 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 so that there's a column on the left of the content. Put an unordered list of links to each detail page in this column. For bonus playing time, decorate your left hand column list using some CSS from the
listamatic.
At the end of the day you should have some html that looks like:
<html>
<head>
<title>title</title>
<link rel="stylesheet"
type="text/css"
href="css/default.css" />
</head>
<body>
<div class="breadcrumbs">
<a href="index.html">Home</a> .
</div>
<div class="title">
<h1>Title</h1>
</div>
<div class="sidebar">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="thing1.html">Thing 1</a>
</li>
<li>
<a href="thing2.html">Thing 2</a>
</li>
<li>
<a href="thing3.html">Thing 3</a>
</li>
<li>
<a href="thing4.html">Thing 4</a>
</li>
<li>
<a href="thing5.html">Thing 5</a>
</li>
<li>
<a href="thing6.html">Thing 6</a>
</li>
<li>
<a href="thing7.html">Thing 7</a>
</li>
<li>
<a href="thing8.html">Thing 8</a>
</li>
<li>
<a href="thing9.html">Thing 9</a>
</li>
<li>
<a href="thing10.html">Thing 10</a>
</li>
</ul>
</div>
<div class="content">
<div class="pic">
<img src="xxx.gif" alt="a picture" height="200px" width="150px" />
</div>
<div class="wikiquote">
<p>some text from the wikipedia</p>
</div>
<div class="backgroundinfo">
<p>why this item made my list</p>
</div>
<div class="credits">
<p>Flickr Image: <a href="#">pic name</a></p>
<p>Wikipedia Article: <a href="#">wiki article title</a></p>
</div>
</div>
<div class="footer">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="thing1.html">Thing 1</a>
</li>
<li>
<a href="thing2.html">Thing 2</a>
</li>
<li>
<a href="thing3.html">Thing 3</a>
</li>
<li>
<a href="thing4.html">Thing 4</a>
</li>
<li>
<a href="thing5.html">Thing 5</a>
</li>
<li>
<a href="thing6.html">Thing 6</a>
</li>
<li>
<a href="thing7.html">Thing 7</a>
</li>
<li>
<a href="thing8.html">Thing 8</a>
</li>
<li>
<a href="thing9.html">Thing 9</a>
</li>
<li>
<a href="thing10.html">Thing 10</a>
</li>
</ul>
</div>
</body>
</html>
and some CSS that includes:
.content {
margin-left: 150px;
}
.sidebar {
float: left;
}
