You can visit the content page for the tutorial outlining all the different parts over at the following: Complete CSS Tutorial.

Coding the footer using CSS

I reckon you should probably be able to do this on your own by now but if not don’t worry. I will go through making the footer for the template. Basically its going to be within the wrapper div (holding the website content) and below the ending tags for the content. The attributes needed for our example will be width 100% and with a solid background colour.

.footer{
width:100%;
padding-top:15px;
padding-bottom:15px;
color:#fff;
text-align:center;
background:#4E4739;
}

All pretty self explanatory I would say. No need for anything complicated for this one. For the XHTML simple place the following just before the final div end tag (the one for wrapper div):

<div class=”footer”>Template by <a href=”http://www.freecss.info”>freecss.info</a></div>

So thats its for the CSS and XHTML. You are completed. Now time to just clean a couple things up.

CSS in external stylesheet

I believe you can do this in more than one way but I will just do it the way I am used to. Its quite simple. Press file then new and select CSS. Go to code mode of your current template and copy everything after <style type=”text/css”> and before </style>. Past this into the code mode for the CSS file. If want you can only copy it into notepad. Next save the file as style.css and in your tutorial folder.

You have now created your style sheet. Next thing to do is to remove from <style type=”text/css”> to </style> on your index.html. Also remove the tags themselves. The template now has no CSS defined. If you switch to design mode you will see what your website would look like with CSS turned off- Just as well CSS exists

Now you will need to link in your index.html to you style sheet. This is simple. Just add the following code you to your index.html’s head section (after title tag probably and before the </head> tag).

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

If you check in design mode you should now see your template with CSS defined.

Make sure everything validates

I always do this with my websites but sometimes it doesn’t really make much of a difference. Its best to have proper compliant code which validates. To check your CSS and HTML use w3c validator. You can choose various options to validate your code there. It will tell you any problems which you should be able to then go and fix.

After checking my coding I found no errors. That just comes after many years of coding. At first I would make something like 20 different errors on my first draft of coding so to speak. If you have problems with the way your website is displaying its often worth checking to see what the errors if any for your coding are. It can often show up spelling mistakes and typos.

Some search engine optimization tips

A few tips for coding templates. First off try to keep any text in your templates as html text. Try not to contain text in images. If you do this its best to use the image replacement technique to make it look as though the image is text. Its also best to use alt tags for you images that you do have. This helps with accessibility. Have your website title or keyword in your title tag. This is probably the biggest on page seo factor so use it!

You have reached the end

