Aktiver Link wird durch CSS nicht formatiert

[Verena]

Hallo zusammen,

manchmal sieht man ja den Wald vor lauter Bäumen nicht...

Ich habe eine Menüliste über ein Modul (eigener HTML-Code) selbst erstellt.
Dadurch ergab sich folgender Code

<div id="headernavigation">
<ul>
<li>{{link_open::2}}seite 1 |</a></li>
<li>{{link_open::3}}seite 2 |</a></li>
....
</ul>
</div>

Welche Angaben sollte ich nun im CSS hinterlegen, dass der ausgewählte Link die gleichen Formatierungen übernimmt, die er auch beim Hover-Effekt anzeigt?

a:active scheint er irgendwie nicht akzeptieren zu wollen.

Danke schon jetzt für die Unterstützung.
Grüße
Verena

[Nina]

Die einfache Unterteilung funktioniert z. B. so:

.mod_navigation li a:link, .mod_navigation li a:visited {  color: #ff0000; }

.mod_navigation li a:hover, .mod_navigation li a:focus, 
.mod_navigation li a:active,.mod_navigation  li span { 
color: #0000ff; font-weight: bold;
}

So würde die gerade aktive Seite in der Navigation (in TYPOlight standardmäßig ein SPAN) genauso angezeigt wie ein Navigationspunkt über den man gerade mit der Maus drüberfährt, der gerade aktiviert wird oder den man z. B. mit der Tastatur fokusiert.

[Stephan]

Nina, da Verena ihre Navigation mittels Modul vom Typ Eigener HTML-Code realisiert hat, wird das so nicht funktionieren.

Verena, muss es unbedingt ein von Hand eingegebener HTML-Code sein, der dein Menü generiert? Besser wäre es nämlich, die Navigation z.B. durch ein Modul vom Typ Individuelle Navigation zu erstellen. Damit wird automatisch ein <span>-Element um den aktiven Menüpunkt gelegt, das du, wie Nina beschrieben hat, mit CSS ansprechen kannst.

[Verena]

Hallo Nina,

das mit li a:acitve... hatte ich bereits probiert ... klappte leider nicht.

Hallo Stephan,

ja, wird wohl zwangsläufig nicht anders gehen, wenn die von Nina angesprochene und von mir bereits ausprobierte Möglichkeit nicht greift, oder gibts doch noch was anderes?

Grüße
Verena

[Thomas]

Das liegt daran, dass TL in dieser Form des Menüs den aktiven Link nicht mit <strong></strong> oder <span></span> umschließt, sobald man ihn angeklickt hat.
Warum TL aber a:active ohne strong oder span nicht akzeptiert habe ich noch nicht herausgefunden.
Ich stand letztens vor dem selben Problem, habe mich dann aber um etwas anderes gekümmert, da es für mich nicht so gewichtig war/ist.

Die Deklaration scheint auch nur wirksam, solange man mit gedrückter Mousetaste den Link geklickt hält, nur gehalten wird sie nicht wenn man los läßt.

Vielleicht hat das ja schonmal Jemand auf anderem Weg gelöst.

[john68]

Hi, wenn ich dich richtig verstehe, möchtest du den aktiven Navigationspunkt "highlighten" und die CSS Definitionen werden nicht übernommen. So was kann auch einem Hierarchieproblem liegen, wenn die richtige Klasse angesprochen wird. Um das zu testen, kann man mittels !important die Hierarchie hoch setzen:

also beispielsweise: .active {font-weight: bold !important;}

[Stephan]

Warum TL aber a:active ohne strong oder span nicht akzeptiert habe ich noch nicht herausgefunden.

Thomas, den Satz verstehe ich nicht. Könntest du ihn mir genauer erklären?

Ich vermute aber, du verwechselst da etwas. Nur um sicher zu gehen, dass wir beide vom Gleichen reden, es gibt zwei unterschiedliche »active«-Klassen:

• :active → Pseudoklasse, die in der Regel für Links eingesetzt wird
• .active → normale Klasse, die TYPOlight in den Modulen Navigationsmenü bzw. Individuelle Navigation an den gerade aktiven Listenpunkt <li> sowie dessen mit einem <span> umschlossen Inhalt vergibt

Der Unterschied liegt in der Gebrauchsweise. Die Pseudoklasse :active tritt dann in Erscheinung, wenn man mit der Mouse auf einen Link klickt und somit den Link »aktiviert«. Die normale Klasse .active dagegen kennzeichnet lediglich den aktiven Menüpunkt in TYPOlight und kann zum Stylen benutzt werden (muss aber nicht). Leo hätte sie auch .geklickt oder .benutzt nennen können, semantisch besser ist jedoch .active.

Verena, da du in deinem Beispielcode Insert-Tags für dein Menü verwendest, gehe ich davon aus, dass du lokale Seiten deiner TYPOlight-Umgebung ansteuerst. Warum also nicht das Modul Individuelle Navigation dafür benutzen, es kommt doch aufs Gleiche raus. Oder welchen Nutzen hat der von Hand geschriebene Code? Ansonsten fallen mir nur umständliche Methoden mit mehren Seitenlayouts und unterschiedlichen Eigenen HTML-Code-Modulen ein. Mit PHP-Abfragen ginge das sicherlich auch, aber warum kompliziert, wenn es auch einfach geht?

[Thomas]

Du hast das schon richtig interpretiert, ich meinte die Pseudoklasse!

Durch die Klasse .active wird es dann wesentlich einfacher, wenn man das weiß. Ich hatte es halt übersehen.
Ich bin es halt nicht gewohnt, Klassen auf diese Art vordeklariert zu bekommen.

Jetzt habe ich das auch verstanden!

Zusätzlich kann man dann mit .trail z.B. die 1. Ebene einer Navigation aktiviert deklarieren.

Daran kannst Du mal sehen, dass ich vorher mit nicht so durchdachten Systemen gearbeitet habe.

Danke für die Erklärung.

[Verena]

Hallo Stephan,

ja, ich werde wohl auf die individuelle Navigation zurückgreifen.
Ich habe in dem Menü einen Seitentitel, der aus zwei Farben bestehen muss. Das lies sich irgendwie für mich schneller über den eigenen Code realisieren.
Aber letztlich sollte ich dies ja auch über <span> oder ähnlichem umgesetzt bekommen.

Grüße
Verena

P.S: Danke noch mal für Eure Antworten