CSS Template Tutorial – Right column links

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.

css tutorial

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;
  text-align: left;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  .rightcolumn ul li{
  border-bottom:1px solid #E8D9BD;
  .rightcolumn ul li a
  background:url(images/nullet_29.gif) left no-repeat;
  text-align: left;
  padding-left: 20px;
  text-decoration: none;
  color: #4E4739;
.rightcolumn ul li a:hover
  background:url(images/nullet_29.gif) left no-repeat;
  color: #4E4739;
  padding-left: 20px;

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:

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

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

right navigation

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

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.


Related CSS Tutorials

  • CSS Template Tutorials – Coding the Basics

    July 20, 2008 / 8 Comments

    The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template

  • CSS Template Tutorial – Finishing Off

    September 16, 2007 / 34 Comments

    I will show you in this part how to finish the template off with a footer and just make our coding a little neater.

  • CSS Template Tutorial – Coding post content

    September 16, 2007 / 7 Comments

    In this part we will code the article background and the comments button. For the design we are using for the tutorial the content on the left is a post in wordpress.



  1. zEEROCKz says:

    thanks you so so much…

  2. otodeluxe says:

    your tutorials are awesome!

  3. Visitor says:

    one annoying thing in this tutorial is that the pages do not show a link to the beginning of the tutorial. I’ve reached page 4 from google, but cannot find where it starts.

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books