Everything I ever wanted to specify for links on my site is safely tucked away in a stylesheet. When I have needed to, I have successfully overridden font size and font face of the clickable text, which otherwise are determined by stylesheet contents.
But now I am adding a special temporary link to a navigation bar and I want to give it some punch by changing the color for just that link ... text, vlink and hover. Everything I've experimented with is ignored and the link appears just like every other link in the bar, i.e., per the stylesheet specs.
Ideas?Can't you just use a class or ID (making sure it's definition is after all other link classes)?
CSS:
a:link {
/*Default styles*/
}
#menu a:link {
/*Menu style*/
}
HTML:
<p id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu</a>
</p>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Main</a>
</p>Thank you ... I tried your CLASS suggestion and it worked. I had initially hoped I could use HTML to trump CSS, but it seems that I really needed more CSS to trump CSS. Like so:
CSS
A.link { color: green }
A.visited { color: green }
A.hover { color: red }
A.SPECIALCASE.link { color: orange }
A.SPECIALCASE.visited { color: orange }
A.SPECIALCASE.hover { color: red }
HTML
<a href=http://www.webdeveloper.com/forum/archive/index.php/"oldpage.shtml">GREEN TEXT</a>
<a class="SPECIALCASE" href=http://www.webdeveloper.com/forum/archive/index.php/"newpage.shtml">ORANGE TEXT</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"anotheroldpage.shtml">GREEN TEXT</a>
This worked nicely in IE 5.5. Except that hover doesn't work, I could otherwise say it worked in NS 4.79. It did not work in NS 6.2.3 or NS 7.0, that is, all links were green (though hover does work in those browsers).
All in all, success! (I long ago quit worrying about the benighted few who continue to use Netscape and any others who won't come in out of the rain.)
10 gratitons* to Rick Bull.
* International Standard Unit of Gratitude
glad it worked. I think you may find that the hover isn't working in some browsers because you code is a little off. Use a semi-colon instead of a dot for pseudo classes (e.g. hover):
A:link { color: green }
A:visited { color: green }
A:hover { color: red }
A.SPECIALCASE:link { color: orange }
A.SPECIALCASE:visited { color: orange }
A.SPECIALCASE:hover { color: red }
Also orange is not a valid colour, and won't work in some browsers, so really you should use the hex equivilant (sorry can't remember it off the top of my head).oops ... sloppy typing on my part ... had i cut and pasted, the colons would be there rather than the periods
also, i just picked color names as illustrative for this posting. the real thing is at <!-- m --><a class="postlink" href="http://www.iosoc.com/Scripts/iosA.css">http://www.iosoc.com/Scripts/iosA.css</a><!-- m --> (open with notepad) and its usage is on the homepage
now let me muse about a real challenge ... suppose i had too much time on my hands and wanted to call attention to the "special" link by making each letter in the clickable text a different color ... i know it's frivolous, but is there an easier way than to make each individual letter a separate link with its own class?Originally posted by tom_f
making each letter in the clickable text a different color
<a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="rainbow">L<span class="one">I</span><span class="two">N</span><span class="three">K</span></a>
and I think you'll manage on your own from there
But now I am adding a special temporary link to a navigation bar and I want to give it some punch by changing the color for just that link ... text, vlink and hover. Everything I've experimented with is ignored and the link appears just like every other link in the bar, i.e., per the stylesheet specs.
Ideas?Can't you just use a class or ID (making sure it's definition is after all other link classes)?
CSS:
a:link {
/*Default styles*/
}
#menu a:link {
/*Menu style*/
}
HTML:
<p id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu</a>
</p>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Main</a>
</p>Thank you ... I tried your CLASS suggestion and it worked. I had initially hoped I could use HTML to trump CSS, but it seems that I really needed more CSS to trump CSS. Like so:
CSS
A.link { color: green }
A.visited { color: green }
A.hover { color: red }
A.SPECIALCASE.link { color: orange }
A.SPECIALCASE.visited { color: orange }
A.SPECIALCASE.hover { color: red }
HTML
<a href=http://www.webdeveloper.com/forum/archive/index.php/"oldpage.shtml">GREEN TEXT</a>
<a class="SPECIALCASE" href=http://www.webdeveloper.com/forum/archive/index.php/"newpage.shtml">ORANGE TEXT</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"anotheroldpage.shtml">GREEN TEXT</a>
This worked nicely in IE 5.5. Except that hover doesn't work, I could otherwise say it worked in NS 4.79. It did not work in NS 6.2.3 or NS 7.0, that is, all links were green (though hover does work in those browsers).
All in all, success! (I long ago quit worrying about the benighted few who continue to use Netscape and any others who won't come in out of the rain.)
10 gratitons* to Rick Bull.
* International Standard Unit of Gratitude
glad it worked. I think you may find that the hover isn't working in some browsers because you code is a little off. Use a semi-colon instead of a dot for pseudo classes (e.g. hover):A:link { color: green }
A:visited { color: green }
A:hover { color: red }
A.SPECIALCASE:link { color: orange }
A.SPECIALCASE:visited { color: orange }
A.SPECIALCASE:hover { color: red }
Also orange is not a valid colour, and won't work in some browsers, so really you should use the hex equivilant (sorry can't remember it off the top of my head).oops ... sloppy typing on my part ... had i cut and pasted, the colons would be there rather than the periods
also, i just picked color names as illustrative for this posting. the real thing is at <!-- m --><a class="postlink" href="http://www.iosoc.com/Scripts/iosA.css">http://www.iosoc.com/Scripts/iosA.css</a><!-- m --> (open with notepad) and its usage is on the homepage
now let me muse about a real challenge ... suppose i had too much time on my hands and wanted to call attention to the "special" link by making each letter in the clickable text a different color ... i know it's frivolous, but is there an easier way than to make each individual letter a separate link with its own class?Originally posted by tom_f
making each letter in the clickable text a different color
<a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="rainbow">L<span class="one">I</span><span class="two">N</span><span class="three">K</span></a>
and I think you'll manage on your own from there