Sectioning the Page

Now that we have the basic HTML in place it is time to start adding the code that is specific to our template. Just about any template will divide the page up into sections and so the best place to start with the code that will be specific to our template is to add code that identifies those sections (or divisions) within our page.

With my example our page has three sections - a header, a navigation bar, and the main content area. Let's add a div tag for each of these inside the wrapper div that we already have in the HTML.

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>

This gives us the basic "hooks" in our page template to be able to style the page to look the way that we want it to look.

With this in place the next step is to style this HTML so as to start to give the page the appearance that we want it to have. By progressively adding the CSS as we add the HTML it will be easier to make sure that the styles that we add affect the part of the page content that we want it to affect and easier to tell which piece of the CSS is having a problem.

Here's the CSS to style the HTML that I have so far to get it to look approximately the way I want it to look.

html, body {margin:0; padding:0; border:0;}
body {background-color:#666; background-image: url(yellowbg.gif);}
#wrapper {margin:0 auto; padding:0; width:75%; background-color:#ffd; border-left:1px solid #000; border-right:1px solid #000;}
#header {margin:0 10px; height:120px;}
#nav {height:100%; background-color:#ccc; border:1px solid #000; overflow:hidden;}
#content {margin:10px; padding:5px 10px; background-color:#ffd;overflow:hidden;}

At this point I have introduced a background image to display in that part of the page that is not contained within the wrapper and so that image needs to be moved to the same folder as the other files in my template (or in a sub-folder if you add a path in front of the filename).

To actually test how the template is looking so far we'll need some content in the three divs that we just added. Just about anything will do at this stage. With a few characters of test added to each we now have the start of a template page.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow