Span class with different link properties

Thread Solved

Join Date: Apr 2008
Posts: 41
Reputation: Borderline is an unknown quantity at this point 
Solved Threads: 1
Borderline Borderline is offline Offline
Light Poster

Span class with different link properties

 
0
  #1
May 10th, 2008
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?
Reply With Quote Quick reply to this message  
Join Date: May 2008
Posts: 11
Reputation: SteveKubrick is an unknown quantity at this point 
Solved Threads: 1
SteveKubrick's Avatar
SteveKubrick SteveKubrick is offline Offline
Newbie Poster

Re: Span class with different link properties

 
0
  #2
May 12th, 2008
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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2008
Posts: 79
Reputation: rudevils is an unknown quantity at this point 
Solved Threads: 9
rudevils rudevils is offline Offline
Junior Poster in Training

Re: Span class with different link properties

 
0
  #3
May 13th, 2008
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. }
If love is blind, why there's a bikini ??

Post your article at Bali Side Notes share your knowledge
Reply With Quote Quick reply to this message  
Join Date: Apr 2008
Posts: 41
Reputation: Borderline is an unknown quantity at this point 
Solved Threads: 1
Borderline Borderline is offline Offline
Light Poster

Re: Span class with different link properties

 
0
  #4
May 13th, 2008
Many thanks, problem solved!
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC