Aktuelle Seite im Menü markieren

[jochberger]

Hi,
ich suche nach einer Lösung um auf der aktuell aufgerufenen Html-Seite per CSS den Link umzufärben und ein anderes Symbol vorne einzufügen.
Bei hover und so funktioniert das schon so wie ich das wollte.
Der Ausschnitt aus dem HTML:

<ul>
	<li><a href="index.html" class="aktuell">Startseite</a></li>
	<li><a href="ueberuns.html">&Uuml;ber uns</a></li>
	<li><a href="abhof.html">Ab-Hof-Verkauf</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
</ul>

Der betreffende Teil aus der CSS Datei:

#nav ul li a:link {
	background-color: #60180c;
	color: #ffff00;
	background-image: url(img/apfel_gelb.png);
	background-repeat: no-repeat;
	display: block;
	height: 1,5em;
	width: 150px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	text-decoration: none;
	text-underline: none;
}

#nav ul li a:visited {
	background-color: #60180c;
	color: #ffff00;
	background-image: url(img/apfel_gelb.png);
	background-repeat: no-repeat;
	display: block;
	height: 1,5em;
	width: 150px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	text-decoration: none;
	text-underline: none;
}

#nav ul li a:hover {
	background-color: #60180c;
	color: #00ff00;
	border-style: solid;
	border-width: 3px;
	border-color: #ffffff;
	background-image: url(img/apfel_gruen.png);
	background-repeat: no-repeat;
	display: block;
	height: 1,5em;
	width: 150px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	text-decoration: bold;
	text-underline: none;
}

#nav ul li a:visited {
	background-color: #60180c;
	color: #ffff00;
	background-image: url(img/apfel_gelb.png);
	background-repeat: no-repeat;
	display: block;
	height: 1,5em;
	width: 150px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	text-decoration: none;
	text-underline: none;
}

ul li a.aktuell {
	background-color: #60180c;
	color: #ff0000;
	background-image: url(img/apfel_rot.png);
	background-repeat: no-repeat;
	display: block;
	height: 1,5em;
	width: 150px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	text-decoration: none;
	text-underline: none;
}

Ich bin über jeden Tipp dankbar.

Lg
Jochberger

 

[djheke]

Fehlt bei deinem Selektorblock ul li a.aktuell nicht das #nav. Oder Kopierfehler?

 

[para_noid]

Ich schätze mal es fehlt auch in echt, was die nicht vorhandene Funktionsweise erklären würde (ansonsten sieht das Ganze schonmal nicht falsch aus).

Wenn du irgendwo ein anderes ul li a.aktuell hättest, würdest du dort sicher deine CSS-Angaben sehen können. Bei der Navigation aber hast du vorher eine ID #nav verwendet. IDs zählen grundsätzlich stärker als Klassen.

Der Ausdruck

#nav ul li a:link

ist also genauer als

ul li a.aktuell

und deswegen werden für deinen aktuell-Link bevorzugt die ersten Angaben und eben nicht die zweiten verwendet.

 

[jochberger]

Hallo,
Danke für eure Hinweise. Das #nav hat gefehlt, es war kein Kopierfehler. Leider hat sich an der Darstellung dadurch nichts verändert.
Der Quelltext sieht momentan so aus:

#nav ul li a.aktuell {
	background-color: #60180c;
	color: #ff0000;
	background-image: url(img/apfel_rot.png);
	background-repeat: no-repeat;
	display: block;
	height: 1,5em;
	width: 150px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	text-decoration: none;
	text-underline: none;
}

Kennt jemand noch eine Möglichkeit um diesen Efekt zu erreichen? Werden vlt. "normal" definierte Klassen von Pseudoklassen überschrieben?
Lg
jochberger

 

[para_noid]

Eigentlich nicht, die Pseudoklassen sollten unter den normalen stehen. Ich mein, du kannst es ja mal durchprobieren indem du die anderen Ausgaben einzeln auskommentierst, aber das würde mich schon wundern.
Welches Hintergrundbild wird denn aktuell beim aktiven angezeigt? Vielleicht schaust du mal mit Firebug oder was Ähnlichem drüber, da siehst du welche Styleangaben für ein Element greifen oder ggf. überschrieben werden. Sollte sich bei der Verwendung von !important auch nichts ändern hast du vielleicht ein ganz anderes Problem...

Im Übrigen kannst du dir die vielen Mehrfachangaben sparen (was so paddings und text-underline sind). Die Angaben für a:link treffen auch erstmal für alle anderen Versionen der a-tags in dem Bereich zu; du brauchst dann für hover etc. nur noch die Angaben machen, die du auch überschreiben möchtest, also in dem Fall nur color & background-image.

 

[djheke]

Da ein Link nicht auf sich selber zeigen sollte, solltest du den gesamten Link aus der aktuellen Seite etfernen und das <a> Element durch bspw. <strong> ersetzen.

CSS

#nav strong {
 ...
...
}


HTML

<div id="nav">
<ul>
	<li><strong>Startseite</strong></li>
	<li><a href="ueberuns.html">&Uuml;ber uns</a></li>
	<li><a href="abhof.html">Ab-Hof-Verkauf</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>

 

[hela]

Da ein Link nicht auf sich selber zeigen sollte, ...

... das ist zwar nicht verkehrt, aber auch kein Problem.
Ich finde nur traurig, dass bisher noch niemand den TO an die Webmaster-FAQ verwiesen hat:
Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben?