--- title: "Li Menü untereinander trotz float:left" url: "https://www.typo3.net/d/105384-li-menue-untereinander-trotz-floatleft" source: "typo3.net" tags: ["TYPO3","Menüs","Frage","HTML & CSS"] created: "2011-05-16" last_reply: "2011-05-16" replies: 4 solved: false page: 1 pages: 1 lang: "de" --- # Li Menü untereinander trotz float:left TYPO3 › Menüs · 4 Antworten · gestartet 2011-05-16 ## Eröffnungsbeitrag **Evilmachine** · 2011-05-16 · [Beitrag #1](https://www.typo3.net/d/105384-li-menue-untereinander-trotz-floatleft/1) Hallo liebe mit TYPO3ler. Habe ein kleines Problem. Sitze gerade am Einbau eines gelieferten CSS Menüs. Wenn ich die gelieferte template.html aufrufe wird das Menü normal nebeneinander angezeigt. Sobald das Ding jedoch im Typo3 ist, werden diese komischerweise untereinander angezeigt. Weiß einer Rat?? Es geht um Hier die CSS zum Hauptmenü ```css /* CSS für Hauptmenü */ #hauptmenue-container { float: left; position: relative; width:100%; } #hauptmenue { margin-top: -10px; font-size: 12px; font-family: arial, helvetica, sans-serif; width:100%; float:left; } #hauptmenue a { border-left-color: #666666; border-left-width: 2px; border-left-style: solid; background-position: center top; background-repeat: no-repeat; background-image: url(../layout_grfx/SubNavTop.png); padding-bottom: 0px; border-bottom-color: #666666; border-bottom-width: 2px; border-bottom-style: solid; padding-top: 8px; background-color: #eaeaea; height: 20px; text-align: center; display:block; white-space:nowrap; } #hauptmenue a:link, #hauptmenue a:visited /* Menü im Ruhezustand */ { text-decoration:none; } #hauptmenue a:active /* Menü bei "mouse-down" */ { text-decoration:none; } #hauptmenue a:hover /* Menü bei "mouse-over" */ { text-decoration:none; } #hauptmenue a.kinderlos /* Menüpunkt oberste Ebene ohne Untermenü */ { border-width: 0px; background-repeat: no-repeat; background-position: center top; background-image: url(../layout_grfx/Button4StateOhneSub.png); } #hauptmenue a.kinderlos:link, #hauptmenue a.kinderlos:visited /* Menüpunkt oberste Ebene ohne Untermenü */ { z-index: 100; margin-top: 0px; padding-top: 12px; background-color: transparent; height: 33px; background-repeat: no-repeat; background-position: center top; background-image: url(../layout_grfx/Button4StateOhneSub.png); } #hauptmenue a.kinderlos:hover /* Menüpunkt oberste Ebene ohne Untermenü */ { background-repeat: no-repeat; background-position: center center; background-image: url(../layout_grfx/Button4StateOhneSub.png); } #hauptmenue a.kinderlos:active /* Menüpunkt oberste Ebene ohne Untermenü */ { background-repeat: no-repeat; background-position: center bottom; background-image: url(../layout_grfx/Button4StateOhneSub.png); } #hauptmenue a.eltern1 /* Menüpunkt oberste Ebene mit Untermenü */ { border-width: 0px; background-repeat: no-repeat; background-position: center top; background-image: url(../layout_grfx/Button4StateMitSub.png); } #hauptmenue a.eltern1:link, #hauptmenue a.eltern1:visited /* Menüpunkt oberste Ebene mit Untermenü */ { z-index: 100; margin-top: 0px; padding-top: 12px; background-color: transparent; height: 33px; background-repeat: no-repeat; background-position: center top; background-image: url(../layout_grfx/Button4StateMitSub.png); } #hauptmenue a.eltern1:hover /* Menüpunkt oberste Ebene mit Untermenü */ { background-repeat: no-repeat; background-position: center center; background-image: url(../layout_grfx/Button4StateMitSub.png); } #hauptmenue a.eltern1:active /* Menüpunkt oberste Ebene mit Untermenü */ { background-repeat: no-repeat; background-position: center bottom; background-image: url(../layout_grfx/Button4StateMitSub.png); } #hauptmenue a.eltern2, #hauptmenue a.eltern2:hover /* Bei allen Eltern der unteren Hierarchien einen Pfeil nach rechts hinzufügen */ { background-image: url(../layout_grfx/SubSub-Pfeil.gif); background-position: right center; background-repeat: no-repeat; } #hauptmenue li { position:relative; min-height: 1px; /* Für IE7 */ vertical-align: bottom; /* Für IE7 */ } #hauptmenue ul ul { margin-left: -1em; margin-bottom: 0; margin-right: 0; margin-top: -20px; position:absolute; z-index:500; top:auto; display:none; padding: 1em; } #hauptmenue ul ul ul { margin-left: -1em; margin-top: -12px; top:0; left:100%; } div#hauptmenue li:hover { cursor:pointer; z-index:100; } div#hauptmenue li:hover ul ul, div#hauptmenue li li:hover ul ul, div#hauptmenue li li li:hover ul ul, div#hauptmenue li li li li:hover ul ul {display:none;} div#hauptmenue li:hover ul, div#hauptmenue li li:hover ul, div#hauptmenue li li li:hover ul, div#hauptmenue li li li li:hover ul {display:block;} #hauptmenue ul { margin-left: 0; margin-bottom: 0; margin-right: 1px; margin-top: 0; list-style:none; padding:0; float:left; width:124px; /* Breite aller Menüboxen */ /* HINWEIS: Um in der Breite variable Menüboxen zu erhalten, kann diese Regel auskommentiert werden. dann muss aber zwingend in der "#hauptmenue a"-Regel padding definiert werden damit die Menüboxen an beiden Seiten des Textes noch Platz haben. */ } /* Ende CSS für Hauptmenü */ ``` Und das von Typo3 generierte HTML Markup mit einschließenden divs. ```html
``` Und meine Menü TS Datei: ```typoscript #--------------------------------------------------------------------------- # Upper Menue #--------------------------------------------------------------------------- temp.upperMenu = HMENU temp.upperMenu{ special = directory special.value = 3 entryLevel = 1 1 = TMENU 1 { expAll = 1 wrap = noBlur = 1 NO = 1 NO.wrapItemAndSub =
  • |
    • NO.ATagParams = class="kinderlos" ACT = 1 ACT{ ATagParams = class="kinderlos" ATagTitle.field = title // alias } IFSUB = 1 IFSUB.wrapItemAndSub =
  • |
    • IFSUB.ATagParams = class="eltern1" ACTIFSUB < .IFSUB } 2 < .1 2.wrap = 2.ACT.ATagParams = class="leer" 2.NO.ATagParams = class="leer" 2.IFSUB.wrapItemAndSub =
  • |
    • 2.IFSUB.ATagParams = class="eltern2" 2.ACTIFSUB < .IFSUB 2.ACTIFSUB.ATagParams = class="eltern2" 3 < .2 3.wrap = 3.ACT.ATagParams = style="width:430px" 3.NO.ATagParams = style="width:430px" 4 < .2 5 < .2 6 < .2 7 < .2 8 < .2 9 < .2 10 < .2 } ``` In Firebug kann ich sehen das das Verhalten reproduziert werden kann wenn ich aus #hauptmenue ul das float_left entferne. Löscht mir Typo3 das irgendwie? Danke schon einmal für eure Hilfe. ## Antworten ### [#2](https://www.typo3.net/d/105384-li-menue-untereinander-trotz-floatleft/2) · SomehowLost · 2011-05-16 Guten Morgen, das liegt alles mehr oder weniger am CSS (Browserabweichungen möglich). Also: ```css #hauptmenue ul { width: 124px } ``` ist etwas eng um alle li nebeneinander zu bekommen. Mach das mal 100%. Dazu kommt noch: ```css #hauptmenue li { display: block; float: left; min-height: 1px; position: relative; vertical-align: bottom; width: 125px; } ``` Dem li sagst Du display: block um diesem eine Breite zuordnen zu können. Die Breit brauchst Du wegen des Hintergrundes. Das wäre das, was ich auf den ersten Blick sehen und testen konnte. Ansonsten gerne per PM. Viele Grüße, Andreas ### [#3](https://www.typo3.net/d/105384-li-menue-untereinander-trotz-floatleft/3) · Evilmachine · 2011-05-16 Guten Morgen Andreas, leider keinen Erfolg. 100% beim #hauptmenue ul bewirkt nur das das ganze gebilde zentriert angezeigt wird. Und die Ergänzungen bei #hauptmenu li haben ebenfalls nichts bewirkt. ### [#4](https://www.typo3.net/d/105384-li-menue-untereinander-trotz-floatleft/4) · SomehowLost · 2011-05-16 Also wenn ich das bei mir mache ( #hauptmenue ul { width: 100%;} ), setzt er alles schön nebeneinander (Firefox und IE). Vielleicht einen ";" vergessen irgendwo? ### [#5](https://www.typo3.net/d/105384-li-menue-untereinander-trotz-floatleft/5) · Evilmachine · 2011-05-16 Aaahhhh jetzt wo ich den Kommentar gekillt hatte dahinter gehts. Danke dir vielmals. 15 Daumen hoch^^ --- Quelle: „Li Menü untereinander trotz float:left“, typo3.net, https://www.typo3.net/d/105384-li-menue-untereinander-trotz-floatleft Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.