Hallo allerseits, ich habe ein Menü dass so aussieht:
Bild: newsletteronline.ch/…/bild1.jpg
Das TypoScript sieht so aus:
page.10.marks.MENU = HMENU
page.10.marks.MENU.1 = TMENU
page.10.marks.MENU.1 {
wrap = <table width="130" height="72" cellpadding="0" cellspacing="1" class="h1"><tr></tr> | </table>
NO {
linkWrap = <font face="Arial" size="2" color="black"><b> |</b></font>
allWrap = <tr><td><img src="clear.gif" width="1" height="1" vspace="3" border="0" alt="" /><br /> | </td></tr>
}
}
page.10.marks.MENU.2 = TMENU
page.10.marks.MENU.2 {
wrap = <tr><td nowrap=""> | </td></tr>
target = page
NO {
expAll = 0
RO = 1
after = <br />
ATagBeforeWrap = 1
linkWrap= <font face="Verdana" size="2" color="333399"> | </font>
}
}
Ich möchte jedoch das es so aussieht:
Bild: newsletteronline.ch/…/bild2.jpg
Den Pfeil gibts als gif unter fileadmin/images/arrow.gif
Wie muss nun das TypoScript aussehen? Kann mir da jemand weiterhelfen?
Sollte dann etwa so aussehen:
(grafik)Menüpunkt1
(grafik)Menüpunkt2
-----------Ebene2 von Menüpunkt 2
(grafik)Menüpunkt3
(grafik)Menüpunkt4
usw.
Danke für eure Antworten!
Einfach in den Bereich in dem du es willst mit beforeImg = arbeiten. Bei dir bleibt also nur im NO
siehe auch in der Ref: https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Tmenuitem.html
das mit beforeImg hat nicht geklappt, habe es vermutlich am falschen ort eingefütgt.
Wo müsste das gemäss meinem Code hin?
Danke!
NO {
...
beforeImg =
...
}
Ich habe gerade ein ähnliches Problem. Zunächst mal zum Problem des Threadstellers. Wenn du lediglich ein und die selbe Grafik vor alle Menüpunkte einer Ebene haben willst, dann braucht man eigentlich nichts weiter zu machen, als die Menüpunkte mit CSS entsprechend zu formatieren. Beispiel:
# Main Navigation
subparts.LEFTNAV = HMENU
subparts.LEFTNAV.1 = TMENU
subparts.LEFTNAV.1 {
NO.allWrap = <div class="sublevel"><ul> | </ul></div>
NO.linkWrap = <li> | </li>
ACT = 1
ACT.allWrap = <div class="sublevel"><ul> | </ul></div>
ACT.linkWrap = <li id="sublevelactive"> | </li>
}
In die CSS Datei dann in etwa sowas hier:
.sublevel a:link, .sublevel a:visited {
text-decoration : none;
paading : 0 0 0 20px;
background : url('../images/deinbild.png') 0 50% no-repeat;
}
Mein Problem - Menü mit unterschiedlichen Grafiken dynamisch geladen
Im Grund möchte ich auch ein Menü mit Bildern vornedrann. Allerdings soll das Bild dynamisch aus dem "Dateien" Feld der jeweiliegen Seite ausgelesen werden. Hat dazu jemand eine Idee? Im Grund soll es so aussehen:
-----------------------------
BILD01 Menütext 01
-----------------------------
BILD02 Menütext 02
-----------------------------
BILD03 Menütext 03
-----------------------------
...
Problem für mich ist 1. wie komme ich an die Dateinamen aus dem Dateienfeld der einzelnen Seiten rann. Mit bekanntem Konstrukt komme ich ja nur an die Datei der aktuellen Seite, aber nicht der Menüpunkte:
file.import {
cObject = TEXT
cObject.value = fileadmin/bild01.png
cObject.override {
required = 1
data = levelmedia: -1, "slide"
wrap = uploads/media/ |
listNum = 0
}
Und 2. stellt sich mir die Frage wie ich das dann verknüpfe? Ich würde das ja gerne irgendwie in den linkWrap mit reinnehmen. Hier mal wie ich mir das laienhaft vorstelle:
NO.linkWrap.1 = <li style="background-image:url('
NO.linkWrap.2 < temp.MENUBILD
NO.linkWrap.3 = ') 0 50% no-repeat;"> | </li>
So, jetzt seid ihr drann. Vielen Dank für eure Vorschläge. 😃
Hallo akonze,
hast du eine Lösung für dein Problem gefunden?
Ich hätte auch gerne:
Grafik1-Menüpunkt1
Grafik2-Menüpunkt2
Grafik3-Menüpunkt3
Hallo Specter,
der Ansatz von akonze geht imo schon mal in die richtige Richtung, aber ich denke, dass lässt sich auch noch einfacher und eleganter lösen!
Es gibt doch die tolle CSS-Anweisung list-style-image vgl.
http://www.css4you.de/list-style-image.html
Damit bist du glaube ich besser bedient.
Was dein Problem betrifft akonze muss ich leider im Moment passen.
Daniel
Hab mich da an was erinnert! Ich probier mal rgmenu aus, melde mich, wenn es geklappt hat.
Kann man nicht einfach jedem einzelnen Menüpunkt eine individuelle Klasse (class="li1") geben, die man über CSS ansprechen kann? Menüs kann man doch mit linkWrap = <li class="li1">|</li> ||<li class="li2">|</li> |*| ... sehr schön aufdröseln.
Und dann würde ich von list-style-image abraten und anstelle dessen background-image verwenden, das machen die Browser einheitlich.
LG, Nils
Geht imo auch würde ich sicherlich auch so bei verschiedenen Grafiken machen. Aber dann muss man bei einer wachsenden Anzahl von Menüpunkten ständig im CSS und im TS nacharbeiten.
Aber wenn es nur eine Grafik ist, was spricht denn gegen list-style-image?
Ich hatte da noch keine Probleme!
moin,
als erstes stellt sich die Frage, soll die Grafik mit in den a-tag oder außerhalb positioniert werden.
Wenn mit im a-Tag, dann mit:
NO.stdWrap.prepend = IMAGE
Wenn außerhalb dann
NO.before.cObject = IMAGE
Und ans Bild kann man so kommen:
file {
width = 140c
height = 53c
import {
field = media
wrap = uploads/media/ |
listNum = 0
}
}
So als Ansatz gedacht..
Armin
rgmenu klappt wunderbar. Da kann man für jede Seite ein Icon auswählen und per css anzeigen lassen. Meine Lösung ist geringfügig anders als im manual angegeben, vom Prinzip her aber gleich.
Supoerextension!!!! :p
Hallo d.walter, list-style-image hab ich auch schon mehrmals verwendet, ist eine schöne Eigenschaft. Probleme gibt es nur manchmal, weil der IE das Bild oben anschlägt, der Firefox aber unten (oder so ähnlich, ich kann mir das nie merken). Das stört natürlich nicht immer, aber oft dann, wenn der Designer so hübsche knubbelige kleine Punkte gemacht hat und eine große Zeilenhöhe wählte. Und natürlich kann man dann keinen hover-Effekt machen (das kann IE6 nur auf dem <a>). Wenn man den überhaupt haben möchte. Gruß, Nils (irgendwie ist meine return-taste kaputt, deshalb alles display: inline).
Danke für die Info Tante Jensen, wieder was gelernt!! 😃
Daniel