I promised Dizzy Girl I would do a post on how to make a really simple blog page using CSS and this is it.

I was going to put the HTML right here in the post, but that will be a pain because I’d have to encode all the HTML stuff and I don’t want to do that. So instead follow this link to the simple page and view the source. Yes it is hideously ugly, but that’s mostly so you can see what is going on. You also want to look at the CSS source, which is where all of the work is done.

We use div tags in the source to delineate the three pieces of the page, the masthead, the side bar, and the main area where your blog entries would go. These can be in any order I just put them in top to bottom left to right order. I added some random content so you can see how they will handle content. I also defined borders and backgrounds in the CSS file so we can more perfectly see the content.

There are a number of ways you can get content into these sections. You could just code it right in there. Or you could use server side includes. Or you could put this template in your blog software and insert tags to make things show up. I use a combination of these on Reactuate. All of the content is in a skin. The masthead is stored in a file. Then I use a Nucleus tag for the body and include another file for the side bar. Nucleus generates everything on the fly.

Now Gennie, just for you I’ve recreated the front page of your site. A few notes.

I was going to link directly to your site for the main graphic. But it was real slow loading, so I created a copy. The file is huge on your site and takes a long time to load. I put it in GraphicConverter and compressed it down to 72K. To me it look exactly the same. Feel free to use modified image file. Its a great masthead.

Your page width is defined by the masthead graphic, so when calculating the width of the main style you have to subtract the side bar width (250) from the masthead graphic width (800) and set the main width to 550. If you change the width of the graphic you need to change the style sheet.

I did this with server side include of files I created.

If you want me to remove this from my site I will. I hope that helps, let me know if you have questions.

I almost forgot to mention. Doing this means you can reuse the page for other pages on your site. If you change the main area to contain one entry with comments you have the archive page.