Hallo,
ich bin zimelich neu in Sachen TypoScript.
Einfache Menüs habe ich schon umgesetzt, allerdings habe ich nun folgendes Problem.
Für eine Freundin habe ich ein Layout entworfen, in dem die Navigation schräg verlaufen soll, da sie sich dann besser ins Layout eingliedert. Ob das sinnvoll ist oder nicht sei mal dahin gestellt 🙂
Was genau ich damit meine seht ihr im Anhang...
Meine HTML und CSS-Dateien sieht wie folgt aus:
<div>
<ul>
<div class="navi_indent"><li><a href="Startseite.html">Startseite</a></li>
<div class="navi_indent"><li><a href="Über uns.html">Über uns</a></li>
<div class="navi_indent"><li><a href="Kontakt.html">Kontakt</a></li>
<div class="navi_indent"><li><a href="Preise.html">Preise</a></li>
<div class="navi_indent"><li><a href="Impressum.html">Impressum</a></li></div>
</div>
</div>
</div>
</div>
</ul>
</div>
[code][/code]
/* CSS Document */
html, body {
margin: 0px;
padding: 0px;
}
.navi_indent {
list-style-type: none;
position: relativ;
left:10px;
}
div {
position: relative;
}
Oje, wollte noch gar nicht abschicken.
Meine Frage nun wie setzte ich das in TS um?
Mein Problem sind die verschachtelten DIV-Elemente...
Einfach, aber ziemlich Käse:
lib.schraegesMenue = HMENU
lib.schraegesMenue {
1 = TMENU
1 {
wrap = <ul>|</ul>
NO {
allWrap = <li style="padding-left: {register:count_HMENU_MENUOBJ}em;">|</li>
allWrap.insertData = 1
}
}
}
Besser wäre es, den Listenelementen Klassen (oder IDs) zu vergeben. Die linken Paddings (oder Margins) landen dann entsprechend in die CSS-Datei.
Extra Elementen, wie div.navi_indent, brauchst Du dabei nicht. Außerdem wird der Quellcode dadurch invalide. 😉
Klassen (oder IDs) könntest Du nach einer der Methoden vergeben:
NO {
wrapItemAndSub = <li class="li-{register:count_HMENU_MENUOBJ}">|</li>
wrapItemAndSub.insertData = 1
}
# oder
NO {
allWrap = <li class="li-{elementUid}">|
wrapItemAndSub = |</li>
subst_elementUid = 1
}
# oder
NO {
before {
dataWrap = <li class="li-{field:uid}">|
}
wrapItemAndSub = |</li>
}
# oder
NO {
before.cObject = TEXT
before.cObject {
wrap = <li class="|
field = title
stdWrap {
case = lower
split {
token.char = 32
cObjNum = 1
1 {
current = 1
wrap = |-
}
}
substring = 0,-1
wrap = |">
}
}
wrapItemAndSub = |</li>
}
Hey, danke für die schnelle und ausführliche Antwort!
Ja sowas wie Klassen definieren habe ich mir gedacht, wusste aber nicht wie man das realisiert.
Die ganzen Befehle kannte ich noch nicht 🙂
mille_85 schriebHey, danke für die schnelle und ausführliche Antwort!
Bitte, gern. 🙂
mille_85 schriebJa sowas wie Klassen definieren habe ich mir gedacht, wusste aber nicht wie man das realisiert.
Die ganzen Befehle kannte ich noch nicht 🙂
Da Du den Thread nicht auf „gelöst“ gestellt hast – hattest Du denn kein Erfolg damit?