boxen in X-richtung absolut positionieren, in Y zentrieren?

[0x7F800000]

Schönen guten Tag allerseits.
Diesmal komme ich mit einer wesentlich konkreteren Frage:

Angenommen, ich habe zwei ineinader verschachtelte div-blöcke:

  
<div id="outerBox">  
 die aeussere box  
 <div id="innerBox">  
  die innere box  
 </div>  
</div>  

und will die innere Box nun horizontal zentriert genau 100 px vom oberen rand entfernt bezüglich der äußeren Box positionieren.
Ich habe eigentlich gehofft, dass margin-left & margin-right auf "auto" stellen reicht:

  
/*  irgendwie unsinnig in den raum geworfene aeussere box */  
#outerBox{  
 background-color: green;  
 width:   500px;  
 height:   200px;  
 position:  relative;  
 left:   250px;  
}  
  
/*  die innere box soll  genau 100px abstand vom oberen Rand der umgebenden box haben,  
 und bzgl. der umgebenden box in horizontaler richtung zentriert sein  
*/  
#innerBox{  
 background-color: red;  
 position:  absolute;  
 top:   100px;  
 margin-left:  auto;  
 margin-right:  auto;  
}  

jedoch bewirkten diese Einstellungen keinerlei Auswirkungen: die innere box klebt am linken Rand der äußeren Box.

Wie zentriere ich nun solche absolut positionierten div-blöcke?

Entschuldigt mich, wenn die Frage euch allzugut bekannt vorkommen sollte: ich habe viele ähnliche sachen gefunden, aber irgendwie nie wirklich das, wonach ich gesucht habe.

Vielen Dank im voraus.
0x7F800000

[LX]

Sobald Du sie absolut positionierst, funktioniert das Zentrieren natürlich nicht mehr, da die Positionierungs-Relation zum Parent entfernt ist. Die einzige Lösung, die es gibt, funktioniert von einigen Problemen abgesehen folgendermaßen: left auf 50%, margin-left auf -[Hälfte der Breite].

Die Probleme, auf die Du zwangsweise stoßen wirst:

• bei einer variablen Breite funktioniert das natürlich nicht.
• wenn das Window kleiner wird als die Breite der inneren Box, verschwindet Dein Inhalt

Gruß, LX

[0x7F800000]

okay, danke für den Vorschlag, aber die größen einfach so hardgepixelt da reinzuschreiben kommt nicht in frage, das soll alles skalierbar sein. Feste Prozentzahlen an drei Stellen reinzuschreiben kann ich auch nicht: denn so verteile ich praktisch ein und die selbe Variable auf mehrere stellen im Code. Wenn die Sprache einem keine andere Möglichkeiten bietet, dann soll man imho diese Sprache einfach abändern.

Das was ich will lässt sich erreichen, indem ich den inneren Block an die allererste Stelle schiebe, und statt "absolute" mit "relative" positioniere. Dann hat er den nöigen Abstand, und lässt trotzdem normal zentrieren. Dann geht es allerdings mit nur einem einzigen block.

<mecker thema="Warum ist die Welt so doof">

Allgemein: wieso darf man in CSS2 alles immer nur "einmal"?

Alleine wenn man die Einschränkung mit dem "einen einzigen" Hintergrundbild aufheben würde, könnte man schon alle möglichen runden rahmen und irgendwelche verbindungselemente zwischen den Absätzen problemlos einbauen.

Hätte man zugelassen, dass man die gewöhnliche Hintergrundfarbe nicht einfach nur homogen, sondern für mehrere vertices in der Box einzeln festlegen kann, dann könnte man sich die ganzen dämlichen 1-pixel-breiten Gradienten ersparen, und das alles wäre dazu noch bestens skalierbar, statt an pixelangaben gebunden.

Jetzt noch diese tolle positionierungsgeschichte... "Sie können genau ein element ordentlich positionieren, bei zwei elementen haben Sie Pech gehabt".

Diese ganzen Einschränkungen einfach wegzumachen hätte die Implementierung der Browser wohl nicht einmal um zwanzig Zeilen Code komplizierter gemacht (dort wo früher ein bild deklariert war, würden zusätzlich [] stehen, und dort wo früher ein bild gezeichnet wurde, würde zusätzlich eine for(...){} Schleife hinkommen).

Dass die CSS dadurch irgendwie viel zu kompliziert zu parsen oder zu erlernen wäre, glaube ich auch nicht... warum haben die das dann nicht einfach gemacht?

</mecker>

Naja, ich komme schon irgendwie klar damit, zumindest bis CSS3 da ist... :)

[Ingo Turski]

Hi,

Das was ich will lässt sich erreichen, indem ich den inneren Block an die allererste Stelle schiebe, und statt "absolute" mit "relative" positioniere. Dann hat er den nöigen Abstand, und lässt trotzdem normal zentrieren. Dann geht es allerdings mit nur einem einzigen block.

warum überhaupt positionieren? Du kannst die Box doch genauso gut static belassen und ihr margin-top:100px geben - oder habe ich das falsch verstanden genauso wie Deine Überschrift mit vertauschten Achsenbezeichnungen?

freundliche Grüße
Ingo

[0x7F800000]

warum überhaupt positionieren? Du kannst die Box doch genauso gut static belassen und ihr margin-top:100px geben - oder habe ich das falsch verstanden genauso wie Deine Überschrift mit vertauschten Achsenbezeichnungen?

ja, statt top: 100px kann ich jetzt eigentlich genausogut margin-top: 100px angeben. Kommt ja beides auf dasselbe hinaus: dieser Block muss das allererste child in der umgebenden Box sein. Ansonsten bekommt es keine 100px abstand zum Rand, sondern 100px Abstand zu dem vorhergehenden child der umgebenden Box, in diesem fall der Zeichenkette "die aeussere box".

Ich glaube, am einfachsten wäre es jetzt, statt diese zweite box in der xhtml datei nach vorne zu schieben, erstelle ich einfach noch eine div-unterteilung davor, in die diese Zeichenkette dann reinkommt. div hin oder her: Trennung des Aussehens vom Inhalt mit CSS ist doch eh für die Katz', diesbezüglich bin ich schon nach 2 tagen völlig desillusioniert^^ :D

Aber was passt dir denn an den Achsenbezeichnungen nicht? Ich will 100px Abstand von dem oberen rand haben ( = vertikal = in Y-Richtung positionieren) und das horizontal ( = in X Richtung) zentrieren. Imho passt alles einigermaßen :)

[Ingo Turski]

Hi,

dieser Block muss das allererste child in der umgebenden Box sein. Ansonsten bekommt es keine 100px abstand zum Rand, sondern 100px Abstand zu dem vorhergehenden child der umgebenden Box, in diesem fall der Zeichenkette "die aeussere box".

nicht, wenn Du dessen Element absolut positionierst.

Aber was passt dir denn an den Achsenbezeichnungen nicht? Ich will 100px Abstand von dem oberen rand haben ( = vertikal = in Y-Richtung positionieren) und das horizontal ( = in X Richtung) zentrieren. Imho passt alles einigermaßen :)

ja - nachdem ich die Überschrift in meiner Antwort geändert habe. ;-)

freundliche Grüße
Ingo

[0x7F800000]

ja - nachdem ich die Überschrift in meiner Antwort geändert habe. ;-)

ohje, dieses Forumsystem ist ja total gemein, jetzt habe ich mich gleich zweimal blamiert :D

greetz, 0x7F800000