Links unterschiedlich darstellen

Salve
Ich weiss, das es möglich ist. Aber weder auf CSS4You noch bei Björn habe ich eine Antwort auf meine Frage gefunden. Vielleicht suche auch auch am falschen Ort.

Wie immer geht es um mein Baby, das WD. Ich habe dort nun eine separate Navi eingebaut. Nun werden alle Links gleich dargestellt, obwohl ich eigentlich andere Anweisungen gegeben habe. Nach etwas suchen bin ich auf "class" gestossen und denke, dass dies eine Lösung sein könnte. Aber wie sag ich das meinem CSS?

Hier mal ein Auszug, wie ich die Links haben möchte in der Navi:

a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #000099;
	text-decoration: none;
	background-image: url(/images/bg-nav.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #000099;
	text-decoration: none;
	background-image: url(/images/bg-nav.png);
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;

}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #CC0033;
	text-decoration: underline overline;
	background-color: #FFFFFF;

}

link, visited & hover unterscheiden sich aus dem Grund, weil ich etwas damit experimentiert habe. Insbesondere mit dem Hintergrund, da ich einen weissen "Button" hinter den Links anzeigen lassen wollte. Wollte, weil es nicht geklappt hat. Ich vermute, das es an den verschiedenen Anweisungen liegt.

Bin gespannt auf Eure Antwort....
Gruss
Christian

Salve Jörg
Prompt wie immer.... :)

Ich will die Links aber nicht in einer Liste, sondern nebeneinander. Wenn ich das richtig lese, werde ich mit Deinem Beispiel alle Links in der ul mit der id navi ansprechen. Richtig? ich bräuchte ein

a link id="navi"

Irgendwie so:

#navi a:link {
/* Eigenschaften */
}
#navi a:visited {
/* Eigenschaften */
}
#navi a:hover {
/* Eigenschaften */
}

Dann müsste ein Link im Prinzip wie aussehen?

<a href="link.html" class id="navi">Link</a>

Würde das in etwa stimmen?

Gruss
Christian

Salve

Noch eine Frage: Ist es möglich, dass ich die Anweisungen für das div navi vor den Anweisungen für den Rest des Dokumentes setzen muss, wenn die anderen Anweisungen für Links nicht einem bestimmten div ausgeführt werden sollen?

Gruss
Christian

hmmm. ich habs jetzt umgekehrt probiert und nun klappts.... :)

Aber da kommen eh noch mehr Selektoren und ich muss das CSS neu strukturieren.

Thx für Deine Hilfe.... ich komme wieder, keine Frage!

kommt doch noch was.....

das Hintergrundbild hinter dem Linktext wird nicht angezeigt, weiss Du wieso?

#navi a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
	background-image: url(/images/bg-nav.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-weight: bold;

}

#navi a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(/images/bg-nav.png);
	background-attachment: fixed;
	background-repeat: no-repeat;

}
#navi a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #CC0033;
	text-decoration: underline overline;
	background-image: url(/images/bg-nav.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-weight: bold;

}