HILFE: Fehler in der CSS-Datei, aber wo?

[susan.kasten]

Hallo,

ich habe ein Problem in meiner CSS-Datei, kann aber irgendwie den Fehler nicht finden. Folgendes soll gemacht werden ein aktiver Link soll in einer anderen Farbe erscheinen und im zweiten Schritt möchte ich dann auch noch eine Grafik davor einfügen.

Allerdings wird der aktive Link nicht in einer anderen Farbe dargestellt. Ich finde aber den Fehler nicht. Kann mir bitte jemand weiter helfen?

Hier der Codeausschnitt:



a:link, a:visited, a:hover
{
color: #7D7E7F;
font-size : 14px;
font-family : verdana, helvetica , arial;
font-weight: bolder;
text-decoration: none;
}
a:active
{
color: #F26522;
}

[susan.kasten]

So habe jetzt noch etwas herausgefunden. Wenn ich mir den Quelltext der ausgegebenen Seite anschaue, wird folgendes ausgegeben:


class="mainlevel" id="active_menu">


Wie kann ich für den active Bereich mit dieser id definieren? Ich habe noch nie id's im css eingefügt.

[BLUESCREEN3D]

class="mainlevel" id="active_menu">


Wie kann ich für den active Bereich mit dieser id definieren? Ich habe noch nie id's im css eingefügt.
Ungetestet:

a#active_menu:active

[susan.kasten]

Danke funktioniert.

Kann ich in der CSS-Datei auch angeben, das vor dem aktiven Link eine Grafik geladen werden soll? Und wenn ja, wie?

[jeebee]

ungetestet und CSS2 (also nicht mit IE6):
a#active_menu:before { content:url("pfad/zum/bild")} oder so ähnlich, habs jetzt einfach aus dem Kopf hingeschrieben. Vergleiche auch http://www.css4you.de/beforeafter.html

edit: code angepasst! (Annahme: id="active_menu" ist der Link wo die Grafik davor soll.)
edit2: jetzt sollte der Code so ungefähr stimmen ;)

[Pingu]

Dafür gibt es verschiedenste Möglichkeiten.

Nach CSS2.0 kann man Text einfügen <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after>. Leider wird das aber von den älteren Browsern nicht unbedingt unterstützt.
Alternativ könnte man Tricksen und das Bild als Hintergrundgrafik für das Element definiert. Wenn man dann noch einen entsprechenden Abstand (margin) definiert, dann sieht es so aus, als ob ein Bild vor dem Element existiert (siehe hier: http://www.pingu.info/travel/).

[susan.kasten]

Habe beide Möglichkeiten getestet.

Bei der Nutzung vom Content wird der active-Bereich für die id ignoriert.

Bei der Nutzung als Hintergrundgrafik wird es für den Link als Hintergrund genutzt. Margin zu setzen, heißt, dass beides gleichzeitig nach links verschoben wird.

Ich komme irgendwie nicht weiter. Kann mir nochmal jemand helfen?

[susan.kasten]

Manchmal ist die Lösung so einfach, dass man sie einfach nicht findet. Statt margin einfach padding nutzen und schon geht es.