nicht angemeldet
Ok hier wär ein Auszug, der im Vergleich zu meinem ganz selbst geschriebenen Testbeispiel sogar den Effekt bringt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#topdiv { background:yellow; width:300px; display:block; overflow:auto; padding:0px; margin:0px; }
#contentdiv { }
p { margin:15px 0 0 0; border:1px solid red; }
</style>
<title>Testseite</title>
</head>
<body>
<div id="topdiv"><div id="contentdiv"><p>Inhalt</p></div></div>
</body>
</html>
Da hätten wir
- topdiv: In diesem spielt sich das ganze ab. Hier ist eigentlich der obere Teil einer Box als Hintergrundbild drin und das div hat dann ein padding, so dass der eingeschachtelte Inhalt unter diesem Rahmen beginnt. Das Beispiel geht aber auch ohne das Bild und ohne padding.
- contentdiv: Hier steht der Inhalt drin. ul oder p ist grad egal, irgendwas das einen margin-top hat. Hier ist auch das Hintergrundbild drin, wer mag kann ja irgendein Bild reinsetzen und dann schauen wo man das sieht.
Die Hoverfunktion in Firebug zeigt mir, dass contentdiv nicht oben bündig an topdiv liegt, sondern genau den margin-top des Inhalts darunter.
Das wäre meine Frage, warum? Ein Hintergrundbild im contentdiv geht auch nicht bis ganz oben sondern lässt eben diesen margin-top frei.
Und dann noch was komisches. Gebt dem contentdiv einen border:1px solid black;
Dann verhält sich das alles anders. Dann liegt laut Firebug das contentdiv nämlich plötzlich doch oben bündig an. Das erklärt mir dann auch den oberen freien Bereich, denn das ist ja dann der margin.
Und NUR DANN (mit border) geht auch das Hintergrundbild bis ganz oben.
Ich stelle fest dass es am overflow:auto liegt. Wenn ich das rauslösche, verhält sich alles wieder anders. Das muss aber rein, aus einem Grund den ich momentan in dem ganzen HTML-Wust nicht erkenne.
Ich hab da wohl immer noch irgendwas nicht ganz kapiert. Wie wirkt sich das overflow in diesem Fall da aus? Warum kann der margin eines Elements über das Elternelement hinaus ragen? Und wie könnte ich das lösen?
Und wie erklärt es sich dass mit dem overflow der border das Layout umstellt?
Matthias Apsel