Zum Inhalt springen

Li Menü untereinander trotz float:left

Erstellt am 16. Mai 2011 · 4 Antworten · letzte Antwort am 16. Mai 2011

Tags: HTML & CSS, Frage

Evilmachine ·

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 http://www.roberts-motorradreisen.de

Hier die CSS zum Hauptmenü

/* 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.

<div id="hauptmenue-container"> <!-- Beginn Hauptmenü-Container -->
  <div id="hauptmenue"> <!-- Beginn Hauptmenü -->
    <ul>
      <li><a href="index.html"  class="eltern1">Reiseangebote</a>
        <ul>
          <li><a href="motorradreisen-usa-2011.html"  class="eltern2">USA-Reisen</a>
            <ul>
              <li><a href="individualtour-kalifornien-2011.html"  style="width:430px">USA Kalifornien Individual-Motorradtour 2011</a></li>
              <li><a href="kalifornien-nevada-mai-2011.html"  style="width:430px">Kalifornien und Nevada Tour 02.-12. Mai 2011</a></li>
              <li><a href="highway-no1-2011.html"  style="width:430px">13 Tage Der Highway No 1 08.-20. August 2011</a></li>
              <li><a href="westcoast-2011.html"  style="width:430px">13 Tage Westküste Amerikas 12.-24. September 2011</a></li>
              <li><a href="big-bike-november-2011-westen.html"  style="width:430px">11 Tage Big Bike Tour Exklusiv 01.-11. November 2011</a></li>
              <li><a href="115.html"  style="width:430px">10 Tage Big Bike Tour Exklusiv 26.Mai - 04.Juni 2012</a></li>
              <li><a href="118.html"  style="width:430px">10 Tage auf Motorrad durch Teile Amerikas - Sondertour in 2011 10.11.2011 – 19.11.2011</a></li>
              <li><a href="121.html"  style="width:430px">12 Tage Canyons und Nationalparks der USA 17.06.-28.06.2012</a></li>
              <li><a href="124.html"  style="width:430px">13 Tage Highlights of the West mit Highway No°1 03.06.-15.06.2012</a></li>
            </ul>
          </li>
          <li><a href="motorradreisen-europa.html"  class="eltern2">Europa-Reisen</a>
            <ul>
              <li><a href="motorradresie-pommern0.html"  style="width:430px">Saison-Abschluss: 3 Tage Pommern und die Ostseeküste - 01.-03.10.2010</a></li>
              <li><a href="8-tage-mallorca-2011.html"  style="width:430px">8 Tage Mallorca - Januar - Dezember 2011</a></li>
              <li><a href="saison-eroeffnung-2011.html"  style="width:430px">Saison-Eröffnung: 3 Tage Pommern und die Ostseeküste - 15.-17.04.2011</a></li>
              <li><a href="burgen-herrensitze-polens-2011.html"  style="width:430px">4 Tage Burgen und Herrensitze Polens - 27.-30.05.2011</a></li>
              <li><a href="traumstraende-polens-2011.html"  style="width:430px">Traumstrände der polnischen Ostsee - 10.-12.06.2011</a></li>
              <li><a href="motorradreise-schlesien2011.html"  style="width:430px">6 Tage Schlesien und Polen - 28.06. - 03.07.2011</a></li>
              <li><a href="motorradreise-danzig-2011.html"  style="width:430px">3 Tage Städte-Tour Danzig - 09.-11.07.2011</a></li>
              <li><a href="amber-baltic-tour-2011.html"  style="width:430px">Die Amber Baltic Tour - 12.-14.08.2011</a></li>
              <li><a href="masuren-2011.html"  style="width:430px">Pommern, Ost-Westpreußen und die Masuren 03.-11.09.2011</a></li>
              <li><a href="kaschubei-2011.html"  style="width:430px">Polens Bernsteinküste und die Kaschubische Schweiz 23.-29.09.2011</a></li>
            </ul>
          </li>
          <li><a href="gruppenangebote.html" target="_blank"  class="leer">Gruppenangebote</a></li>
          <li><a href="pkw-vermietung.html"  class="leer">PKW Vermietung</a></li>
        </ul>
      </li>
      <li><a href="bilder-reiseerfahrungen.html"  class="eltern1">Impressionen</a>
        <ul>
          <li><a href="23.html"  class="leer">Reiseberichte</a></li>
          <li><a href="127.html"  class="eltern2">Tourenfotos</a>
            <ul>
              <li><a href="104.html"  style="width:430px">Gold West Tour 2010</a></li>
              <li><a href="rueckblick-st-petersburg.html"  style="width:430px">St. Petersburg</a></li>
              <li><a href="abf-2010.html"  style="width:430px">ABF 2010</a></li>
              <li><a href="87.html"  style="width:430px">Motorbike 2010</a></li>
              <li><a href="saisoneroeffnung-20100.html"  style="width:430px">Saisoneröffnung 2010</a></li>
              <li><a href="102.html"  style="width:430px">Masuren 2010</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="news.html"  class="kinderlos">News / Infos</a></li>
      <li><a href="sicherheit.html"  class="kinderlos">Sicherheit</a></li>
      <li><a href="ueber-uns.html"  class="kinderlos">Über uns</a></li>
      <li><a href="2.html"  class="eltern1">Kontakt / $$</a>
        <ul>
          <li><a href="impressum.html"  class="leer">Impressum</a></li>
          <li><a href="agb.html"  class="leer">AGB</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- Ende Hauptmenü --> 
</div>
<!-- Ende Hauptmenü-Container -->

Und meine Menü TS Datei:

#---------------------------------------------------------------------------
# Upper Menue
#---------------------------------------------------------------------------
temp.upperMenu = HMENU
temp.upperMenu{
    special = directory
    special.value = 3
    entryLevel = 1

   1 = TMENU
	1 {
		expAll = 1
		wrap = <ul>|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>
		NO.ATagParams = class="kinderlos"
		
		ACT = 1
  		ACT{
      		ATagParams =  class="kinderlos"
      		ATagTitle.field = title // alias

    		}
    		IFSUB = 1
		IFSUB.wrapItemAndSub = <li>|</li>
		IFSUB.ATagParams = class="eltern1"
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>
	2.ACT.ATagParams = class="leer"
	2.NO.ATagParams = class="leer"
	2.IFSUB.wrapItemAndSub = <li>|</li>
	2.IFSUB.ATagParams = class="eltern2"
	2.ACTIFSUB < .IFSUB
	2.ACTIFSUB.ATagParams = class="eltern2"
	

	3 < .2
	3.wrap = <ul>|</ul>
	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.

SomehowLost ·

Guten Morgen,

das liegt alles mehr oder weniger am CSS (Browserabweichungen möglich).
Also:

#hauptmenue ul { width: 124px }

ist etwas eng um alle li nebeneinander zu bekommen.
Mach das mal 100%.
Dazu kommt noch:

#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

Evilmachine ·

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.

SomehowLost ·

Also wenn ich das bei mir mache ( #hauptmenue ul { width: 100%;} ), setzt er alles schön nebeneinander (Firefox und IE).
Vielleicht einen ";" vergessen irgendwo?