So, nun möchte ich aber den beiden divs eine Hintergrundfarbe geben.
Da mir das zu umständlich ist (auf der richtigen Website gehts um wesentlich mehr divs denen ich ein richtiges Layout geben möchte ) möchte ich die beiden divs, in einen dritten Div stecken, dem ich dann die Hintergrundfarbe gebe. Dann positionieren aber die Prozentangeben nicht mehr so, wie sie das eigentlich sollen. Ich könnte natürlich dem containier die größenangeben etc. geben und denen da drinne 100%, aber durch border, padding etc. wäre das nicht ganz so präzise.
Gibt es irgendeine Möglichkeit, dass sich die größe irgendwie nicht auf das direkte Elternelement bezieht oder so?
Geht schon, wenn du nicht % verwendest, mag dann aber sein,
daß das deine sonstigen Anforderungen nicht erfüllt.
Ansonsten kann man solche Elemente auch aus dem allgemeinen
Textfluß nehmen (positionieren), dann beziehen sich
Prozentangaben auf das nächste positionierte Elternelement oder
sofern es das nicht gibt auf den Anzeigebereich.
Dann kann man auch noch die Elemente geeignet verschachteln
und gar nichts für insbesondere die Höhe angeben. Dann ergibt
sich die Höhe ganz automatisch aus dem Platzbedarf des Inhaltes.
Jetzt im endeffekt mache ich es so, dass ich dem äußeren div keine höhe gebe, dann kann man leider nicht mehr mit % arbeiten, aber vielleicht ist das ja auch besser so ^^
zwischenzeitlich habe ich es, durch deinen vorschlag mit “position: absolute;” draufgekommen, habe ich etwas anders gemacht, weil es ansonsten auch nicht meinen anforderungen erfüllt hätte so gemacht.
[code]
hey
ho
[/code]
dazu wollte ich nochmal fragen, warum dabei die ersten beiden divs auch einen margin von 20px nach oben haben. (im IE wird es wie immer genauso angezeigt wie man es sich erstmal denkt, und zwar haben da die ersten divs nicht 10px margin, aber das ist wahrscheinlich falsch )
Die Verwendung des Attributes style solltest du ganz vermeiden.
Für Entwicklung und Tests kannst du erstmal ein style-Element
im head der Datei verwenden, später dann auf eine externe
CSS-Datei verweisen.
Woran sieht man margin bei einem absolut positionierten
Element?
Auch wenn man dann gar keine Angaben zur Position macht,
ist das meist wenig sinnvoll, ebensowenig, wie beim selben
Element absolute Positionierung und float zu verwenden - was
soll das alles?
Ansonsten hat ein div das margin, was du dafür angibst.
Weder der browser noch sonstwer sieht sonst vor, daß ein div
ein margin bekommen soll.
Das ganze ist ja nur ein Beispiel aber ich hab das wohl so schnell gemacht, dass ich an der ein oder anderen Stellen bissl Mist gebaut habe ^^
Also 1. : Das style Atribut habe ich hier in dem Beispiel verwendet um es übersichtlicher zu machen und nicht zwei Dateien verwenden zu müssen, nehm ich natürlich nicht für eine richtige website.
jetzt nochmal meine Frage mit dem verbesserten Dokument:
[code]
hey
ho
[/code]
warum hat box1 nen anderen top Abstand als box2, bzW: warum hat box2 den selben top Abstand wie die Hintergrundbox margin-top hat?
auto nimmt keinen Wert an, sondern sorgt hier lediglich dafür, dass das Element bzgl. der top-Koordinate auf der Höhe bleibt, die es im normalen Fluss hätte.
Das margin-top, das du #hintergrundbox gegeben hast, wird jedoch dem margin-top von body zugeschlagen, auf Grund von CSS 2.1, 8.3.1 Collapsing margins, genauer adjoining margins. (Ob ein margin-top für das body-Element wirklich als Aussenabstand für dieses umgesetzt wird, oder eher in eine Art padding umgewandelt wird, hängt vom Browser ab.)