zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit margin

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.12.2005, 13:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2005
Beiträge: 6
poms befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.12.2005, 03:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.08.2005
Beiträge: 122
Sentinel befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.12.2005, 12:16
Neuer Benutzer
neuer user
 
Registriert seit: 30.12.2005
Beiträge: 3
Friendly befindet sich auf einem aufstrebenden Ast
Standard

Hi,

hier ist die Loesung
Code:
#div0 {
background:#666666;
width:400px;
padding: 0.1px;
margin:20px 0 0 0;/*aussenabstand oben zu body funktioniert*/
}
einfach padding: 0.1px; da reinkloppen und es geht

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>
Gruss,
Friendly

p.s. Danke Sentinel, das Forum gefaellt mir
__________________
klick
Mit Zitat antworten
  #4 (permalink)  
Alt 30.12.2005, 12:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.08.2005
Beiträge: 122
Sentinel befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 30.12.2005, 14:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2005
Beiträge: 6
poms befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
einfach padding: 0.1px; (für #box0) da reinkloppen und es geht
hmm … irgendwie interessant.

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 …
Mit Zitat antworten
  #6 (permalink)  
Alt 30.12.2005, 14:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von poms
eine Erklärung
collapsing margins
Mit Zitat antworten
  #7 (permalink)  
Alt 30.12.2005, 14:57
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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:
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths.
Beide Margins werden berücksichtigt, und sie fallen ineinander, sie "kollabieren".

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:
Floats, absolutely positioned elements, inline-blocks, table-cells, and elements with 'overflow' other than 'visible' establish new block formatting contexts.
Die immer wieder erstaunliche Erkenntnis ist, das der IE/Win solche margins nicht kollabieren lässt, wenn die Boxen "layout" haben, dazu genügt eine einfache Dimension. Bruno formuliert es so:
http://www.satzansatz.de/cssd/onhavi...tml#uncollapse
Zitat:
The hasLayout MS-property affects the collapsing of margins between a box and its descendants. According to the spec the top margin of a box with no top padding and no top border should collapse with the top margin of its first in-flow block-level child ... In IE/Win this never happens when the box has layout: it seems that layout prevents the margins of the children to stick out of the containing box.
Ed2: Dies liegt, wie später näher erläutert, daran, dass der IE für jede "layout" box einen "new block formatting context" erstellt. Nicht nur margins werden darin eingeschlossen, sondern auch alles, was sonst aus Boxen heraushängt in CSS2.1: Floats zum Beispiel, der clear-Effekt oder breitere Kindelemente. Floats werden also auto-contained, clear wirkt sich nicht auf außerhalb liegende floats aus, Kindelemente können eine Box ausdehnen, und eben, falls das noch jemand mitliest, margin-collapsing wird verhindert.


Ed1: bis ich das alles zusammengeklatscht habe, ist die Antwort von fricca schon da. Hmm. Ich sollte vielleicht Textbausteine für die FAQs erstellen.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #8 (permalink)  
Alt 30.12.2005, 15:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.03.2005
Beiträge: 286
Chattanooga befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #9 (permalink)  
Alt 30.12.2005, 15:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.12.2005, 15:19
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

....?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:35 Uhr.