Putting a simple page layout together
Following on from the
XHTML tutorial
we need to move from the structure of our page
to some form of layout. Our simple example had the following structure:
<body>
<div id="content">
<div id="header">
<h1>Scotty's Website</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chester</a></li>
<li><a href="#">Hobbies</a></li>
</ul>
</div>
<div id="main">
<h2>My Home Page</h2>
<p>This is a rambling bit of prose which goes on ...
</p>
</div>
</div>
</body>
We can lay this out on the page with some simple styling as follows:
/* simple styles for whole page, e.g. font and colours */
#content
{
font-family: verdana, sans-serif;
color: gray;
background-color: #CCCCFF;
}
/* styles for the header, e.g. borders and
background colour */
#header
{
padding: 0.5em;
background-color: silver;
color: black;
}
#header img
{
float: right;
padding: 1em;
}
/* make the menu float to the left. Set list and
anchor properties too */
#menu
{
width: 180px;
float: left;
font-size: smaller;
margin-top: 2em;
}
#menu li
{
list-style : circle;
text-decoration: none;
}
#menu a:link, #menu a:visited
{
color: gray;
}
#menu a:hover
{
color: red;
}
/* properties for the main content. e.g. heading
style and indentation */
#main
{
margin: 2em;
margin-left: 200px;
}
#main h2, #main h3
{
color: #000099;
}
The result is something like this:
Scotty's Website
My Home Page
This is a rambling bit of prose which goes on and on and on.
I wouldn't recommend reading it as it tends to repeat itself. Its only really here
to show you what happens to the formatting.
Of course you will need to dig in further to make more sophisticated changes, but
the principle is there.