Hallo,
bin neu bei Typo3, und versuche ein Menü mit Hintergrundbild darzustellen.
Die Menüpunkte sollen entsprechend der colgroup (s.u. TypoSkipr) positioniert sein, da die Menüpunkte mit dem Hintergrundbild zusammenhängen. Man kann sich das auch so vorstellen, dass das Hintergrundmenü aus 5 verschiedenen Bildern besteht, die als Ganzes das Hintergrundbild ergeben. Deshalb muss das Menü auch entsprechend positioniert werden. In Mozilla Firefox sieht das auch genauso aus wie es sein soll (Typo3 Skript unten) leider verweigert IE seine Dienste. Mit verschachtelten Divs bin ich auch nicht weitergekommen, da ich die Positionierung des Textes nicht in Typo3 hinbekommen habe, manuell in HTML schon. Das Problem war, für jedes Menü eine andere css class automatisch zu ziehen während das Menü aufgebaut wird, in der css class steht die Positionierung des Textes drin.
Es gibt nur max. 5 Menüpunkte. Wäre echt froh wenn mir jemand helfen könnte. Ja, ich hab schon viel ausprobiert, gefühlt das komplette Internet durchsucht ;-) und wäre wirklich dankbar
Danke im Voraus 🙂
Herzliche Grüße
Jeanny
Hier das TypoSkript:
wrap = <table style="background-image:url({$Hintergrundbild});background-repeat:no-repeat;" cellspacing="0" cellpadding="0" border="0" > <colgroup> <col width="160"> <col width="159"> <col width="160"> <col width="160"> <col width="160"> </colgroup> <tr height="122"> </tr><tr> | </tr></table>
1 = GMENU
1.expAll = 1
1.NO.wrapItemAndSub = <td align="left" valign="top" > | </td>
1.NO = 1
1.NO {
XY=100,20
backColor = #F7EFBD
10=TEXT
10.text.field = title
10.fontColor = #4A4539
10.fontFile = fileadmin/fonts/arialb.ttf
10.fonstSize = 12
10.niceText = 1
10.offset = 5,15
}
#CUR-Zustand der ersten Ebene
1.CUR = 1
1.CUR < .1.NO
#ACT-Zustand der ersten Ebene
1.ACT = 1
1.ACT < .1.CUR
#Unterseiten des Menüs berücksichtigen
2 = TMENU
2.wrap = <table cellspacing="0" cellpadding="0" border="0"><tr> <td class="menu_text"> | </td> </tr></table>
2.NO.wrapItemAndSub = |<br />
2.NO.fontSize = 10
2.CUR = 1
2.CUR < .2.NO
2.CUR.ATagParams = class="active"
}
