Horizontales Menü: Unterpunkte zentriert

[ratatouille]

Hallo,
ich habe ein horizontales Menü erstellt, die Unterpunkte klappen mit Hover-Effekt aus. Wie kann ich diese Unterpunkte unter der Hauptüberschrift zentrieren?

LG

[Georg]

Hallo,

Zeig doch mal deinen dazugehörigen Quellcode und dir wird geholfen

[ratatouille]

Hallo,
Zeig doch mal deinen dazugehörigen Quellcode und dir wird geholfen

/* --- NAVIGATION --- */  
  
  ul#Navigation {  
    margin: 0; padding: 5px;  
    text-align: center;  
  
         background: #93c52e;  
         width: 748px;  
         height: 20px;  
         margin-right: 40px;  
         padding: 5px;  
         float: left;  
  
         border:1px solid #ebebeb;  
         -moz-border-radius:10px;  
         -khtml-border-radius:10px;  
  }  
  
  ul#Navigation li {  
    list-style: none;  
    float: left;  
    position: relative;  
    margin: 0; padding: 0;  
  }  
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */  
    margin-bottom: -0.4em;  
  }  
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */  
    margin-bottom: -0.1em;  
  }  
  
  ul#Navigation li ul {  
    margin: 0; padding: 0;  
    position: absolute;  
    top: 1.6em; left: -0.4em;  
    display: none;  /* Unternavigation ausblenden */  
  }  
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */  
    left: -1.5em;  
    lef\t: -0.4em;  
  }  
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */  
    background-color:silver; padding-bottom:0.4em;  
  }  
  ul#Navigation li:hover ul {  
    display: block;  /* Unternavigation in modernen Browsern einblenden */  
  }  
  ul#Navigation li ul li {  
    float: none;  
    display: block;  
    margin-bottom: 0.2em;  
    font: 9pt georgia;  
  }  
  
  ul#Navigation a, ul#Navigation span {  
    display: block;  
    width: 9.2em;  /* Breite den in li enthaltenen Elementen zuweisen */  
    padding: 0.2em 1em;  
    font-weight: bold;  
    background-color: #93c52e;  
    color: #575757;  
    text-decoration: none;  
  }  
  * html ul#Navigation a, * html ul#Navigation span {  
    width: 9.2em;   /* Breite nach altem MS-Boxmodell für IE 5.x */  
    w\idth: 7em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */  
  }  
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {  
        color: #575757;  background-color: #93c52e;  
  }

[Georg]

Hallo,

Also irgendwie isset immer das selbe. Absolute Positionierung funktioniert nie so wie viele es verstehen. Ich würd fast schon sagen sowas muss in die FAQs.

A la Wie kann uch etwas so haben wie ich will.
Nicht absolut positionieren :)

[Gernot Back]

Hallo Georg,

Nicht absolut positionieren :)

... und dann mit einem ausreichenden negativen Margin nach unten bei der per Hover-Effekt herausklappenden Unternavigation dafür sorgen, dass sie nichts nach unten verschiebt.

Das geht möglicherweise nur, indem du den Platzbedarf jeder Unternavigation in jedem einzelnen LI erster Ordnung per JavaScript onLoad ausliest und ihn dem jeweils enthaltenen UL-Element als negativen Margin-Bottom zuweist, das dafür aber erst einmal nicht ausgeblendet sein kann, weil sich sonst sein Platzbedarf nicht auslesen lässt; - schwierig und buggy, das!

Oder du positionierst eben doch absolut, aber dann eben die ganze Navigation schon ab dem UL-Element erster Ordnung. Da reservierst du einfach oben per Padding-Top z.B. im BODY-Element genügend Platz für die Navigation im eingeklappten Zustand.

Da spricht in deinem Fall ja auch nichts gegen, da du die Breite der Navigation ja ohnehin auf 748px und ihre Höhe auf 20px  festsetzt und sie sich nicht wie das so oft gewünscht ist über die jeweilige Breite des Fensters erstrecken soll.

Gruß Gernot

[Matthias Apsel]

Om nah hoo pez nyeetz, Georg!

Ich würd fast schon sagen sowas muss in die FAQs.

Letztens waren es die AGBs heute die FAQs, die ebenfalls schon für sich im Plural stehen.

Matthias