FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


How to override a:link style





eday2010
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!
TomS
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 work
eday2010
I 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) Sad
sonam
Hi,
I am not sure but maybe this instruction can help you:

http://www.w3schools.com/css/css_howto.asp

Sonam
Mosquito.Tyler
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.
sonam
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
eday2010
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.
v3rt1go
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!
eday2010
!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 Smile
welshsteve
My guess is it has to be something to do with IE6's many bugs with displaying CSS2
TomS
Afaik !important ist not a csstag but an additional thing:

{color:#RRGGBB !important; }
welshsteve
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>

ritesh26
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.
gtherockgod
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?
Mosquito.Tyler
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 Smile
Related topics
Okay, I'm done trying to use CSS for layout.
751 Useful Windows XP Files
Drop down menu things
Need help with Members area/link adder
Link Add Error
Rate My Drawing Style
Link Active status
geldbeugel in disney style
how to page up with out using link anchor ?
Making a table a link.
CSS help needed with list style menubar
Opera Nao abrindo Recados do Orkut
Simple CSS, time consuming problem.
my new site... :)
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.