zwei Link-Farben?

[pazzi]

Mir stellt sich gerade das Problem, dass ich ein dunkles Menü und ein helles Contentfeld habe. Die Links sind jetzt farbmässig perfekt für das Menü zugeschnitten, allerdings lassen sie sich im Contentfeld nun nur noch erahnen und sind somit ziemlich schlecht lesbar.
Gibt es eine Möglichkeit wie ich jetzt zwei Link-Farben definieren kann und im a href irgendwo angeben kann, welche der zwei Definitionen benutzt werden sollen?

[Manni]

Für dein Menü sieht das dann ungefähr so aus:

a.menu { color : #FFFFFF; }
a.menu:hover { color : #FFFFFF; }
a.menu:visited { color : #FFFFFF; }
a.menu:active { color : #FFFFFF; }

Und für deinen Cotent Bereich:

a.cotent { color : #000000; }
a.cotent:hover { color : #000000; }
a.cotent:visited { color : #000000; }
a.cotent:active { color : #000000; }

Die Links machst du dann so:

<a href=#" class="menu">Link</a>
<a href=#" class="content">Link2</a>

Manni

[Jesus_666]

Kann man auch so machen:

.content a { color: #123456; }
.content a:hover { color: #789ABC; }
.content a:visited { color: #DEF123; }
.content a:active { color: #456789; }Dann werden alle <a>s, die sich innerhalb eines Tags mit der Klasse content befinden, beeinflußt. Das geht auch mit IDs:
#content a { color: #123456; }
#content a:hover { color: #789ABC; }
#content a:visited { color: #DEF123; }
#content a:active { color: #456789; }Oder mit normalen Tags:
div a { color: #123456; }
div a:hover { color: #789ABC; }
div a:visited { color: #DEF123; }
div a:active { color: #456789; }

Der Vorteil liegt klar auf der Hand: Du mußt nur einmal die Klasse/ID festlegen (in dem Tag, in dem sich der Content, bzw. die Navigation befindet) und hast hinterher mit den Links keine Arbeit mehr. Außerdem wird der Code kleiner und lesbarer, weil nicht alles mit Zuordnungen vollgemüllt ist.


PS: Noch ein Beispiel:
#navigation a { color: #FF0000; }
#content a { color: #FFFF00; }

---------------------

<table>
<tr>
<td id="navigation">
Navigation!
<a href="about:blank">Link in rot!</a>
</td>
<td id="content">
Content!
<a href="about:blank">Link in gelb!</a>
</td>
</tr>
</table>