How do I achive this dotted effect

Question

http://www.istockphoto.com/file_download_approved.php?RequestExtendedLicense=0&quantity_34 =1&quantity_35=1&quantity_36=1&quantity_37=1&quantity_38=1&quantity_39=1&quantity_40=1&IAg ree=&fileID=3781774&ConcreteTypeID=8&inPoint=0&outPoint=0&action=accept&x=15&y=9
To the left - at the menu - are tiny dots under each item
that seem to fade out from left to right. Is this done in CSS? Can
I do this to the menu items on this page:
http://www.gunnar.ca/environment.htm
How do I achieve this? Any help appreciated.
Thank you.

Answer 1

Hello,
The dots are an image, and it is done with CSS. The dot image
is applied as the background image in a link.
Specifically, it's applied to the bottom and given the
attributes to start on the left and not repeat.
#nav a
display: block;
font-size: 12px;
color: #000;
padding-left: 10px;
line-height: 22px;
vertical-align: middle;
background: url("/images/sidenav-dotline.png") left bottom
no-repeat;
You vertical navigation uses rollover images, so some options
are:
a) Add dots to the bottom of each image.
b) Rebuild your menu using a dotted background image on the
links like they did. (You'll lose your faded text and
over/underline that you achieved by using images but the page would
load faster).
c) Your rollover images are each in a table cell, so you
could give the table cell some padding to lift the images off the
bottom of each cell, then apply a dotted line image as the
background for each cell, positioned at the bottom left and not
repeating.
Hope that helps,
Tim