I have attempting a small navigation system to show each page in my photo albums. I am attempting block links (coloured backgrounds, which change when the mouse hovers over them).

The page I'm working on is: http://www.equinefocus.co.uk/personal/gallery2.php

I achieved the look I wanted with the 1-4 links at the top of the page, but unfortunately, the thumbnails were affected too. I have attempted adding a span class so that the only links affected were the 1-4 ones, but it hasn't worked.

My HTML code:

<span class="links">
<a href="/photos/other/2008-04-27/page01.php">1</a>
<a href="/photos/other/2008-04-27/page02.php">2</a>
<a href="/photos/other/2008-04-27/page03.php">3</a>
<a href="/photos/other/2008-04-27/page04.php">4</a>
</span>

My CSS Code:

span.links {
	a:link {
	color: #000000;
	background-color:#99ccfb;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}

	a:visited {
	color:#000000;
	background-color:#c0c0c0;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}

	a:hover {
	color:#FFFFFF;
	background-color:#b90dbe;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}
	}

Any thoughts on where I'm going wrong?

What you need to do is create your own class to use on the links you want to change.

You can create a new class by defining it in the CSS using a . for example:

.cheese {}

You can then assign the class to the link using class="cheese" when you create the link.

All the attributes you define in that class will carry over to the link.

To change the links in class cheese define it like this:

.cheese a:hover{whatever you like}

Hope that helps. :)

Try it like this Borderline

.links a:link  {
	color: #000000;
	background-color:#99ccfb;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;
}

.links a:visited {
	color:#000000;
	background-color:#c0c0c0;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;
}

.links a:hover {
	color:#FFFFFF;
	background-color:#b90dbe;
	border: 1px solid #000000;
	padding: 5;
	text-decoration:none;}
}