Free CSS Templates

In this part of the tutorial I will guide you through coding the image created in part 1 of the tutorial. If you have not read this you may read it here:

How to Slice The Image

The first thing you must do to create your navigation is to slice it. The idea of slicing is to take sections of the image you created in photoshop. For this template we will need two images. These images will be 1px wide and 28px high. These will be repeated horizontally to create the base look of the buttons for normal and hover states. The reason the image is only 28px high is because we also have 1px borders above and below which will be done using CSS but are included in our images. In our photoshop document we created three buttons of 30px.

First thing to do is to save your psd as a jpeg and open it in photoshop. To get the first base image use the rectangle marquee tool and select fixed size 28px high and 1px wide. Click onto the image of the top button in the darker state. Nude the selection using the arrow keys until you have the whole of the height of the button selected but not the two border. Next press CTRL and C then new document in photoshop. The setting should be automatically set to height 28px and width 1px. If not change it to these. Then press CTRL and V to paste the selction into the document and save as a JPEG. You have now got your main background image. To get the hover background image do the same but put the selection over the lighter button. Save the two images as bg.jpg and hoverbg.jpg.

Coding an Accessible Navigation In CSS and XHTML

Now for the CSS part. The best way to create the navigation is to use lists. Lists are good as they cut down on code in your XHTML. Lists are shown by li and ul. To create the navigation simply add the following to you CSS.

#navvy
{
width: 200px;
font-size:11px;
padding: 0;
text-align:left;

font-family:Verdana, Arial, Helvetica, sans-serif;
}

ul#navvylist
{
text-align: left;
list-style: none;

margin: 0;
padding: 0;
width:100%;
}

ul#navvylist li
{

width:100%;
display: block;
margin: 0;
padding: 0;
}

ul#navvylist li a

{
display: block;
margin:0;
width:100%;
padding-top:8px;
padding-bottom:7px;

padding-left:20px;
padding-right:10px;
border-top:#387EAF solid 1px;
border-bottom:#193C64 solid 1px;
color: #FFF;
text-decoration: none;

background:url(bg.jpg) repeat-x;
}

#navvy>ul#navvylist li a { width: auto; }

ul#navvylist li a:hover, ul#navvylist li#active a:hover
{

color: #ededed;
background:url(bghover.jpg) repeat-x;
border-top: solid 1px #41A2C5;
border-bottom:1px solid #2A5C8D;
}

This at first glance may look very complicated. In reality it isn’t. My code is not the best when it comes it size. I tend to throw extra attributed in than needed but never the less it works. The main things you should observe from the code are the use of the list and the use of the background image repeat. These background repeats are the way our images are copied many times in the X-axis (horizontally).

XHTML

Step two of the coding process is to add the XHML. This isn’t very difficult. Add the following to main page of your site where you want the navigation to appear:

<div id=”navvy”>
<ul id=”navvylist”>
<li><a href=”#”>Home</a></li>
</ul>

</div>

This refers the the list with id navvylist and this put in a container with id navvy. Both are items we defined in the CSS. To add extra links simple copy:

<li><a href=”#”>Home</a></li>

The best way I find to learn CSS - although it may be messy - is to copy code then play around with it and see how things change. Try this and you will learn how certain attributed alter certain appearance aspects.