Ein Freund und ich arbeiten im Rahmen eines Studienprojekts an der Umsetzung eines Touchscreenterminals mit Typo3 als CMS. Obwohl das Ganze für uns Neuland war, sind wir mittlerweile recht hat. ein Problem bereit uns allerdings schon seit einiger Zeit Kopfschmerzen.
Und zwar haben wir Menüseiten, auf denen in der Mitte in zwei Reihen Buttons erscheinen sollen, die der Benutzer klicken kann. Auf den Buttons sind die Seitentiel der nachfolgenden Unterseiten, sowie teilweise noch ein kleines Logo der Seite, zu der der Button führt.
Unser TS code sieht folgendermaßen aus:
# Buttonmenu
list.mymenu = HMENU
list.mymenu.special = directory
list.mymenu.special.value.data = page:uid
# First level menu-object, textual
list.mymenu.1 = TMENU
list.mymenu.1.NO {
# Normal state properties
noBlur = 1
allWrap = |
ATagBeforeWrap = 1
ATagParams= |*| class="buttonleft" onfocus="this.blur()"| || class="buttonright" onfocus="this.blur()"| |*|
linkWrap = <div class="buttontext">|</div>
stdWrap.htmlSpecialChars = 1
stdWrap.prepend = IMAGE
stdWrap.prepend.file.width= 55
stdWrap.prepend.file.height = 55
stdWrap.prepend.file = fileadmin/templates/images/clear.gif
stdWrap.prepend.file {
import.field = media
import = fileadmin/user_upload/buttonlogos/
import.listNum = 0
width= 55
height=55
}
stdWrap.prepend.wrap = <span class="icon">|</span>
}
"Buttonleft" und "Buttonright" sind dabei Klassen für den href. Die rechten buttons sind mir float:right neben den linken plaziert, daher brauchen wir die 2 Klassen.
Das Problem ist, dass damit das Bild aus dem Buttonlogos-Ordner innerhalb von dem LinkWrap mit der Klasse "buttontext" landet, es soll aber außerhalb stehen, damit ich mit der Klasse "icon" das Bild und mit "Buttontext" den Menütext separat ausrichten kann. Das kleine Logo soll nämlich ganz oben links auf dem Button stehen, der Text hingegen möglichst in der Mitte des Buttons.
Nochmal als Beispiel im HTML:
Was ich habe ist das.
<a href="index.php?id=11" onfocus="this.blur()" class="buttonleft"><div class="buttontext"><img src="typo3temp/pics/76a3335e56.png" width="55" height="55" border="0" alt="" title="" />Maier-Leibniz-Lab (MLL)</div></a>
Was ich möchte ist das:
<a href="index.php?id=11" onfocus="this.blur()" class="buttonleft"><img src="typo3temp/pics/76a3335e56.png" width="55" height="55" border="0" alt="" title="" /><div class="buttontext">Maier-Leibniz-Lab (MLL)</div></a>
Geht das irgendwie mit Typoscript? Falls ja, wie? Ich vermute mal unser Menücode ist alles andere als perfekt, ich bin also sehr dankbar für jegliche Hinweise, die das aufräumen des Codes und/oder die Lösung unseres Problems betreffen. :o