Drop Down Menü - Float zentrieren?

[Derk2]

Ah, danke! Jetzt habe ich es verstanden.

Nur eine Frage noch.

Wenn sich unter dem Menü werden beim aufklappen des Menüs verschoben. Da passierte ja vorher nicht, weil das Menü ja absolut positioniert war. Wie kann ich das jetzt beheben?

Derk

Sorry, ich habe etwas schnell getippt.

Hier noch mal das richtige:
Wenn sich unter dem Menü andere Inhalte befinden werden die beim aufklappen des Menüs verschoben. Das passierte ja vorher nicht, weil das Menü absolut positioniert war. Wie kann ich das jetzt beheben?

 

[Maik]

Bei mir verschiebt sich da nichts, denn #menuebox ist weiterhin absolut positioniert:

#menuebox {
position: absolute;
height: 30px;
}

mfg Maik

 

[Derk2]

Wenn ich diesen Wert setze ist das Menü wieder auf der linken Seite.

 

[Maik]

Durch die absolute Positionierung wird das Blockelement aus seinem normalen Dokumentfluß genommen, und seine Breite richtet sich nicht mehr an seinem Elternelement, sondern an seinem Inhalt aus, der an der rechten Seite des Menüs endet. Somit wird darin #menue auch nicht mittels margin:auto horizontal zentriert.

Ergo wird dem Block eine entsprechende Breite zugewiesen:

#menuebox {
position:absolute;
height: 30px;
width:100%;
}

mfg Maik

 

[Derk2]

Okay, an sich ist das ja schlüssig. Aber sobald ich absolute setze, ist das Menü im IE nach rechts verschoben. Im Firefox wird dann der untere Inhalt nicht mehr verschoben, dafür ist das Menü auch nicht mehr ganz in der Mitte, ein bisschen zu weit rechts.

 

[Maik]

Wenn das Menü aus der Mitte heraus zu einer Seite verschoben ist, stimmt was mit deiner Angabe zur Gesamtbreite des Menüs nicht.

Ist der Wert zu groß gewählt, rutscht das Menü nach links, fällt er zu gering aus, wandert das Menü im Fenster nach rechts.

mfg Maik

 

[Derk2]

Wenn ich den Wert so einstelle, dass es in 1024x768 passt, passt es in den anderen Auflösungen nicht mehr. Und im IE bewegt sich seit position:absolute; nichts mehr. Da ist es immer noch verschoben.

Habe ich irgendetwas vergessen?

 

[Maik]

Jo

Was genau kannst du meinem Quellcode in Post #8 entnehmen. Und vielleicht auch noch mal meine Beiträge zu Beginn des Themas lesen, die die entscheidenden Hinweise liefern.

Ich kann dir nämlich nur sagen, dass mit meinem Code im IE6 nichts verschoben ist, und er das Menü unabhängig von seiner Fenstergröße immer horizontal zentriert.

Bei Bedarf reiche ich gerne Screenshots von unterschiedlichen Fenstergrößen nach, die dies dokumentieren.

mfg Maik

 

[Derk2]

Ich habe mich erst mal hier angemeldet.

So, hier ist eine Testdatei. Ich habe deinen Code übernommen, es geht trotzdem nicht. Sobald ich aber position absolut weglasse geht es.

Könnte man nicht absolut weglassen, und das Menü mit z-index über den restlichen Inhalt stellen?

 

[Maik]

Wie ich schon sagte, mit meinem Code gibt's bei mir keine derartigen Probleme ;-)

Laßt Bilder sprechen


(v.l.n.r.: IE6 mit Vollbild (=1280*1024px), IE6 mit verkleinerten Fenster (=1024*768px))

Für Firefox & Co. empfehle ich dieses Stylesheet, in dem ich die enthaltenden Maßeinheiten "px" durch "em" ersetzt habe, denn wie haben wir einst in der Schule gelernt:

Äpfel kann man nicht von Birnen subtrahieren.

#menue {
width:56em;
margin:auto;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
font-size: 0.8em;
width: 9.8em;
height: 1.3em;
font-weight: bold;
background-color: #2C2C2C;
color: #DFDFDF;
border: .1em solid;
border-color: #78561d;
}
#menue .aussen:hover {
height: auto;
background-color: #292929;
color: #DFDFDF;
}
a.innen,
a.innen-1 {
display: block;
width: 10em;
padding: .2em 0;
text-decoration: none;
font-weight: normal;
border-bottom: .1em solid #78561d;
border-top: .1em solid #78561d;
background-color: #3B3B3B;
color: #DFDFDF;
}

Falls du dich mit dieser relativen Einheit schwer tust, kannst du die Menüdimensionen genauso gut mittels "px" definieren.

Ebenso ist dieser Regelblock zu Beginn des Stylesheets zu empfehlen:

* {
margin:0;
padding:0;
}

mfg Maik