#right {
 border :  black solid 2px;
        border-top: 0;
 border-left: 0;
 width: 145px;
 height : 300px;
 float: right;
 background-image: url("images/right-background.gif");
 background-repeat: repeat;

}

What we want to do now is add a bit more to the #right div. We want to put some links in here to other sections or whatever you want to link to. I think a nice CSS mouseover would be appealing.

You can see it in action here:
http://homebusiness-websites.com/tutorial2

The only code we add to the html template is the links:

<div id="right"><ul>
 <li><a href="http://">Section #1</a></li>
 <li><a href="http://">Section #2</a></li>
 <li><a href="http://">Section #3</a></li>
 <li><a href="http://">Section #4</a></li>
 <li><a href="http://">Section #5</a></li>
</ul>
</div>

A "div" means a division of a web page. Each division can have its own characteristics that are separate from the other parts of the web page. So the first thing I did to the #right div was setup the fonts by adding this code to #right:

font-family: arial, sans-serif;
font-weight: bold;
font-size: 10pt;

Then we need to define some of the other elements within this div:

#right ul {list-style-type: none;
           margin: 3mm;
           padding: 25px 0 25px 0;
 }
#right li {margin: 0;
           padding: 5px 0;
 }
#right li a {color: black;
             padding: 10px 0 10px 20px;
      background: url(images/brown-button.gif) no-repeat 0 50%;
      text-decoration: none;
 }
#right li a:hover {margin: 0;
                   background: url(images/brown-button-hover.gif) no-repeat 0 50%;
     color: red;
     text-decoration: none;
 }

When you specify all of the values to a property such as padding in the main UL, the values start at the top, and move clockwise. So the first value is the top padding, the second is the right padding, the third is the bottom padding and the fourth is the left padding value.

I create the two images the brown and red blocks which are 10x10 and the #right li a:hover color is set to red, so that when you mouseover a link, both the block and text turn red.

If you have followed this example, you should have a nice looking mouseover navigational menu without using any Javascript. Search engines won't have any problem indexing these links.

One other thing that is a good idea to add is another stylesheet:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

In modern browsers when want to print the page you can use an alternate stylesheet by specifying the media type as "print" which allows alternate formatting.

In this stylesheet I've removed all the graphics except for the validation buttons at the bottom, and also changed the 2px border around the template to 0px. If someone wants to print off your article, there isn't any sense in using up all of their colored ink or having borders on the printed page.

It probably wouldn't hurt if you were building templates this way to include some contact information at the bottom of the article. That way if your article gets printed off, anyone who sees it will know where to find you.

You can also try experimenting swapping out the images with other ones. If you replace the header, background and tiled image of the navigational column, you will have a whole new template.

Including the images, stylesheets and the html page itself, the total files size is 39KB and download of this template and article is:
33.6K   12.89 seconds
56K  7.81 seconds

On DSL/Cable it is about 2 seconds.

For those who are interested in exploring SEO friendly templates a little more, you can download all of the files used in this tutorial in a zippered file:

(Note: Sorry -- the download is only for subscribers to the HomeBusiness Websites Journal)

The images folder in this zippered file are common to both webpages. The file called "index2.html" uses "stylesheet2.css" and "print.css."

If you wish to discuss this tutorial or anything else published in this newsletter, please visit my discussion board at:
http://talk.homebusiness-websites.com

NOTE:

Another template I did had to be validated as XHTML 1.0 Transitional because of the Javascript. I noted with this template that the when you try to use an alternate stylesheet for printing that sometimes the styles from both stylesheets will be inherited. This isn't good.

To prevent this from happening you can call your two stylesheets in this way:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />
 <style type="text/css" media="screen">@import url("stylesheet.css"); </style>

The @import method for screen isn't recognized by older browsers and seems to stop the template from inheriting style from this stylesheet when you print off the web page.

You can see an example here:
http://homebusiness-websites.com/apple