Hallo Dennis,
Versuch mal bitte folgendes:
Ich habe alle CSS Files wie folgt included:
Setup:
page.headerData.10 = TEXT
page.headerData.10.value (
<link rel="stylesheet" type="text/css" href="fileadmin/dropdown.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/dropdown.linear.columnar.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/default.advanced.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/global.css" media="screen" /> <!--ist meine CSS und enthält keine Infos für die Extention vom DropDownmenu)
)
Unter Fileadmin habe ich folgende Files abgelegt und da war bei mir der Fehler:
default.css
default.advanced.css
dropdown.css
dropdown.linear.columnar.css
dropdown.linear.css <-- UND DIE WAR DER GRUND; warum es nicht ging)
Die dropdown.linear.columnar bezieht sich auf die dropdown.linear.css und sollte daher im selben Ordner sein-
Noch meine Constants:
plugin.freeCssDropDownMenu.themeCss = fileadmin/dropdown.css
plugin.freeCssDropDownMenu.themeCss = fileadmin/dropdown.linear.columnar.css
plugin.freeCssDropDownMenu.themeCss = fileadmin/default.advanced.css
plugin.freeCssDropDownMenu.page = page
plugin.freeCssDropDownMenu.headerDataId = 10 </--ist nicht die 9876 bei mir
plugin.freeCssDropDownMenu.horizontal = 1
plugin.freeCssDropDownMenu.horizontal.start = 1
plugin.freeCssDropDownMenu.horizontal.exclude =
plugin.freeCssDropDownMenu.vertical = 0
plugin.freeCssDropDownMenu.vertical.start = 1
plugin.freeCssDropDownMenu.vertical.exclude =
Hoffe die Lösung hilft. Wenn nicht sag bescheid.
Ciao
Mac
ich verwende auch nur die 9876 als default, weil ich die noch nirgends gefunden habe und sie wahrscheinlich niemand sonst händisch im Einsatz hat.
Nun zum Rest
Was mich an deinen constants wundert, ist, dass du die Variable
plugin.freeCssDropDownMenu.themeCss
3 mal überschreibst.
Am Schluss hat sie dann den Wert "fileadmin/default.advanced.css"
Die Variable ist rein für das theme gedacht, also die Einstellungen die nicht Funktionell sind, wie Farbe usw.
Die funktionellen CSS Dateien werden durch "horizontal = 1" eingebunden.
Wichtig für ältere Browser (z.B. ie6) ist jquery und das zugehörige script, welches bei dir wahrscheinlich nicht mehr geladen wird, da du headerData mit einem cObject "TEXT" überschreibst. das ganze war eigentlich ein COA um beim ie < v7 jquery über conditions zu landen.
[browser = msie] AND [version = <7.0]
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90 = TEXT
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90.value (
<script type="text/javascript" src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.js"></script>
<script type="text/javascript" src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.dropdown.js"></script>
)
[end]
PS:
Sorry, ich komme nicht zum lesen der privaten Nachrichten... und bin eigentlich auch eher für die Veröffentlichung im Forum damit auch andere etwas davon haben.
Hallo jank,
ich habe es mittlerweile hinbekommen dein Menü einzubauen! Vielen Dank noch mal dafür! Das sieht soweit schon recht gut aus.
Die Anforderung ist jetzt jedoch immer noch das Menü mit einem Bild zu erweitern und alle meine Versuche scheiterten bis jetzt kläglich.
So in der Art soll es nachher aussehen: http://www.clinique.de/
Also erst die mehrspaltige Navigation und darunter noch ein Container in dem ich ein Bild platzieren kann.
Kannst Du mir vllt irgendwie auf die Sprünge helfen wie man das umsetzen könnte?
Hatte an ein COA gedacht welches nach der Navi eingebunden wird und einen <div> Container drumherum wrappt.
temp.testnav = COA
# in subpart kopieren
temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
temp.testnav.10.special = list
temp.testnav.10.special.value = 2, 7, 8, 9, 10
# css class hinzufügen
temp.testnav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
# 2. Level nicht verlinken wenn es unterseiten gibt
temp.testnav.10.2.IFSUB.doNotLinkIt = 1
#temp.testnav.10.2.1 = HTML
#temp.testnav.10.2.1.value = <div id="testnav"><img src="/xxx/xxx/xxx/xxx/img/logo_footer.png"></div>
#page.10.subparts.nav.3.wrap = <div id="testnav">|</div>
# 4. und 5. Menüebene löschen sonst zerreist es das menü...
temp.testnav.10.4 >
temp.testnav.10.5 >
#temp.testnav.20 = HTML
#temp.testnav.20.value = <div id="testnav"><img src="/xxx/xxx/files/xxx/logo_footer.png"></div>
page.10.subparts.nav < temp.testnav
Aber dieser Container wird nicht innerhalb der Navigation eingebunden.
Nicht nur ich wäre über jeden Hinweis dankbar!
Beste Grüße
Dennis
Ich bin momentan im Urlaub und kann erst wieder nächstes Wochenende danach schauen.
Falls ich es vergesse bitte nochmal schreiben.
Moin jank,
vielen Dank schon mal! Und einen schönen Urlaub!
Bis dahin,
Dennis
Hallo Dennis,
ich habe mir deinen Beitrag nun in Ruhe durchlesen können.
Man kann aus einem Menülevel nicht einfach ein COA "machen".
Du kannst ein Menü in ein COA einfügen wie du es ja machst. Aber temp.testnav.10 bleibt dadurch immernoch ein HMENU und bringt auch nur die Eigenschaften vom HMENU>TMENU>TMENUITEM mit.
Die TSREF hilft dabei zu schauen was überhaupt für Eigenschaften für ein Element verfügbar sind.
TSREF TMENUITEM
So damit genug geklugschei... :o
Ich würde das ganze über CSS lösen.
indem du jedem li element als zusätzliche class die PID mit gibst. dadurch kannst du jeden Menüpunkt anders stylen und auch ein Bild als Hintergrund verwenden. Wenn das Bild auch ein link sein soll geht das natürlich nicht...
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="{field:uid}"> | </li> |*| <li class="{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
.3{
background-image: url(/fileadmin/template/img/m-footer.jpg)
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 30px; /*Bindhöhe als padding hinzufügen*/
}
Wenn das Bild ein Link sein soll, kann das mit befor/after gelöst werden... ein beispiel hierzu überleg ich wenn es sein muss 😉
Hallo jank,
Du darfst gerne weiter "klugscheissen" ! 🙂 Ich lerne und lerne...
Wenn ich es richtig verstandenen habe möchtest Du eine weitere?! oder überhaupt eine Klasse um das <li> in der letzten Ebene wrappen. Im Moment steht ja dort nur <li></li> ohne Klasse.
Dieser Klasse des <li> soll dynamisch die PID der Oberseite mitgegeben werden. Somit kann man diese über CSS, in Deinem Beispiel ".3" ansprechen?! Hab ich richtig verstanden, oder? 🙂
Wenn ich Dein TS ausprobiere passiert leider gar nichts. Hab es auch mal in dieser Form ausprobiert:
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="testli"> | </li> |*| <li class="testli last"> | </li>
Also ohne dynamische Übernahme einer PID. Auch da passiert leider nix.
DANKE!
Genau das war mein Gedanke.
Dadurch bekommt jeder Menü Eintrag eine CSS class entsprechend der Seiten ID.
Ich habe das TS bei mir ausprobiert wiki.t3easy.de. da hat das soweit geklappt (zwar bei einem anderen Menü aber das Prinzip ist das selbe).
Das TS muss nach dem
temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
eingefügt werden, da sonst die Eigenschaften wieder überschrieben werden.
Kannst du einen Auszug aus dem TS schicken der das Menü betrifft?
hab gerade noch etwas gefunden...
du musst auch noch den Menüzustand IFSUB ändern; hab ich übersehen 😉
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="{field:uid}"> | </li> |*| <li class="{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="{field:uid} dir"> | </li> |*| <li class="{field:uid} dir last"> | </li>
IFSUB ist eine Kopie von NO. Aber eben die Eigenschaft wrapItemAndSub wird überschrieben um die klasse dir hinzuzufügen.
Denkt bloß daran, dass der Name des class-Attributes nicht mit einer Zahl anfangen, bzw. nicht nur aus Zahlen bestehen darf - ist invalide und wird von keinem Browser (außer IE) verstanden
.
danke @ etux
Das wuste ich auch noch nicht hab es aber glaube ich auch noch nie exkt so versucht.
temp.testnav = COA
temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>
.id3{
background-image: url(/fileadmin/template/img/m-footer.jpg)
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 30px; /*Bindhöhe als padding hinzufügen*/
}
.idX{
....
}
OK, hab die Zeilen mal hinzugefügt:
temp.testnav = COA
temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
temp.testnav.10.special = list
temp.testnav.10.special.value = 2, 7, 8, 9, 10
temp.testnav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>
temp.testnav.10.2.IFSUB.doNotLinkIt = 1
temp.testnav.10.4 >
temp.testnav.10.5 >
page.10.subparts.nav < temp.testnav
Nun steht im Quelltext folgendes:
<ul class="dropdown dropdown-linear dropdown-columnar"><li class="id{field:uid} dir">....
Da ich es nicht in der Ebene haben will, sondern in der 3. müsste das TS doch eigentlich so lauten oder?
temp.testnav.10.2.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.2.NO.wrapItemAndSub.insertData = 1
temp.testnav.10.2.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>
Kann es sein dass ich das CSS nun einfach falsch anspreche?
.id3 {...}
"3" ist die ID der Oberseite.
Die Level 2 und 3 sind eine Kopie von Level 1.
Nur Änderungen werden neu deklariert.
Deswegen würde ich es bei der erste Ebene definieren.
Ob du die Klassen dort nutzt oder nicht ist ja egal.
Du möchtest ja, wie in dem beispiel von http://www.lwis.net/free-css-drop-down-menu/dropdown.lwis.celebrity.horizontal.html ein Menü haben.
CSS muss in dem Fall für die zweite Ebene getroffen werden, damit das Bild unter der Spalte zu sehen ist.
MErkwürdig ist, das bei dir im HTML Quelltext
<li class="id{field:uid} dir">
vorkommt.
Das soll eigentlich durch das
insertData = 1
in die jeweilige pid/uid geändert werden.
Kannst du noch einen link auf die Seite schreiben?
warum verwerdest du
temp.testnav.10.special = list
temp.testnav.10.special.value = 2, 7, 8, 9, 10
Dadurch werden, dachte ich, kein ebenen erzeugt, sondern ein auf eine Ebene reduziertes menü der Seiten unter value?!
temp.testnav.10.special = directory
temp.testnav.10.special.value = (PID vom Elternteil)
nimmt die unterseiten mit...
Also wenn ich es für die 2. Ebene definiere, also so:
temp.testnav.10.2.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.2.NO.wrapItemAndSub.insertData = 1
temp.testnav.10.2.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>
Dann steht die jeweilige id im Quelltext: <li class="id17">
Hier mal der link zur Entwicklungsumgebung: http://bike.diekavallerie.de.www68.your-server.de/produkte.html
Wenn ich die Seite auf mach bekomm ich immernoch klassen ala id{field:uid}.
Hast du den cache aktiviert beim entwickeln??? wenn ja, schalt den beim entwickeln am besten ab...
config.no_cache = 1
Irgendwo wird beim kopieren das insertData verschluckt/überschrieben..
brauchst du das COA um das Menü herum?
Daran wird es zwar nicht liegen jedoch kann man das "säubern".
Du kannst auch mal in den Typoscript-Object-Browser drüber schauen... vielleicht sieht man da schon den Fehler...
Das Menü sollte im Object Browser etwa so wie im Anhang.
bzw. die Richtigen klassen werden bei allen Menüpunkten außer bei "Produkte" eingesetzt.
Moin jank,
vielen Dank für Deine Geduld!
Warum die Klassen außer bei Produkten richtig gesetzt werden ist mir bis jetzt schleierhaft. Der Object Browser hilft mir da auch nicht weiter.
Unter Showroom: http://bike.diekavallerie.de.www68.your-server.de/e-showroom.html
wird nun zumindest mal ne Grafik angezeigt.. Aber diese soll sich nachher ja zwar innerhalb des Menü aber darunter befinden.. Mit padding oder margin komm ich da nicht weiter, die Grafik verschwindet dann aus der "Sichtweite"..
Meine Idee war ja am Anfang noch irgendwie ein weiteren <div> drum zu wrappen und den dann auszurichten. Total abwägig die Idee??
Ein div direkt innerhalb eines ul's ist meines Wissens nicht konform.
Außerdem weiß ich nicht wie sich das auf das restliche css auswirkt, da dann vermutlich die selectoren/klassen nicht mehr passen.
In Firebug sehe ich, dass alle Eigenschaften bis auf das padding angewendet werden. das padding wird von ul.dropdown li überschrieben.
Die Eigenschaft wird nicht angewendet, da die Datei in der Sie steht nicht als letztes sondern als 2. im header eingebunden wird. falls es nichts bringt die styles.css als letztes einzubinden würde ich es statt mit li.id11 mit
ul.dropdown li.id11 versuchen.
@ Dennis.D
Ein wenig Off-Topic:
An Deiner Stelle würde ich erst mal ein Schritt zurück gehen und mich um das Grund-Layout kümmern.
Dein Layout bricht nur deshalb nicht aus einander (zumindest rein optisch), weil Du massenhaft Hohen angibst. Hohen-Angaben haben aber bei Elementen, die Text enthalten, nichts zu suchen.
Lesestoff:
http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html
Die leere Elementen, die Du für die runden Ecken benutzest, haben keine semantische Bedeutung und sind völlig überflüssig - Du hast genügend Elementen, die die Ecken-Grafiken aufnehmen können.
Du schließt (beendest) die Floats nicht ein. Daher ist Dein Layout instabil (eigentlich eher zerschossen). Und das kannst Du leicht sehen, indem Du alle Hohen-Angaben entfernst.
Lesestoff:
http://little-boxes.de/lb1/IV-css-positionierung.html
Deine Navigation habe ich mir nicht angesehen. Um da einzusteigen, müsste ich mir vielleicht mehrere Vorbeiträge anschauen und die TypoScript Konfiguration erst mal finden.
Leider habe ich die Zeit dafür nicht
.