nicht angemeldet
Problem mit verschachteltem div und margin
Hi,
folgendes Problem. Ich habe ein div als "Seitenrahmen". Innerhalb dieses Rahmens soll mittels eines zweiten divs ein Logo dargestellt werden, mit jeweils 20px Abstand zum linken und oberen Rand des übergeordneten divs. Hier mein Quelltext:
*************************
<style type="text/css">
#rahmen{
margin: 20px 0px 0px 20px;
width: 400px;
height: 400px;
background:red;
}
#logo{
margin: 15px;
width: 50px;
height: 50px;
background:blue;
}
</style>
</head>
<body>
<div id="rahmen">
<div id="logo">
</div>
</div>
*************************
http://otr.nippie.de/test.html
Im IE wird das ganze so dargestellt, wie ich das gerne hätte, mit Firefox 2 und Safari hält die innere Box keinen Abstand nach oben ein. Also margin-left klappt mit 20px, es klebt allerding geradezu an oberen Rand. Wenn ich die margin-top erhöhe verschiebt sich irgendwann der gesamte Rahmen nach unten, aber nicht nur die blaue box. Kann mir da vielleicht jemand helfen?
Vielen Dank!
-
Hallo Nicky
... mit Firefox 2 und Safari hält die innere Box keinen Abstand nach oben ein.
Weil diese sich an den Standard halten. Lies dir mal Collapsing margins durch.
Du musst die margins von
#rahmenund von#logovoneinenader trennen, z.B. durch einenborder.#rahmen{ border-top:1px solid red; ...Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Weil diese sich an den Standard halten. Lies dir mal Collapsing margins durch.
Ich dachte mir schon, dass ich falsch denke, weil normalerweise eher der IE Faxen macht. Ich verstehe nur nicht, warum es nur mit dem oberen Abstand nicht hinhaut, mit dem Abstand nach links alles so funktioniert wie ich mir das denke
Du musst die margins von
#rahmenund von#logovoneinenader trennen, z.B. durch einenborder.#rahmen{
border-top:1px solid red;
...Hm, ja so geht es, stimmt. Danke-
Hallo Nicky
... Ich verstehe nur nicht, warum es nur mit dem oberen Abstand nicht hinhaut, mit dem Abstand nach links alles so funktioniert wie ich mir das denke
Hast du dir Collapsing margins durchgelesen? (Vielleicht versehtst du die deutsche Übersetzung besser: Zusammenfallende Ränder)
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hast du dir Collapsing margins durchgelesen? (Vielleicht versehtst du die deutsche Übersetzung besser: Zusammenfallende Ränder)
Hab mich wohl falsch ausgedrückt, ich verstehe es schon, mir leuchtet nur nicht ein, warum es so spezifiziert wurde. Trotzdem danke für die ÜBersetzung :-)
-
Hallo Nicky
Hab mich wohl falsch ausgedrückt, ich verstehe es schon, mir leuchtet nur nicht ein, warum es so spezifiziert wurde.
Stelle dir mal eine Reihe aufeinanderfolgender Absätze vor, dazwischen noch ein paar Überschriften. Damit das dann ein ansprechendes Bild ergibt, müsstest du verschiedene Werte für margin-top und margin-bottom angeben und das auch noch davon abhängig, ob es der erste Absatz oder der letzte oder einer dazwischen ist.
Wenn dabei die Ränder zusammenfallen und bei den zusammenfallenden jeweils das größere Maß gilt, dann ergibt sich bei einer identischen Angabe von margin-top und -bottom für alle Absätze fast von allein ein ansprechendes Aussehen. Bei horizontalen Abständen stellt sich dieses Problem eher nicht dar, weil nebeneinander gefloatete Elemente sowieso eine differenziertere Behandlung erfordern.Allerdings führen diese (ansonsten durchaus logischen) Regeln bei ineinandergeschachtelten Elementen zu eher unerwarteten Ergebnissen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-