Zur Navigation

Links unterschiedlich darstellen

1 Christian

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

---- nix Signatur

02.02.2007 08:52

2 Jörg

Hallo Christian,

wenn ich dich richtig verstanden habe, möchtest du, dass eine Klasse von Links anders dargestellt wird, als die allgemeinen Links?

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?

Ja, as wäre eine Möglichkeit. Eine Unterscheidung lässt sich in diesem Fall aber vielleicht noch eleganter umsetzen, nämlich anhand der ID der Navigation:

<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

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

02.02.2007 10:42 | geändert: 02.02.2007 10:44

3 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

---- nix Signatur

02.02.2007 11:02

4 Jörg

Ich will die Links aber nicht in einer Liste, sondern nebeneinander.

Eiene Liste lässt sich auch so formatieren, dass die Menüpunkte nebeneinander stehen (z.B. mit display:inline für li). Aber falls du ein übergeordnetes Div hast, kannst du natürlich auch diesem die betreffende ID verpassen

<div id="navi">

<!-- Links -->

</div>

... und dann halt:

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

Du kannst die Links natürlich aber auch einzeln mit einer Klasse kennzeichnen:

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

Die Klasse wird mit einem Punkt gekennzeichnet:

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

Die erste Lösung mit der Kennzeichnung durch die ID eines übergeordneten Elementes ist ein klein wenig eleganter, da du die einzelnen Links dann nicht kennzeichnen brauchst

02.02.2007 11:13

5 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

---- nix Signatur

02.02.2007 11:46

6 Jörg

Als erstes sollten die allgemeinen Selektoren aufgeführt werden, danach die speziellen; also diese Reihenfolge:

a:link {
color:blue;
}

/* a:visited, a:hover etc. */

#navi a:link {
color:green;
}

Alle unbesuchten Links sind dann blau, außer die innerhalb von #navi, die sind dann grün

Analog für die Klassenlösung:

a:link {
color:blue;
}

/* a:visited, a:hover etc. */

a.navi:link {
color:green;
}

02.02.2007 11:52 | geändert: 02.02.2007 11:54

7 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!

---- nix Signatur

02.02.2007 12:28

8 Jörg

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

Ja, eigentlich ist die Unterscheidung auch ohne diese Reihenfolge schon eindeutig - aber ich hatte auch schon Fälle, in denen ein Browser für die gewünschte Darstellung diese Reihenefolge von allgemeinen zu spezielleren Selektoren hin benötigte.

02.02.2007 12:37

9 Christian

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;

}

---- nix Signatur

02.02.2007 14:12

10 Jörg

Probier es mal ohne 'background-attachment: fixed;' - das macht dort meiner Meinung nach auch wenig Sinn?

02.02.2007 14:27