nicht angemeldet
Hallo!
Terminkalender heute leer, daher jetzt die Frage, die ich vorgestern stellen wollte. Mittlerweile hat mich Andreas mit den collapsing margins in der Badewanne[1][2] bereits einen Schritt weiter gebracht.
Das Konstrukt war/ist folgendes:
<body>
<div id="content">
<div id="main">
<p id="breadctop">Brotkrümmelpfad:<br />
Brotkrümmel, Brotkrümmel, Brotkrümmel, Kümmelbrotkrümmel, ...</p>
<h1>Überschrift erster Kajüte</h1>
<div style="height:85px;background-image:url(screws.jpg);">
<p style="margin-left:50%;margin-top:45px;background:transparent;border:1px solid blue;">Drei kleine Schrauben waren locker</p>
</div>
<h2>Überschrift zweiter Ordnung</h2>
<p>Wer hier Sophia Lorem-Ipsum erwartet, hat gelitten. Sie konnte heute nicht kommen, hat ansonsten damit keine Probleme, glaube ich.</p>
.
.
.
</div>
</div>
</body>
Gewünscht ist, dass der Text "Drei kleine Schrauben waren locker" nicht oben bündig mit der Oberkante des DIVs mit dem Hintergrundbild "screws.jpg" erscheint, sondern eher etwas mittig. IE 6 und 7 stellten das auch so dar. FF und Opera stellten das p-Element hingegen mit 45px Abstand zur darüberliegenden h1-Überschrift dar _und_ verschoben dabei das umgebende DIV. Erst die Angabe eines Borders bewirkt die gewünschte Anzeige in allen Browsern:
<div style="border:1px solid black;height:85px;background-image:url(screws.jpg);">
<p style="margin-left:50%;margin-top:45px;background:transparent;border:1px solid blue;">Drei kleine Schrauben waren locker</p>
</div>
Ist dieses:
<cite collapsing margins>
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
</cite>
der Grund dafür? Irgendwie war ich bisher damit nie in Berührung gekommen.
Eine andere Frage habe ich, ich schätze, es hat auch damit zu tun, betrifft allerdings nur Opera (8 und 9):
Das DIV "content" soll kein Anzeichen von akuter Divitis darstellen, es ist ja für moderne Browsern überflüssig, nur brauch ich es für einen IE 6 - Workaround. Das DIV "main" ist wie folgt formatiert:
div#main {
background-color : #F1FBFF;
margin-left : 15%;
margin-right : 15%;
margin-top : 65px;
margin-bottom : 65px;
padding : 5px;
border : 5px solid #A5CEFF;
}
IEs und FF zeigen den mit margin-bottom gewünschten 65px Abstand zum unteren Rand des DIV "content", der am Ende des Viewports abschließt. Beide Operas nicht, bis ich ein nicht inhaltsleeres Element dazwischen schiebe. Wo jetzt schrauben? ;)
[1] Hatte nicht so ein Grieche in seiner Badewanne irgend eine Theorie entwicklet, und sagte freudestrahlen Eureka?
[2] Ich war noch nie mit Andreas in der Badewanne. Er heißt ja nicht Müller-Lüdenscheidt und ich habe keine Quietsche-Ente.
Viele Grüße aus Frankfurt/Main,
Patrick
_ - jenseits vom delirium - _
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
Nichts ist unmöglich? Doch!
MudGuard