Many new template designers have great ideas, and are often very capable at creating layouts in Photoshop. Unfortunately if they don't know html, the image slice and export to webpage function of Photoshop will simply create a page filled with nested tables that are hard to read and even harder to convert to a blogging engine like Serendipity or Blogger.
In this article I'm going to focus on creating a simple two column css only template which any Serendipity or Blogger template designer can customise for their own template.
Let's start with the assumption that the template will have a header area, and beneath that will be a container holding a content column and a sidebar which could either be on the left or right, and then at the bottom of the page we'll include a footer for the copyright and credits.
Creating a CSS 2 column template for your blog
Life in Ronda, Learning Spanish, Property in Spain
Creating a CSS 2 column template for your blog
Thursday, April 27. 2006
The html code needed in your test page (call it test.html) looks like this;
You should already be familiar with the basic structure of an html page so I won't describe the html, head and body tags, instead I'm going to focus on the div tags, container, header, content, sidebar, and footer. Looking at this code I'd like to point out how simple it looks, and if you looked at this page in a browser with stylesheets disabled you would notice that every div is placed one after the other as if they had a line break between them.
The container div is special because it holds everything together and could be used to center the page or perhaps adjust its width. A very basic stylesheet (call it test.css) that would allow you to test this structure looks like the following;
I've deliberately kept the styles used to a very minimum so that that you can properly understand the basic structure. Each div is listed, although I've left the style for the container empty. Notice also that each div is referenced by a '#' sign, which means these are block level items.
The way a browser will put this page together on screen is a basic top to bottom layout. In other words, if there are no instructions to tell it where things go it will just assume each div is just a paragraph.
This is why the content and sidebar sit below the header. Notice however, I've given the content and sidebar columns a float and width style. These are needed to make them sit side by side otherwise the sidebar would sit beneath the content because this is the order that they appear in our html.
In fact, we could switch the sidebar to the left of the content by simply making it float left and the content column float right. I'm sure you'll agree that gives you a lot of options when designing templates.
To complete our basic template we need to make sure our footer sits below both the content and sidebar. A simple 'clear both' tells the browser that we don't want any item to the left or right of the footer, and thus forcing the footer to the bottom of both. Without this, the footer might become squashed under the sidebar column.
The final piece of the puzzle to make this work is the closing div just before the </body>. Many beginning designers forget that divs need to be closed, and because our container div is a container with all other divs sitting inside it, if we forget this last step our page may give some unexpected results.
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">header text</div>
<div id="content">sample of content text sample of content text sample of content text sample of content text
</div>
<div id="sidebar">sidebar text</div>
<div id="footer"> ©2006 my business, credits to Carl</div>
</div>
</body>
</html>
You should already be familiar with the basic structure of an html page so I won't describe the html, head and body tags, instead I'm going to focus on the div tags, container, header, content, sidebar, and footer. Looking at this code I'd like to point out how simple it looks, and if you looked at this page in a browser with stylesheets disabled you would notice that every div is placed one after the other as if they had a line break between them.
The container div is special because it holds everything together and could be used to center the page or perhaps adjust its width. A very basic stylesheet (call it test.css) that would allow you to test this structure looks like the following;
#container { }
#header {height:25px;}
#content {float:left; width:75%;}
#sidebar {float:right; width:25%;}
#footer {clear:both;}
I've deliberately kept the styles used to a very minimum so that that you can properly understand the basic structure. Each div is listed, although I've left the style for the container empty. Notice also that each div is referenced by a '#' sign, which means these are block level items.
The way a browser will put this page together on screen is a basic top to bottom layout. In other words, if there are no instructions to tell it where things go it will just assume each div is just a paragraph.
This is why the content and sidebar sit below the header. Notice however, I've given the content and sidebar columns a float and width style. These are needed to make them sit side by side otherwise the sidebar would sit beneath the content because this is the order that they appear in our html.
In fact, we could switch the sidebar to the left of the content by simply making it float left and the content column float right. I'm sure you'll agree that gives you a lot of options when designing templates.
To complete our basic template we need to make sure our footer sits below both the content and sidebar. A simple 'clear both' tells the browser that we don't want any item to the left or right of the footer, and thus forcing the footer to the bottom of both. Without this, the footer might become squashed under the sidebar column.
The final piece of the puzzle to make this work is the closing div just before the </body>. Many beginning designers forget that divs need to be closed, and because our container div is a container with all other divs sitting inside it, if we forget this last step our page may give some unexpected results.
If you enjoyed this post, make sure you subscribe to my RSS feed.
Friends
CoSTa said,
Friday, May 5. 2006 at 08:27 (Reply)
please, if you'll find some time, a small tutorial of how to make fixed size two (or three) columns templates will be appreciated. i played a little with my theme and i have already putten everything into divs. the problem's name is internet explorer. this browser disrespects sooo much css... with firefox, opera, konqueror and all sort of modern browsers there are no problem at all. this damned ie ruins my every efford. so, if you have some knowledge of how to write css for ie - that would be great.
you know, i don't want to copy your css. i want to understand why something works and something does not work