Ursula: Elemente in <div> lassen sich nicht zentrieren

Beitrag lesen

SELF-Forum

Elemente in <div> lassen sich nicht zentrieren

Ursula
– Informationen zu den Bewertungsregeln

allerdings beginnt das <div> bei "static" schon am linken Fensterrand und reicht bis zum linken Rand des rechten <div>-Bereichs (der Navigationsleiste). Bei "relative" beginnt das <div> am rechten Rand des linken <div>-Bereichs (der Zierleiste), reicht aber leider rechts trotz margin-right:120px bis zum Fensterrand! Wieso?

Vorweg:
Auch hier täuscht dich wieder die Anzeige. Das fragliche Element grenzt nicht an andere Elemente, es beginnt und endet da, wo du es haben wolltest - was in dem einen oder anderen Fall mit den Grenzen der anderen Elemente übereinstimmt (und du sicher auch genau so haben wolltest). Das ist ein kleiner, aber feiner Unterschied.

Zur Frage:
Schaue dir nochmal deine style-Eigenschaften an:

top:0px; left:120px; margin-right:120px

Du hast mit left die linke Seite des Elements 120 Pixel nach rechts versetzt. top und left, bottom und right gelten nur für positionierte Elemente, das sind jene, die entweder absolute, relative oder fixed als position-Eigenschaft haben.

  • Bei static, dem Standardwert, haben top/left/bottom/right keine Auswirkung. Deshalb beginnt dein <div> bei static am linken Rand (hier: Seitenrand), da, wo alle Elemente normalerweise platziert werden.

  • Bei absolute fällt das Element, wie schon geschrieben, komplett aus dem Darstellungsbaum raus. top/left/bottom/right beziehen sich auf das nächsthöhere positionierte Element (oder, letztenendes, die Seite selbst).

  • relative ist in gewisser Hinsicht eine Mischung aus static und absolute. Die Berechnung und die Auswirkung auf umgebende Elemente entspricht jener von static. Dann jedoch wird das Element um top/left/bottom/right verschoben. Sein ursprünglicher Platz bleibt frei, es wird relativ dazu angezeigt.

Zur genauen Definition siehe http://www.w3.org/TR/CSS21/visuren.html#propdef-position.

Daher reicht dein Element bei positon:relative bis zum rechten Fensterrand, trotz oder auch gerade wegen margin-right. Es wird zuerst der rechte Außenabstand von 120 Pixeln abgezogen(margin-right:120px). Dann wird das Element um 120 Pixel nach rechts verschoben angezeigt (left:120px) - und landet damit genau am rechten Fensterrand.

Beitrag melden
–
Informationen zu den Bewertungsregeln