Free CSS Templates

The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview. It is going to be a navigation created using unordered lists just like other ones.

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:

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

Bookmark It