Das ist bestimmt schon vielen aufgefallen: Typo3 erzeugt eine falsche Reihenfolge der HTML-Tags, wenn man über das Template-Setup einem Link ein spezielles Format zuordnen will.
Beispiel:
Die Typoscript-Anweisung ACT.wrap = <strong>|</strong> erzeugt für den aktiven Link in einem TMENU diesen Link: <strong><a xxx>Link</a></strong>. Normalerweise müsste die Verschachtelung aber so aussehen: <a xxx><strong>Link</strong></a>.
Obwohl <strong> den eingeschlossenen Text auch ohne spezielle CSS-Formatierung von selbst fettet, bleibt hier die Wirkung aus. Sie wird von der vorhandenen Formatierung für den normalen Link überschrieben.
Effekt: Der Link ist nicht fett und die Kennzeichnung des Aktivstatus bleibt aus. Das gleiche gilt auch für ein umschließendes <span> dem z.B. eine Klasse .bold zugeordnet wird.
Was hilft dagegen?
Da die o.g. Links in Typo3 dynamisch von System generiert werden, lässt sich die Formatierung nicht an die richtige Stelle schreiben. Also kann man das nur mit CSS ausbügeln. Für das Strong-Beispiel ginge das beispielsweise so:
CSS-Code:
strong a {
font-weight: bold;
}
Der Fettdruck von “strong” wird durch das nachfolgende “a” mit dem Normalformat überschrieben. Um das aufzuheben, benötigt der Link “a” innerhalb von “strong” eine neue, eigene Formatierung. Gleiches gilt für andere Element-Verschachtelungen wie “span” oder “p”.
Fazit:
Auch ohne eine explizite Klassenzuweisung, lassen sich verschachtelte Elemente allein per CSS stylen. Das ist insbesondere bei mehrfach verschachtelten Linklisten innerhalb von Textmenüs interessant und verschlankt den Quellcode enorm. Das Stichwort hier heisst “Kontext sensitiv”.
8. Januar 2007 um 12:51 Uhr
Da gibt es unterschiedliche Ansätze, wobei meiner nicht der übliche Typo3-Ansatz ist. Für a) unterschiedlich gestylte Level lasse ich Typo3 eine verschachtelte Liste erzeugen und style sie lediglich über CSS. Bei mir macht das die Angabe “wrapItemAndSub”. Das führt allerdings dazu, dass die von Kai genannten Lösungen nicht greifen.
Du kannst aber in Typoscript die verschiedenen Level mit je einer anderen Klasse versehen und die per CSS stylen.
Hier ein Beispiel von Kai:
Für b) unterschiedlich gestaltete Menüs nutze ich auch wieder den Kontext, in dem das Menü steht.
Konkret: Die Menüs bekommen im Template unterschiedliche Namen (IDs oder Klassen). Z.B. so: (runde Klammern durch spitze ersetzen!):
(div id=”kopfmenue”)
(div id=”menueLinks”)
(div id=”menueRechts”)
Dann kann man im CSS für jeden Bereich einen anderen Stil für die Links erzeugen. Da ich statische Designvorlagen mit Markern nutze, kann ich den jeweiligen DIV-Container direkt in der Vorlage definieren, ohne Typoscript.
CSS-Beispiel (nur Auszug; runde Klammer durch geschweifte ersetzen!):
#kopfmenue li a (color: #000; background: #fff;)
#kopfmenue li a:hover (color: #fff; background: #000;)
#menueLinks li a (color: #ff0000; background: transparent;)
#menueRechts li a:hover (color: #fff; background: #ff0000;)
So kannst du nicht nur Menüs sondern alle DIV-Container unterschiedlich auszeichnen. Wichtig ist dabei, dass du die gewünschte Umgebung (z.B. #kopfmenue) im CSS benennst. Dann brauchst du im Template nichts weiter anzugeben als den DIV-Bereich und den Listenpunkt mit Link. Die Unterschiedlichen Farben werden automatisch vom Stylesheet gesetzt.
7. Januar 2007 um 23:00 Uhr
aller guten Dinge sind ja 3
Wir können mit dem bislang Gesagten im Menü z.B. mein Link
und mein Link> realisieren.
Jetzt fehlt nur noch eine Variante.
mein Link
Hat jemand eine Idee, wie das geht?
Das würde z.B die Möglichkeit eröffnen die Links in den einzelnen Leveln eines Menüs unterschiedlich zu stylen.
Wäre auch hilfreich, wenn mehrere Menüs auf der Seite unterschiedlich gestaltet werden müssen.
3. Oktober 2006 um 12:09 Uhr
Vielen Dank, gut zu wissen. Ich hatte es wie oben versucht, aber mir hat es dann nicht funktioniert. Das liegt aber vermutlich an meinem Gesamtkonstrukt. Deine Lösung ist schön einfach und sicher für andere Anwendungen gut zu gebrauchen.
2. Oktober 2006 um 19:13 Uhr
Runde Klammern durch spitze ersetzen:
ACT.linkWrap = (strong)|(/strong)
ACT.ATagBeforeWrap = 1
Mit Deinem Konstrukt hat das natürlich nicht viel zu tun. Entscheidend ist die zweite Zeile – damit lässt sich das normale Verhalten – linkWrap wird UM das a-Element gelegt – umgedreht: der linkWrap landet innerhalb des a-Elements (um den verlinkten Text).
Wenn Du gar keinen Link hast, brauchst Du das natürlich auch nicht.
2. Oktober 2006 um 11:12 Uhr
sorry, aber unser Blog hat seine Probleme mit der Angabe von Quellcode. Ich verwende:
CUR = 1
CUR.doNotLinkIt = 1
CUR.wrapItemAndSub = li.span|/span./li
(die Tagklammern muss ich leider weglassen)
2. Oktober 2006 um 11:00 Uhr
Vielen Dank für den Hinweis.
Aber kannst du mich gerade von der Leitung holen, auf der ich zu stehen scheine
:
Wo bringe ich dann das “strong” unter? Ich habe deine 2 Zeilen nach der o.g. wrap-Angabe getestet. Hat aber nicht funktioniert. Dann habe ich andere Variationen ausprobiert. Ging auch nicht. Vielleicht liegt es auch an den Grundeinstellungen für meine Testseite, auf der ich eigentlich ein anderes Konstrukt verwende, nämlich
CUR = 1
CUR.doNotLinkIt = 1
CUR.wrapItemAndSub = |
damit die aktive Seite eben keinen Link hat. Und das “span” ist über CSS gestylt.
Nochmal Danke
Renate
30. September 2006 um 19:47 Uhr
Um den im Innern des Links befindlichen Text zu wrappen, hilft dieses TypoScript:
ACT.linkWrap = |
ACT.ATagBeforeWrap = 1