|
|||
Problem mit margin
Hallo,
#div1 (ein Kindelement von #div0) zeigt mir das margin-top nicht (Firefox und Opera, Internet Explorer schon ...) an. Das in der Struktur folgende Kindelement #div2 schon ... beziehungsweise kann dem Kindelement von body -> #box0 auch das margin-top zugewiesen werden. Was mache ich falsch? "Wo ist der Haken" bei dieser Sache? Grüße Code:
<!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"> <head> <title>margin-top?</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } body { background:red; } #div0 { background:#666666; width:400px; margin:20px 0 0 0;/*aussenabstand oben zu body funktioniert*/ } #div1, #div2 { background:#999999; width:200px; height:200px; margin:20px 0 0 0;/*aussenabstand von div1 oben zu #box0 funktioniert nicht - warum?*/ } #div1 p { background:transparent; text-align:center; } p { background:white; margin-top:20px; } </style></head> <body> <div id="div0"> <div id="div1"> div1</p></div> <div id="div2"></div> </div> Warum hat div1 keinen margin-top?</p> </body> </html> |
Sponsored Links |
|
|||
warum das nicht hinhaut steh ich grad auf dem schlauch,
border als ersatzlösung für div 1. wäre zumindest vorerst mal ne lösung.
__________________
Wie ich am schnellsten Hilfe bekomme... 1. Beschreibung des Problems 2. HTML Case mit eurem Code 3. CSS Case mit eurem Code 4. evtl. einen Screenshot oder einen Demo Link Bsp: http://www.xhtmlforum.de/viewtopic.php?t=6613 |
Sponsored Links |
|
|||
Hi,
hier ist die Loesung Code:
#div0 { background:#666666; width:400px; padding: 0.1px; margin:20px 0 0 0;/*aussenabstand oben zu body funktioniert*/ } hier noch ein bsp Code:
<!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"> <head> <title>margin-top?</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } body { background:red; } #div0 { background:#666666; width:400px; padding: 0.1px; margin:20px 0 0 0;/*aussenabstand oben zu body funktioniert*/ } #div1, #div2, #div3 { background:#999999; width:200px; height:100px; margin:20px 0 20px 0;/*aussenabstand von div1 oben zu #box0 funktioniert nicht - warum?*/ } #div1 p, #div2 p, #div3 p { background:transparent; text-align:center; } p { background:white; margin-top:20px; } </style></head> <body> <div id="div0"> <div id="div1"> div1</p></div> <div id="div2"> div2</p></div> <div id="div3"> div3</p></div> </div> So gehts mit nem 20px margin oben und unten.</p> </body> </html> Friendly p.s. Danke Sentinel, das Forum gefaellt mir
__________________
klick |
|
|||
sagte der progger zum designer, willkommen auf der spielwiese, ich geh ins bett, dat padding hab ich probiert war nix
4 augen schaffen mehr als 2
__________________
Wie ich am schnellsten Hilfe bekomme... 1. Beschreibung des Problems 2. HTML Case mit eurem Code 3. CSS Case mit eurem Code 4. evtl. einen Screenshot oder einen Demo Link Bsp: http://www.xhtmlforum.de/viewtopic.php?t=6613 |
|
|||
Zitat:
Klar, gäbe es mit padding für box0 oder border für box1 Möglichkeiten das Problem mit margin-top für #box1 zu umgehen, aber ich wüßte doch gerne "was da los ist". Vielleicht kann ein CSS-Kenner dazu eine Erklärung liefern?! Ich hatte auch schon versucht mit der Angabe von position:relative für #box0 ein containing block für die Kindelemente #box1 und #box2 zu erstellen -> dies hatte auch nicht funktioniert. Bisheriges Resume: Entweder verstehen wir drei das Boxmodel nicht oder … |
|
|||
Zitat:
|
|
|||
div0 und div1 sind zwei Boxen im normalen Fluss der Seite, beide haben bei dir einen top-margin von 20px. Es ist nicht relevant, ob es sich bei div1 um ein sog. "in-flow child" von div0 handelt oder nicht, die margins kollabieren trotzdem.
http://www.w3.org/TR/CSS21/box.html#x22 Zitat:
Die Vorschläge mit Padding oder Border sind die gängigsten Ansätze, um das zu verhindern. Prinzipiell verhindern noch alle Eigenschaften, die einen "block formatting context" erzeugen, ebenfalls das Kollabieren, siehe die Quelle oben und dazu http://www.w3.org/TR/CSS21/visuren.html#q15 Zitat:
http://www.satzansatz.de/cssd/onhavi...tml#uncollapse Zitat:
Ed1: bis ich das alles zusammengeklatscht habe, ist die Antwort von fricca schon da. Hmm. Ich sollte vielleicht Textbausteine für die FAQs erstellen. |
|
|||
wie wärs mit:
Code:
#div1 { display: table; /* Gecko [FF 1.5] */ display: inline-block; /* Opera */ background: pink; width: 200px; height: 200px; margin: 20px 0 0 0; } #div2 { background: #999999; width: 200px; height: 200px; margin: 20px 0 0 0; } |
|
|||
Der margin wird sehr wohl eingehalten! Leider wird die entsprechende Hintergrundfarbe nicht angezeigt. Ich habe mal den CODE abgespeckt, nun ist es deutlich im Firefox 1.5 zu sehen dass der Hintergrund das Problem ist und nicht der margin!
Code:
<!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"> <head> <title>margin-top?</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } #div0 { background:#666666; width:400px; } #div1, #div2 { background:#999999; width:200px; height:200px; margin: 150px 0 0 0; } </style> </head> <body> <div id="div0"> <div id="div1"></div> <div id="div2"></div> </div> </body> </html>
__________________
</ulle> |
Sponsored Links |
|
|||
....?
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
DIV immer ganze Breite - normal?!?!? | csski | CSS | 3 | 02.07.2008 13:20 |
*zefix* IHateBill, <tr> Hintergrundfarbe | Scheppertreiber | CSS | 17 | 30.05.2008 13:49 |
Probleme mit IE6 | marthe | CSS | 22 | 24.09.2007 18:07 |