Problemen met links in classes

[Verwijderd]

Het onderstaande heb ik in mijn pagina staan, maar toch krijgen alle bezochte links dezelfde
kleur. Terwijl ik voor de wittelink iets anders heb opgegeven.

Cascading Stylesheet:

<style type="text/css">
body,td,th {font-family: Arial, Helvetica, sans-serif; font-size: 10px;}
.style1 {color: #FFFFFF;}
a:link {color: #000000; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:visited {color: #000000; text-decoration: none;}
a:hover {color: #FF6600; text-decoration: none;}
.wittelink {color: #ffffff; text-decoration: none;}
.wittelink:active {color: #ffffff; text-decoration: none;}
.wittelink:visited {color: #ffffff; text-decoration: none;}
.wittelink:hover {color: #ff6600; text-decoration: none;}
</style>
<table width="150" align="center" cellpadding="2" cellspacing="0">
<tr> 
<td width="110" align="left" valign="top"><span class="style2 style1">Logged in as  :  <span class="wittelink">$username</span></span>
</td>
</tr>
<tr> 
<td width="150" align="left" valign="top" style="padding=4;">
<div align="left"><span class="style2 style1">&#8226; </span><a href="index.php?site=loginoverview" class="wittelink">Profile overview</a><br>
<span class="style1">&#8226; </span><a href="index.php?site=myprofile" class="wittelink">Edit your profile</a><br>
<span class="style1">&#8226;</span> <a href="logout.php" class="wittelink">Logout</a> </div></td>
</tr>
</table>

[ Voor 9% gewijzigd door Verwijderd op 25-08-2007 12:51 ]

[Verwijderd]

Waarschijnlijk lig je overhoop met het cascading model; de default declaratie (a:visited) heeft voorang boven jouw declaratie (a.wit:hover). Dit kun je oplossen door "!important" toe te voegen aan jouw eigen declaratie:

Cascading Stylesheet:

a:visited { color: black }
a.wit:visited { color: pink !important}

[Verwijderd]

Verwijderd schreef op zaterdag 25 augustus 2007 @ 12:41:
Waarschijnlijk lig je overhoop met het cascading model; de default declaratie (a:visited) heeft voorang boven jouw declaratie (a.wit:hover). Dit kun je oplossen door "!important" toe te voegen aan jouw eigen declaratie:

Cascading Stylesheet:

a:visited { color: black }
a.wit:visited { color: pink !important}

Ik heb nu het volgende, maar het werkt nog niet Mijn visited links zijn nu wel van kleur veranderd
alleen werkt nu mijn hove op de wittelink niet meer.

Cascading Stylesheet:

<style type="text/css">
body,td,th {font-family: Arial, Helvetica, sans-serif; font-size: 10px;}
.style1 {color: #FFFFFF;}
a:link {color: #000000; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:visited {color: #000000; text-decoration: none;}
a:hover {color: #FF6600; text-decoration: none;}
.wittelink {color: #ffffff; text-decoration: none;}
.wittelink:active {color: #ffffff; text-decoration: none;}
.wittelink:visited {color: #ffffff !important; text-decoration: none;}
.wittelink:hover {color: #ff6600; text-decoration: none;}
</style>

[ Voor 4% gewijzigd door Verwijderd op 25-08-2007 12:54 ]

[Verwijderd]

Verwijderd schreef op zaterdag 25 augustus 2007 @ 12:50:
[...]


Ik heb nu het volgende, maar het werkt nog niet Mijn visited links zijn nu wel van kleur veranderd
alleen werkt nu mijn hove op de wittelink niet meer.

Cascading Stylesheet:

<style type="text/css">
body,td,th {font-family: Arial, Helvetica, sans-serif; font-size: 10px;}
.style1 {color: #FFFFFF;}
a:link {color: #000000; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:visited {color: #000000; text-decoration: none;}
a:hover {color: #FF6600; text-decoration: none;}
.wittelink {color: #ffffff; text-decoration: none;}
.wittelink:active {color: #ffffff; text-decoration: none;}
.wittelink:visited {color: #ffffff !important; text-decoration: none;}
.wittelink:hover {color: #ff6600; text-decoration: none;}
</style>

Het werkt
Even een quote op mijzelf, misschien handig voor de mensen met hetzelfde probleem.
Je moet dus !important in alle regels van die class zetten dan werkt het wel.
Super bedankt Weird Hobbes

[Verwijderd]

Het is niet nodig om !important te gebruiken in dit geval. Je kunt beter gewoon zorgen dat je zo specifiek mogelijk is. Je weet toch dat .whitelink altijd een a element is? Schrijf dan ook a.whitelink etcetera.

Verder geeft ik voor a elementen met verschillende states altijd de verschillende properties voor de verschillende states allemaal mee. En altijd ik de volgende volgorde: link, visited, hover, active

Voor alle properties die in elke state hetzelfde zijn, kun je gewoon de selector a gebruiken, :hover etc. kun je dan weglaten. Die gewone "a" komt altijd vóór de states.

Ik jouw geval zou ik dus het volgende schrijven:

Cascading Stylesheet:

a {
   text-decoration: none;
}

a:link,
a:visited {
   color: #000000;
}

a:hover {
   color: #FF6600;
}

a:active {
   color: #FFFFFF;
}

a.wittelink:link,
a.wittelink:visited {
   color: #FFFFFF;
}

a.wittelink:hover {
   color: #FF6600;
}

a.wittelink:active {
   color: #FFFFFF;
}

Verder slaat de naam "whitelink" natuurlijk nergens op. Beschrijf waarom die links een andere kleur moeten krijgen (als je het niet al gewoon met creatief gebruik van selectors kunt oplossen), en gebruik dus geen kleuren in je class namen.

Als je voor dit soort dingen !important gaat gebruiken, introduceer je problemen als je erg grote, ingewikkelde documenten moet gaan stijlen.

[ Voor 6% gewijzigd door Verwijderd op 25-08-2007 13:00 ]

[Verwijderd]

Verwijderd schreef op zaterdag 25 augustus 2007 @ 12:50:
Ik heb nu het volgende, maar het werkt nog niet Mijn visited links zijn nu wel van kleur veranderd
alleen werkt nu mijn hove op de wittelink niet meer.

Zojuist heb ik jouw code uit de openingspost gebruikt, en op Mozilla Firefox (2.0.0.3, Debian Testing) werkt het naar behoren, ook zonder de !important-toevoeging. Probeer je het uit op IE, of op een andere browser?

In Firefox werkt de hover op de bezochte witte link wel; als ik hover, wordt 'ie oranje.