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 picture

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.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera