creating roll over buttons for a nav bar

hi all.

i have a web page at www.aashaaron.com i have posted here before, i am now trying to make it more streamlined, and easier to manage by turning the navigation bar at the bottom of the page, into rollover buttons through CSS.

i have a book which has given me some info, but here is my problem. in the origional page, i am using images to create the roll over buttons in dreamweaver mx. in CSS though, i was just using text, and teh a:link/ a:hover active etc selectors to change the style from whtie to green, when you hover over it and when you click on it.

The problem i have is that, how do i increase the space between the groups of words, without increaseing the overall word spacing. ie: the first button is 'who is aash aaron', if i use the whitespace tag here, every work gets that space, not just that group of words. am i better just to leave the nav bar in the form of buttons with images?

any info would be nice.

cheers
bret

 

how about using

then on page put some thing like

 

I guess you want more space between "Who is Aash Aaron" and "Acting Tuition", not just "Acting" and "Tuition"?

If that's correct:

<ul id="navigation">
	<li><a href="html%20pages/whoisaash.html">Who is Aash Aaron</a></li>
	<li><a href="html%20pages/tuition.htm">Acting Tuition</a></li>
	<li><a href="html%20pages/proserv.htm">Professional Services</a></li>
	<li><a href="html%20pages/filmtv.htm">Film &amp; TV Projects</a></li>
	<li><a href="html%20pages/screenplays.htm">Screenplays</a></li>
	<li><a href="html%20pages/mediastill.htm">Media &amp; Stills</a></li>
	<li><a href="html%20pages/showreels.htm">Showreels</a></li>
	<li><a href="html%20pages/contact.htm">Contact Me</a></li>
	<li><a href="index.html">Home</a></li>
</ul>

Code (markup):

CSS

* {
	margin: 0;
	padding: 0;
	background: #000;
}
img {
	border: none;
}
#navigation {
	position: absolute;
	bottom: 1px;
	left: 1px;
}
#navigation li {
	float: left;
	margin-right: 30px;
}
#navigation li a,
#navigation li a:visited {
	font: italic bold 18px/28px 'BankGothic Md BT',arial,helvetica,sans-serif;
	letter-spacing: -2px;
	display: block;
	padding: 5px 10px;
	white-space: nowrap;
	text-decoration: none;
	color: #FFF;
}
#navigation li a:hover {
	color: #0F0;
}

Code (markup):

 

^ The above code means your adding width to the anchor tag, which kind of defeats the objective (thats what padding is for).

Instead add left/right margins in your stylesheet.

#footer a { color:#fff; margin:0 10px; }

Code (markup):