Trenner eine eigene CSS-Klasse geben

typo3_hp
Jedi-Meister

0 x
390 Beiträge

0 Hilfreiche Beiträge
- Facebook
- Twitter
07. 04. 2012, 16:58

Hallo!
Ich habe folgendes TS um ein Untermenü im Format:
[b]PUNKT 1 | PUNKT 2[/b]
anzuzeigen.
Leider sind die einzelnen Punnkte unterschiedlich lang (der Text) und ich möchte den Text gerne linksbündig haben und trotzdem links und rechts einen Abstand (zwischen dem Trenner und den Menüelemente).
Daher würde ich gerne dem Trennzeichen | eine eigene CSS-Klasse zuweisen und dann von dort einen margin/padding left und right vergeben.
Wie kann ich das machen?
DANKE!
```
subparts.menX {
 entryLevel = 1
 1 = TMENU
 1{
 wrap = <div id="subnav">|</div>
 #wrap = <ul>|</ul>
 noBlur = 1
 NO = 1
 #NO.allWrap = <li>|</li>
  NO.allWrap=<li>|</li> |*| <li>&#124;|</li>
 ACT = 1
 ACT.allWrap = <li><span>|</span></li>
 ACT.doNotLinkIt = 1
 }
 }
```

db
Jedi-Meister

0 x
461 Beiträge

0 Hilfreiche Beiträge
- Facebook
- Twitter
07. 04. 2012, 17:12

Hallo,
ich würde das Trennzeichen überhaupt nicht in den HTML-Code tun, ganz einfach weil es nicht zum Inhalt gehört und deshalb im Markup nichts zu suchen hat. Du kannst das ganz einfach mit CSS lösen:
```
#subnav li:after {content:"|";}
```
Dann noch mit padding/margin die Abstände links und rechts anpassen und fertig. Um zu verhindern, daß auch beim letzten Eintrag der senkrechte Strich erscheint, kannst Du mit CSS-Klassen und Option-Split arbeiten.
Viele Grüße
typo3_hp
Jedi-Meister

0 x
390 Beiträge

0 Hilfreiche Beiträge
- Facebook
- Twitter
07. 04. 2012, 17:14

Dankeschön!
Hab ich so noch nie gemacht, aber stimmt!
Ist eine alternative.
Hast Du mir ein Beispielcode, wo ich das beim dem letzen Element deaktivieren kann?
Dankeschön!

db
Jedi-Meister

0 x

461	Beiträge
0	Hilfreiche Beiträge

07. 04. 2012, 17:20

...
  NO.allWrap=<li class="first">|</li> |*| <li class="middle">|</li> |*| <li class="last">|</li>
...

#subnav li.first:after, #subnav li.middle:after {content:"|";}

ungetestet, aber so sollte es gehen.

Viele Grüße

Zurück