I am working on a web page that uses CSS for the links, using the a:link, a:visited, a:hover, a:active styles. I need to create a set of links that don't use these, but use a seperate style that I will define using a.link2 or something like that.
In Dreamweaver the link appears how I want, but in the browser it does not. How do I override the a:link styles on these links so they do what I want?
Thanks!
| Code: |
<style type="text/css">
a:link {color:#0000ff};
a:hover {color:#ff0000};
a:visited {color:#990099};
a:active {color:#0000ff};
a.link2:link {color:#FF0000};
a.link2:hover {color:#FF0000};
a.link2:visited {color:#FF0000};
a.link2:active {color:#FF0000};
</style>
<a href="page.htm" class="link2">This Link is yellow ;-)</a>
|
I think this should workI had come across that and it does work EXCEPT it doesn't let me change the colour. I want the inactive link colour to be different, but it is forcing it to be the colour of the regular link. It shows up correctly in Dreamweaver, but not in my web browser (IE) 
Hi,
I am not sure but maybe this instruction can help you:
http://www.w3schools.com/css/css_howto.asp
Sonam When changing link styles, you have to apply the different states in a certain order.
| Code: |
a:link{...}
a:visited{...}
a:hover{...}
a:active{...} |
If it is not in this order, it may do strange things. Check your code just to be sure. Ok I am tested this in IE and Mozila and working fine:
| Code: |
<style type="text/css">
<!--
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
a:link.second {color:#CC0000}
a:visited.second {color:navy}
a:hover.second {color:red}
a:active.second {color:purple}
-->
</style> |
HTML links:
| Code: |
<a href="index.php">kdfkkasdk</a>
<a href="index.php" class="second">kdfkkasdk</a> |
Sonam Thanks for the replies. I don't know why, but it just isn't working. It does everything I want except the colour. It makes the links the size I want and all that, but it uses the colours of the regular a:link/visited/hover/active. I'm using IE 6 on Windows 2000. I might bring the files home and check it on IE 7 and Netscape.
Hi,
I think specificity is the problem here. Try giving it a higer specificity by writing the parent tag in the selector part of the rule:
| Code: |
p a.link2:link { color:#fff; }
|
If giving the second link a higher specificity doesn't work , try giving it the !important argument:
| Code: |
a.link2 { color:#fff; !important }
|
Good luck! !important didn't work. I took the files home to see if it works on IE 7 and Netscape 8 and it does. So it's just a browser issue with IE 6 for Windows 2000. Problem solved 
My guess is it has to be something to do with IE6's many bugs with displaying CSS2
Afaik !important ist not a csstag but an additional thing:
{color:#RRGGBB !important; }
Your psuedo classes need to be written in order, and if applying a class to them it should be in the order of tag.class:pseudo_class
This is something I use.
| Code: |
<style type="text/css">
<!--
/* Blue link that turns orange on hover */
a.colours1:link, a.colours1:visited
{
color:#00f;
}
a.colours1:hover, a.colours1:active
{
color:#ffa500;
}
/* Green link that turns red on hover */
a.colours2:link, a.colours2:visited
{
color:#0f0;
}
a.colours2:hover, a.colours2:active
{
color:#f00;
}
-->
</style>
LINKS
<a class="colours1" href=#">Blue link turning orange on hover</a>
<a class="colours2" href=#">Green link turning red on hover</a>
|
now You can try this :
| Code: |
<style type="text/css">
<!--
.Linkfisrt:link {color:green}
.Linkfisrt:visited {color:yellow}
.Linkfisrt:hover {color:black}
.Linkfisrt:active {color:blue}
.Linksecond:link {color:#CC0000}
.Linksecond:visited {color:navy}
.Linksecond:hover {color:red}
.Linksecond:active {color:purple}
-->
</style>
|
Another style for css
| Code: |
<style type="text/css">
<!--
.Linkfisrt {color:green}
.Linkfisrt:visited {color:yellow}
.Linkfisrt:hover {color:black}
.Linkfisrt:active {color:blue}
.Linksecond {color:#CC0000}
.Linksecond:visited {color:navy}
.Linksecond:hover {color:red}
.Linksecond:active {color:purple}
-->
</style>
<a class="Linkfisrt" href="link.html">Link First</a>
<a class="Linksecond" href="link.html">Link Second</a>
|
I hope this will definitely works. I'd like an answer to this question as well, but I'm using images as links. Can you guys give me some tips for that?
| gtherockgod wrote: |
| I'd like an answer to this question as well, but I'm using images as links. Can you guys give me some tips for that? |
if you want images to change when you 'roll over' your link you can do it two ways. Javascript (by changing the 'src' of the img tags) or with CSS (
thing:hover{
content:url(images/...jpg;)}
)
.
www.w3schools.com will help you