Well if I was to say it was great fun I would be lying (deleted parts and had to rewrite them. Lots of stumbling blocks and time was spent on this tutorial so please if you find any problems with it post them here and I will try to sort them out. I hope you found the tutorial interesting and informative. You can hopefully learn something from what I have written.

Download Finished Template

Preview Finished Template

If you wish to request or ask me something please post them here. Thats all for now folks!

If we look at the design we can see each list item is going to need a border at the bottom and a custom bullet on the left.

Slicing the bullet image

As usual I slice the images needed first. We are just going to need the one image for this navigation. Simply slice the square bullet in image ready and save as usual. Remember to zoom in to make it easier.

Coding the vertical navigation in CSS

Right now we have the images needed. All we have to do now is to code it. The code isn’t very difficult so I will just present it to you. You should be able to see each thing is created using the CSS. If you want something explained just ask.

.rightcolumn ul
{
list-style-type: none;
padding-left:0;
margin:0;
text-align: left;
width:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-top:5px;
}
.rightcolumn ul li{
padding-top:6px;
padding-bottom:6px;
border-bottom:1px solid #E8D9BD;
margin:0;
}
.rightcolumn ul li a
{
background:url(images/nullet_29.gif) left no-repeat;
text-align: left;
padding-left: 20px;
font-size:11px;
text-decoration: none;
color: #4E4739;
}

.rightcolumn ul li a:hover
{
background:url(images/nullet_29.gif) left no-repeat;
color: #4E4739;
padding-left: 20px;
text-decoration:underline;

}

A couple things to note from the above example. List navigations such as this can be given paddings by default. That is the reason for the padding-left:0 for the ul. The list-type:none removes the regular bullet and the background attribute is used for our bullet image.

The XHML for the navigation is really simple. The navigations like this can only be shown on the right column but numerous can be added. The XHTML should be:

<ul>
<li><a href="http://www.yoururl.com">Home</a></li>
</ul>

After you have added this you should see something like below when you preview:

Something wrong?

As in other parts if you have done something wrong or need further explanation please post a comment. You can also download the example source code thus for from here: example code.

In the next part

We will finish off the template by adding a footer and cleaning it up a little. We will also move the CSS into a separate file.

Step 8- Finishing Off

Coding the article CSS

This part is going to be simple so it probably won’t be very long. Simply slice the background pattern at the top of the article like so:

The coding is actually quite complicated because the inner div used. Basically you have the article div. This is the holder for artfoot and has the background at the top. The line-height attribute just spaces the lines a bit more. The art foot is therefore inside the article div and has the borders and paddings applied to it. The margin bottom is also added so when you have numerous posts there is a gap between them.

.article{
width:500px;
background:#F5EEE0 url(images/topbg_26.gif) top repeat-x;
line-height:20px;
}
.artfoot{
width:479px;
margin-bottom:30px;

text-align:left;
padding-top:5px;
padding-left:10px;
padding-right:10px;
border-left:1px solid #CBA964;
border-right:1px solid #CBA964;
background:url(images/artfoot_30.gif) repeat-x bottom;
border-bottom:3px solid #CBA964;
}

You should place the XHTML for the article and artfoot divs after the closing tag for holder. When you add text inside the artfoot div you should have <p> before each paragraph and </p> at the end.

<div class="article">
<div class="artfoot">
<p>This is an example paragraph . </p>
<div class="infobar"> Comments (5)</div> </div>
</div>

Coding the comments button

As you can see from the above code I have put the comments button into an info bar div. So lets first define the CSS for the infobar then change the coding for the actual comments button. The coding for the infobar should be simple. Some padding at the bottom, full width, padding to the right and text aligned to the right. The coding of the infobar is just to get the comments button in the right place.

.infobar{
width:438px;
padding-right:40px;
text-align:right;
padding-bottom:10px;
}

Note: Since the artfoot has a 1px border on either side and 10px padding on either side the width available for the infobar is a maximum of 500 - (2+20) = 478px.

That should be all the coding we need for the info bar. The actual comments link is going to be more difficult. I am going to make it easier by making the button a fixed width meaning we just need to slice the button background and no need for repeats.

CSS for comments link

I have referred to the comments link as a button as it appears like a button. Please don’t confuse this with a form button. It is simply a link with CSS used to define the background image and area for the link. The coding for this is actually pretty complicated. I decided to make it a list so other links could be added as well such as read more. If you want me to explain it please post a comment. Otherwise you can just use my code and try to adapt it if you need to:

.infobar ul{
list-style:none;
text-align:right;
margin:0;
}
.infobar ul li{
width:109px;
height:24px;
padding-top:2px;
background:no-repeat top center url(images/button_33.gif);
text-align:center;
color:#F4EDDF;
float:right;
font-weight:bold;
font-size:11px;
font-family:Verdana;
}
.infobar ul li a:link, .infobar ul li a:visited, .infobar ul li a:hover{
display:block;
text-decoration:none;
color:#F4EDDF;
}

The XHTML has therefore also changed and a clear has been added since the li items are floated to the right. You should end up with XHTML like:

<div class="article">
<div class="artfoot">
<p>Example paragraph in a post </p>
<div class="infobar"> <ul><li><a href="#">Comments (5)</a></li></ul><div class="clear"></div></div>
</div>
</div>

You should now have completed the left column. All that is left to do is the links on the right and a really simple footer. Like always if you have any problems post a comment and check out the example code.

Step 7- Right Column Navigation

Slice content background

Like always go into image ready and slice the top gradient underneath the navigation as such:

Most designs have gradients underneath the navigation and above the content or as a background for the content. In those cases make the slice 1px wide. In this case I also have a pattern. Therefore to make it flow it has to be a reasonable width as describe in previous parts of the tutorial.

CSS coding for columns and content

The idea is we we have a div called content which will hold both columns. It should be the full width of the wrapper div. Since the columns will be floated inside the content div we will need a clearing div after the columns but before the ending tag of the content div (clearing divs are explained in previous part). To work out the widths for the columns use the technique of slicing images on the design. This isn’t going to work for the example since the width of the design in the psd is not 800px.

We should therefore have the following CSS coding:

.content{
width:800px;
background:url(images/undernav_22.gif) repeat-x top;
}
.leftcolumn{
float:left;
width:500px;
padding:20px;
}
.rightcolumn{
width:220px;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
float:right;
}

To me that coding seems pretty logical, yeah? Basically the content holds the two columns. One is wide and floated on the left side with padding so the text inside it won’t go right to the edges and the other is think and floated to the right (will hold further navigations and links). There is also a gap between the two columns so the are not too close and cluttered looking. To do that simply make sure the widths of the two columns (including paddings) is less that 800px. It just takes some experimenting to get the right looking dimensions. I tend to guess then change them instead of calculating it properly.

The XHTML code used is:

<div class="content">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
<div class="clear"></div>
</div>

You should already know how XHTML works by now but if you didn’t I have highlighted which closing tags go with which opening tags. It may make it easier to understand. Put this coding section after the closing tag for the nav. If the XHTML worked any differently ie the first red closing div closed the content div you would end up with overlapping element and it just wouldn’t work.

If you go to the design mode on dreamweaver you should now have something like the following:

We have the basic shell which we will add the content to. We may find that we will change the width of the columns later and add some extra CSS but this will do for now.

You can download the example code thus far here: Example code.

Step 6- Coding the content

If there was not rounded corners we could simple repeat an image in the horizontal direction. Since it has rounded corners we cannot do this.

Slicing the navigation background

First we need the light background to repeat the full way across the wrapper and to hold each navigation item. To do this you first need to slice the background image like in the diagram. This will be repeated in the x-axis:

Usually I would make the selection 1px wide but since there is a pattern it must flow just like the header background had to flow together.

Coding the navigation background

This is going to be very simple. Just a div container with the full width of wrapper and of the height of the image which will be repeated on the x-axis.

.nav{
width:800px;
height:37px;
background:url(images/navbg_12.gif) repeat-x top;
}

That should be the CSS of the nav container which will hold each navigation item. We may need to adjust it with some padding but we can do that later. You then need to add the XHTML for the nav div container after the closing tag for the header:

<body>
<div class="wrapper">
<div class="header">
<h1><a href="#">Free CSS </a></h1>
</div>
<div class="nav"></div>
</div>
</body>

Slicing the images for the navigation tabs

This part is the simple part. Things you need to keep in mind. The left image is as thin as possible and the right is to be bigger than you should ever need as it will vary how much of that image is displayed. It doesn’t repeat, just more of it is revealed.

The first image is the left side. To slice that image you will use the slice tool as always in image ready:

Make sure you have no text on the tab and that the right side is going to be wider than you should ever require (wider than any link will be):

Coding a navigation as a list

When coding a navigation using CSS we use the <ul> and <li> tags. This stands for unordered list and list item. Each link is a list item which is part of an unordered list. This means the unordered list will be held inside the nav div container we just created.

The coding for the navigation is quite complicated. I will paste the code first then go through each part so you can understand what we are doing:

.nav ul {
margin:0;
font-size:11px;
font-weight:bold;
padding-left:50px;
padding-top:7px;
list-style:none;
}
.nav li {
float:left;
background:url(images/navleft_15.gif) no-repeat left top;
margin-right:10px;
padding:0 0 0 15px;
border-bottom:1px solid #ccc;
}
.nav a {
float:left;
display:block;
background:url(images/navright_16.gif) no-repeat right top;
padding-top:5px;
padding-right:20px;
padding-bottom:7px;
padding-left:6px;
text-decoration:none;
color:#FFFFFF;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
.nav a {float:none;}
/* End IE5-Mac hack */
.nav a:hover {
color:#FFF;
text-decoration:underline;
}
.clear{
clear:both;
}

The XHTML is very simple in comparison:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact</a></li>
</ul>

The whole extract should go between the opening and closing tags for the nav container. Each li is a link.

CSS explained

The coding for the CSS looks huge and overwhelming? Don’t worry, in reality its not too complicated. You don’t even have to understand it to use it. This is one of the more complex types off navigations because each item consists of two images and must be able to expand.

list-style:none - This removes the bullets for each item. This is a standard with unordered lists.

Something else which you should note when using the sliding door technique. The padding on the left side (in this case 15px) must equal the width of the left image. You can see this in the second set of coding. Instead of writing it out I wrote it in one padding. The order goes top, right, bottom and then left.

In the third set of coding the right padding 20px needs to be equal to the left padding on the previous set plus the padding on the left defined in that one. In this example that means 15px plus 5px. That ensures the text is displayed in the exact center of the tab background.

The use of css hacks

You will also notice in the CSS coding a hack. This is something which is used to fix any cross browser differences. Firefox may display the code correctly but IE6 may show it incorrectly. This is a problem with some code and the hack is needed here. I don’t often use hacks and tend to just copy it from other code. This is actually a really good way to learn.

Whats up with the .clear css?

The class called clear is used to clear the floats which we use in the navigation. Floats are pretty self explanatory. It floats an object either to the left or right. This allows multiple objects on the one line whereas without the float it would just appear on the left and one underneath the other. A problem with floats however is that it can break the look of your design. It can cause other div containers not to expand to hold them. So in this case the wrapper div would not expand.

To fix div containers which don’t expand due to floats held inside them you simply add the clear:both attribute to the css class for clear. You can then insert a short line underneath your floats to clears them and make the wrapper or containing div expand. For this example place the following XHTML under the closing tag for the nav container not ul .

<div class="clear"></div>

You should now have a functioning and great looking css navigation. No? If you have some problems post a comment here and I will try to help you.

You should have something like the above. If you want here is the source code which I have thus far: Example code. Also just to say to people who are familiar with CSS. I am currently keeping the css in the head section of the page instead of in an external stylesheet purely to make things easier while coding. I will switch it to an external sheet at the end and show how to link to it properly.

Step 5- Floating the columns