| | |
Span class with different link properties
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
•
•
Join Date: Apr 2008
Posts: 41
Reputation:
Solved Threads: 1
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:
My CSS Code:
Any thoughts on where I'm going wrong?
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)
<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:
HTML and CSS Syntax (Toggle Plain Text)
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.
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.
•
•
Join Date: Jan 2008
Posts: 79
Reputation:
Solved Threads: 9
Try it like this Borderline
HTML and CSS Syntax (Toggle Plain Text)
.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;} }
![]() |
Similar Threads
- Firefox Compatibility help with script (JavaScript / DHTML / AJAX)
- has no properties... (JavaScript / DHTML / AJAX)
- problem in javascript coding in asp page (ASP)
- Pop-Up Calendar for ASP (ASP)
- Zone Alarm Security Alerts. (Viruses, Spyware and other Nasties)
- more "home search assistent" fun... (Viruses, Spyware and other Nasties)
- I can't remove about:blank (Viruses, Spyware and other Nasties)
Other Threads in the HTML and CSS Forum
- Previous Thread: Drop down
- Next Thread: HTML prob - firefox and ie...
| Thread Tools | Search this Thread |
Tag cloud for HTML and CSS
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity create css design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl





