By now we have a simple version of the site up and running, and the masthead image is branding the site. Our HTML and CSS files are still tiny, and Tracy can change the background and head image for the entire site simply by editing the stylesheet to point to new graphics.

Building the content area

Ok, the Content block next. I’m going to use CSS to define what the content block should look like, and where it should appear on the page. I’ll use HTML purely to say ‘There should be a content block here’, and I’ll use server side technology to hold the actual content in another separate file and include it on the fly.

While it looks like a series of concentric boxes with rounded edges, it can be simplified – if you ignore the top and bottom, its just a box with colour stripes down the sides. OK, I’ll just crop the image so that it has a black, beige and orange stripe at each side, and I’ll erase the orange to make it transparent. I’ll then use CSS to say ‘The content box is this size and looks like so’.

The box is 796 pixels wide, so my CSS looks like this so far:

#mainblock {
background-image: url(/tmh/sitegfx/contentbackground.gif);
width: 796px;
}

And it works, except the content box isn’t where it should be.

The content box should be way over to the right (and the text inside it needs be moved away from edge). The navigation bar is going to be inside the header and it’s getting in the way, so I’ll pop it up and best it inside the header:

<div id = “header”>
<div id = “navigation”>
Navbar
</div>
</div>

Now that we’ve moved that out of the way for now, I guess the content block needs to be about 200 pixels across the screen:

#mainblock {
position:absolute;
left:200px;
background-image: url(/tmh/sitegfx/contentbackground.gif);
width: 796px;
}

I’d normally use a margin to push the block over, but that would requiring talking about the way Internet Explorer mishandles tags and how to get around it. This method is brute force, but works.

Here we go – the navigation is nested inside the header (not in the right place, but we don’t care yet) and the content box is in the correct place more or less. The next things to do are to cap off the top and bottom of the content box, and to add some content.

Capping the content box

There are 2 ways to add the caps – by using the <img> tag in the HTML, or by creating top and bottom cap <div>’s in CSS and setting the background of those to be the cap image. The CSS method is better because this is site layout and design, so by kepping it in the CSS we only have to alter that one file and it will change on every page on the site.

Another benefit of CSS over HTML images is that I can put other content into those caps – like a title and a copyright notice. Of course, I’ll be able to use the CSS to define what any text in those boxes should look like.

The HTML:

<div id = “mainblock”>
<div class = “mainblocktopcap”>the top bit</div>
The main content block data will all go here.
<div class = “mainblockbotcap”>the bottom bit</div>
</div>

And the CSS:

.mainblocktopcap {
background-image: url(/tmh/sitegfx/contentblocktopcap.gif);
background-repeat: no-repeat;
background-position: top;
}

.mainblockbotcap {
background-image: url(/tmh/sitegfx/contentblockbotcap.gif);
background-repeat: no-repeat;
background-position: bottom;
}

I’m telling the topcap to use the background graphic for the top section, not to tile it (so no ugly repeats), and to align it to the top edge. The bottomcap gets it’s background set to the bottom image etc.

For future formatting, I’ll wrap all the central content in a class called “contentblock”. The contentblock and both caps will get their internal padding set to 30px to stop any text or images running right up to the edge (the decorative border is quite thick) :

padding: 30px

Oh, and you’ll remember I guessed that the content box should be 200 pixels from the left side? It’s really 206( I think), so I’ll alter that positional left tag. Finally, I also got sick of the huge text, so I dropped the font size down to 1.2em.

Here’s what it looks like now:

Here is the HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>tmhunt.com</title>

<link rel=”stylesheet” href=”/tmh/includes/style.css” type=”text/css” media=”screen” />

</head>
<body>
<div id = “header”>
<div id = “navigation”>
Navbar
</div>
</div>

<div id = “mainblock”>
<div class = “mainblocktopcap”>the top bit</div>
<div class = “contentblock”>The main content block data will all go here.</div>
<div class = “mainblockbotcap”>the bottom bit</div>
</div>

</body>
</html>

And here is the CSS:

body {
padding: 0px;
margin: 0px;
background-color: #DD901E;
background-image: url(/tmh/sitegfx/background.jpg);
font-size:1.2em;
}

#header {
background-image: url(/tmh/sitegfx/masthead.gif);
width: 1035px;
height: 154px;
}

#mainblock {
position:absolute;
left:206px;
background-image: url(/tmh/sitegfx/contentbackground.gif);
width: 796px;
}

.mainblocktopcap {
background-image: url(/tmh/sitegfx/contentblocktopcap.gif);
background-repeat: no-repeat;
background-position: top;
padding: 30px;
}

.mainblockbotcap {
background-image: url(/tmh/sitegfx/contentblockbotcap.gif);
background-repeat: no-repeat;
background-position: bottom;
padding: 30px;
}

.contentblock {
padding: 30px;
}

Lets include some content next, from a different file…

Pages: 1 2 3 4