@Hintergrund und Pixelgenau:
Versuche es einfach ;P Du verwendest ein Bild als GMENU-Hintergrund, wo dann dein Text drüberkommt. Dann siehst du immernoch, ob das auffällt, oder nicht (würde mich nämlich wundern). Verwende von der Grösse her ein Mittleres deiner Bilder(ohne den Text darin natürlich). Mein Anliegen ist simpel: jedesmal wenn ein Menüpunkt verändert wird oder hinzukommt, muss TypoScript angepasst werden - das kann's nich sein .. Also so dynamisch wie möglich machen.
Zu deinem TypoScript.
Also bitte einmal ganz, bzw. was alles mit Markern und Menü zu tun hat, ist etwas mühsam. Aber nicht immer schnippeln o.O
@nichts angezeigt: wird dein Marker im HTML-Code ersetzt im Frontend? Schau im Quellcode nach.
Also hier erstmal komplett ohne ohne nochtfunktionierendes LayerMenü:
page = PAGE
page.typeNum = 0
page.config.index_enable = 1
page.10 = TEMPLATE
page.stylesheet = fileadmin/css/style.css
#lib für Text-/Grafikmenü mit automatichen Layern bei Mouseover
page.includeLibs.gmenu_layers = media/scripts/tmenu_layers.php
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 {
template = FILE
template.file = fileadmin/templates/index1.html
##### schwarz/weiß Balken (aktiv/inaktiv) #####
##### überschreiben per Subtemplates braunen Balken ######
marks.S = IMAGE
marks.S.file = fileadmin/images/sw.jpg
marks.Su = IMAGE
marks.Su.file = fileadmin/images/s.jpg
##### die Numerierung entspricht den einzlenen Menüpunkten #####
##### B steht für Balken und M für Menü #####
##### weißer Balken oben #####
marks.B1 = IMAGE
marks.B1.file = fileadmin/images/b1w.jpg
marks.B2 = IMAGE
marks.B2.file = fileadmin/images/b2w.jpg
marks.B3 = IMAGE
marks.B3.file = fileadmin/images/b3w.jpg
marks.B4 = IMAGE
marks.B4.file = fileadmin/images/b4w.jpg
marks.B5 = IMAGE
marks.B5.file = fileadmin/images/b5w.jpg
##### Menüpunkte und Striche dazwischen #####
marks.M1 = IMAGE
marks.M1.file = fileadmin/images/menu_ecutio.jpg
marks.M1.wrap = <a href="/Typo3/dummy-3.8.0/"> | </a>
marks.M2 = IMAGE
marks.M2.file = fileadmin/images/menu_projekte.jpg
marks.M2.wrap = <a href="/Typo3/dummy-3.8.0/?id=2"> | </a>
marks.M3 = IMAGE
marks.M3.file = fileadmin/images/menu_aktuelles.jpg
marks.M3.wrap = <a href="/Typo3/dummy-3.8.0/?id=3"> | </a>
marks.M4 = IMAGE
marks.M4.file = fileadmin/images/menu_presse.jpg
marks.M4.wrap = <a href="/Typo3/dummy-3.8.0/?id=4"> | </a>
marks.M5 = IMAGE
marks.M5.file = fileadmin/images/menu_kontakt.jpg
marks.M5.wrap = <a href="/Typo3/dummy-3.8.0/?id=5"> | </a>
##### braune Balken unten #####
marks.B1u = IMAGE
marks.B1u.file = fileadmin/images/b1.jpg
marks.B2u = IMAGE
marks.B2u.file = fileadmin/images/b2.jpg
marks.B3u = IMAGE
marks.B3u.file = fileadmin/images/b3.jpg
marks.B4u = IMAGE
marks.B4u.file = fileadmin/images/b4.jpg
marks.B5u = IMAGE
marks.B5u.file = fileadmin/images/b5.jpg
##### Inhalt #####
marks.CONTENT = CONTENT
marks.CONTENT = tt_content
marks.CONTENT < styles.content.get
}
Das mit dem Hintergrund kann ich so wirklich nicht machen, da der Abstand zwischen den Rändern immer gleich sein soll! Und das bekomm ich so nicht hin, da ja schon allein "presse" und "aktuelles" sehr verschieden lang sind!
Gegen dynamisch hab ich ncihts einzuwenden, wäre mir persönlich auch am liebsten! Wie wäre es mit der Idee: Das ganze mit den oben und unten Balken und weiß überschreiben so lassen (per Tabellen und Markern und Subtemplates) aber in Backgrounds ändern und die einzelnen Menüpunkte per Layermenü und optionSplit dort reinmanövrieren. Würde das gehen ???
Könnte man also die als Background integrieren ???
marks.B1 = IMAGE
marks.B1.file = fileadmin/images/b1w.jpg
Meine Vorstellung:
marks.B1 = IMAGE
backgroundImage = marks.B1.file = fileadmin/images/b1w.jpg
Mir ist noch ein alter CSS-Trick eingefallen: dynamisch breite und hohe Buttons/Linien lassen sich mit einem 1-3 px-breiten Bild erzielen, das in der Breite (y-Achse) wiederholt wird. Wenn dein Menüpunkt ein durchsichtiges GMENU-Bild als Text/Link bekommt, und der Hintergrund eben eine CSS-Klasse darstellt, deren Hintergrund in der Breite wiederholt wird, dann ist das Problem gelöst. Dieses wiederholte, Minibild ist so hoch wie ein Menüpunkt (z.B. 50) und eben 1-3 px breit.
Also so:
<table>
<tr>
<td class="myMenu-ACT" height="50" width=""><img src="generiertesbild1.png" alt="" /></td>
<td class="myMenu-NO" height="50" width=""><img src="generiertesbild2.png" alt="" /></td>
<td class="myMenu-NO" height="50" width=""><img src="generiertesbild3.png" alt="" /></td>
</tr>
</table>
Hoffe, damit kannst du was anfangen. Durch width="" wird dein Menüpunkt gerade so breit, wie das Bild Platz braucht. Und hinter dem durchsichtigen "img" wird durch die Klasse das Hintergrundbild in der y-Achse wiederholt
Das kenn ich und benutze ich auch schon! Aber in wiefern sollte mir das bei meinem Problem helfen ???
Ok, wenn du das kennst, aber nicht verstehst, geht was schief ;P
Das einzige Problem bei deinem Hauptlevel, sind die farbigen Balken, oder? Also werden die Punkte je nach an oder aus, mit einer CSS-Klasse versehen, die das entsprechende Hintergrundbild (blau oder braun) einfach benötigt-viele Male wiederholt.
Okay also. Mein Problem an der Sache ist glaube ich, dass ich noch nicht viel mit CSS gearbeitet habe. Ich habe das bisher nur benutzt, um zum Beipiel Hintergrundbilder zu setzen, die einen einfarbigen Verlauf mit Schatten am oberen Rand haben und so etc... Moment. Hier ein Beispiel:
Bild: 666kb.com/…/10jjewpnhe328.jpg
Das hab ich dann eben nur 1px breit gemacht und aufgerollt je nach benötigter Breite....
Jep. Dieses Bild kann man in der Breite wiederholen lassen:
<td style="background-image:url(fileadmin/images/background4.jpg);
background-repeat: repeat-y;"><img src="generiertesbild.png" alt="" /></td>
Bau das mal so in dein Div, oder TD, etc.. ein.
Was ich ehrlich gesagt schon lange vermisse: wo ist dein Menücode? ;P
Hau rein - kann höchstens funktionieren..
Also junger Mann. Passen Sie auf. Mein Layer-Menü:
# Default PAGE object: #
page = PAGE
page.typeNum = 0
# Benoetigte Libaries einfuegen #
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
# Indexierung der Seiten #
page.config.index_enable = 1
# Template laden #
page.10 = TEMPLATE
# Stylesheet laden #
page.stylesheet = fileadmin/css/style.css
# Hauptseite #
page.10 {
template = FILE
template.file = fileadmin/templates/index1.html
marks.NAVI = HMENU
marks.NAVI.entryLevel = 0
marks.NAVI.1 = GMENU_LAYERS
marks.NAVI.1 {
#XY = [30.w]+12,
#Untermenü wird erst sichtbar, wenn aktiviert
layerStyle = position:absolute; left:0px;top:300px;width:100px;VISIBILITY:hidden;
#Abstand des Menüs von dem Punkt, an dem es aktiviert wurde
#xPosOffset = -80
topOffset = 300
leftOffset = 164
#horizontales fixiertes Menü
lockPosition = x
expAll = 1
NO {
allWrap = | |*|<img src="fileadmin/images/strich.jpg" width="1px" height="12px" alt="" /></img>||*|<img src="fileadmin/images/strich.jpg" width="1px" height="12px" alt="" /></img>|
ATagParams = class="navi"
backColor = #FFFFFF
#Breite zzgl zur Objekt-Weite und Höhe
XY = [10.w]+24, 10
10 = TEXT
10.text.field = title
10.fontFile = t3lib/fonts/verdana.ttf
10.fontSize = 10
10.align = left
10.fontColor = #006699
10.offset = 10, 10
10.niceText = 0
}
ACT <.NO
ACT = 1
ACT {
10.fontColor = #67554A
}
RO < .NO
RO = 1
RO {
10.fontColor = #67554A
}
ACT {
backColor = #FFFFFF
10.fontColor = #67554A
}
}
marks.NAVI.2 = GMENU
marks.NAVI.2.wrap = |<br />
marks.NAVI.2.NO {
ATagParams = class="navi"
backColor = #FFFFFF
XY = 120, 20
10 = TEXT
10.text.field = title
10.fontFile = t3lib/fonts/verdana.ttf
10.fontSize = 10
10.fontColor = #006699
10.fontDecoration = 1
10.align = left
10.offset = 10, 10
10.niceText = 0
}
### Inhalt ziehen ###
marks.CONTENT = CONTENT
marks.CONTENT = tt_content
marks.CONTENT < styles.content.get
}
Dieses jene Balken zeigt lediglich die Menüstruktur an! Das ist auch okay so, soweit war ich ja gestern schonmal :o) Hier fehlen jetzt aber noch die interaktiven Balken!!! 🙁
Muss gleich los. Bin ja nur für 4 Stunden hier. Mache dann morgen weiter. Dir noch einen schicken Tag!
Chaio chiao und nochmal danke für die hilfreichen Tips so far! 😉
"Dieses jene Balken zeigt lediglich die Menüstruktur an!" - ? Was denn sonst ..
Tipp für deine Navigation, mit dynamisch breiten Hintergründen:
Zitat:
...
ATagParams = class="navi"
backColor = #FFFFFF
#Breite zzgl zur Objekt-Weite und Höhe
XY = [10.w]+24, 10
10 = TEXT
10.text.field = title
...
hier schreibst du das hinein:
...
ATagParams = class="point-no"
backColor = #FFFFFF
transparentColor = 1
#Breite zzgl zur Objekt-Weite und Höhe
XY = [10.w]+24, 10
10 = TEXT
10.text.field = title
...
-> dies gilt für den Status "NO". Für ACT dasselbe, einfach eine Klasse "point-act" verwenden.
Im CSS gibts du dann für "point-no" und "point-act" das Hintergrundbild an, das mit "repeat: repeat-y;" beliebig breit wird (das habe ich schon genug oft gepostet).
Ihnen ebenfalls genehme Abendstunden, holde Maid.
edit:
-----
zu deiner Arbeitsweise:
ACT <.NO
ACT = 1
ACT {
10.fontColor = #67554A
}
RO < .NO
RO = 1
RO {
10.fontColor = #67554A
}
ACT {
backColor = #FFFFFF
10.fontColor = #67554A
}
mehrere ACT-Klammern gehen auf den Überblick, verwirrst dich nur selbst, mach es konsequent und an einem einzigen Ort.
Hallo Robert!
Du bist ja fleißig! Viele Dank. Werd sehen, was ich draus machen kann!
Muss jetzt aber erstmal fix ne Bildergalerie bauen. - Hoffe, das wird nicht so dramatisch! ;o)
DANKE DANKE DANKE! Werde auf das menü sicher noch zurückkommen :o)
Gruß P.