Trenner eine eigene CSS-Klasse geben
| Autor | Nachricht |
|---|---|
|
Verfasst am: 07. 04. 2012 [16:58]
|
|
|
typo3_hp
Themenersteller
Dabei seit: 23.04.2006
Beiträge: 319
|
Hallo! Ich habe folgendes TS um ein Untermenü im Format: PUNKT 1 | PUNKT 2 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! TYPOSCRIPT 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>||</li> ACT = 1 ACT.allWrap = <li><span>|</span></li> ACT.doNotLinkIt = 1 } } [Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 07.04.2012 um 16:59.] |
 |
|
|
Verfasst am: 07. 04. 2012 [17:12]
|
|
|
db
Dabei seit: 27.02.2003
Beiträge: 461
|
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: CSS #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 |
  |
|
|
Verfasst am: 07. 04. 2012 [17:14]
|
|
|
typo3_hp
Themenersteller
Dabei seit: 23.04.2006
Beiträge: 319
|
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! |
|
|
|
Verfasst am: 07. 04. 2012 [17:20]
|
|
|
db
Dabei seit: 27.02.2003
Beiträge: 461
|
TYPOSCRIPT ... NO.allWrap=<li class="first">|</li> |*| <li class="middle">|</li> |*| <li class="last">|</li> ... CSS #subnav li.first:after, #subnav li.middle:after {content:"|";} ungetestet, aber so sollte es gehen. Viele Grüße |
|
|