943,589 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Span class with different link properties
Ad:
Permalink
May 10th, 2008
0

Span class with different link properties

Expand Post »
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:

HTML and CSS Syntax (Toggle Plain Text)
  1. <span class="links">
  2. <a href="/photos/other/2008-04-27/page01.php">1</a>
  3. <a href="/photos/other/2008-04-27/page02.php">2</a>
  4. <a href="/photos/other/2008-04-27/page03.php">3</a>
  5. <a href="/photos/other/2008-04-27/page04.php">4</a>
  6. </span>

My CSS Code:
HTML and CSS Syntax (Toggle Plain Text)
  1. span.links {
  2. 	a:link {
  3. 	color: #000000;
  4. 	background-color:#99ccfb;
  5. 	border: 1px solid #000000;
  6. 	padding: 5;
  7. 	text-decoration:none;}
  8.  
  9. 	a:visited {
  10. 	color:#000000;
  11. 	background-color:#c0c0c0;
  12. 	border: 1px solid #000000;
  13. 	padding: 5;
  14. 	text-decoration:none;}
  15.  
  16. 	a:hover {
  17. 	color:#FFFFFF;
  18. 	background-color:#b90dbe;
  19. 	border: 1px solid #000000;
  20. 	padding: 5;
  21. 	text-decoration:none;}
  22. 	}

Any thoughts on where I'm going wrong?
Similar Threads
Reputation Points: 11
Solved Threads: 1
Light Poster
Borderline is offline Offline
49 posts
since Apr 2008
Permalink
May 12th, 2008
0

Re: Span class with different link properties

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.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
SteveKubrick is offline Offline
11 posts
since May 2008
Permalink
May 13th, 2008
0

Re: Span class with different link properties

Try it like this Borderline

HTML and CSS Syntax (Toggle Plain Text)
  1. .links a:link  {
  2. 	color: #000000;
  3. 	background-color:#99ccfb;
  4. 	border: 1px solid #000000;
  5. 	padding: 5;
  6. 	text-decoration:none;
  7. }
  8.  
  9. .links a:visited {
  10. 	color:#000000;
  11. 	background-color:#c0c0c0;
  12. 	border: 1px solid #000000;
  13. 	padding: 5;
  14. 	text-decoration:none;
  15. }
  16.  
  17. .links a:hover {
  18. 	color:#FFFFFF;
  19. 	background-color:#b90dbe;
  20. 	border: 1px solid #000000;
  21. 	padding: 5;
  22. 	text-decoration:none;}
  23. }
Reputation Points: 10
Solved Threads: 10
Junior Poster in Training
rudevils is offline Offline
80 posts
since Jan 2008
Permalink
May 13th, 2008
0

Re: Span class with different link properties

Many thanks, problem solved!
Reputation Points: 11
Solved Threads: 1
Light Poster
Borderline is offline Offline
49 posts
since Apr 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Drop down
Next Thread in HTML and CSS Forum Timeline: HTML prob - firefox and ie...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC