nicht angemeldet
Frage zu margin
0 0 0 0 
MudGuard
0 Frage zu (Un-) Sinn von collapsing margins
0 0 0 0 
Der Martin
0 0 MudGuard
0 Der Martin
Frage zu margin
Gunnar BittersmannIn folgendem code wird über dem container_aussen ein 8px breiter roter Balen gerendert.
Ich verstehe nicht warum, ich habe doch margin-top:0; angegeben.
dem #container habe ich ein margin-top: 10px; gegeben.
Da hätte ich eine grünen Balken (HG des aussencontainers) erwartet.
Habe ich da einen gröberen Denkfehler oder was läuft da schief
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
div {
margin:0;
padding:0;
}
body { background-color: red;}
#container_aussen {
width:990px;
margin:auto;
margin-top:0;
background-color: green;
}
#container {
margin-left:20px;
margin-right:30px;
margin-top: 10px;
background-color:white;
}
</style>
<title>TEST</title>
</head>
<body>
<div id='container_aussen'>
<div id='container'>
Content im container
</div>
</div>
</body>
</html>
-
In folgendem code wird über dem container_aussen ein 8px breiter roter Balen gerendert.
Der wird nicht gerendert. Das ist der Body mit der Hintergrundfarbe.
Ich verstehe nicht warum, ich habe doch margin-top:0; angegeben.
Ja, aber im falschen Element. Mach mal
body {margin :0px;}dem #container habe ich ein margin-top: 10px; gegeben.
Da hätte ich eine grünen Balken (HG des aussencontainers) erwartet.Der ist ja auch vorhanden
Habe ich da einen gröberen Denkfehler oder was läuft da schief
Beides würd ich sagen ;)
-
In folgendem code wird über dem container_aussen ein 8px breiter »» »» Ich verstehe nicht warum, ich habe doch margin-top:0; angegeben.
Ja, aber im falschen Element. Mach mal
body {margin :0px;}mit
body {
margin:0;
padding:0;
background-color: magenta;
}klappte es in IE7, in FF3 und safari klappt es nicht.
dem #container habe ich ein margin-top: 10px; gegeben.
Da hätte ich eine grünen Balken (HG des aussencontainers) erwartet.
Der ist ja auch vorhandenguter hinweis! Es klappt aber nur im IE7, in FF3 und safari klappt es nicht.
Was muss ich für FF und safari ändern?
-
Ja, aber im falschen Element. Mach mal
body {margin :0px;}mit
body {
margin:0; SCHON WIEDER KEINE ANGABEN. 0 SCHAFE? ZIEGEN?
padding:0;
background-color: magenta;
}Schreib ich chinesisch ?
Du sollst doch einfach nur
body {margin :0px;}
schreiben -> LOS COPY PASTEWas muss ich für FF und safari ändern?
Validen CODE! Du willst mir doch nicht sagen, dass der Firefox im Vergleich zum IE validen Code nicht erkennt?
Wenn das nicht klappt dann paste nochmal den geänderten Code. Genauso wie er bei dir nicht funktioniert.
-
margin:0; SCHON WIEDER KEINE ANGABEN. 0 SCHAFE? ZIEGEN?
0 braucht keine Einheit (ist bei null ja auch egan ob px schafe oder ziegen:-)
habe es trotzdemwie vorgeschlagen au 0px gesetzt.schreiben -> LOS COPY PASTE
Done! Geiches Ergebnis.
IE wie erwartet FF und safari nicht.Validen CODE!
code ist valide! habs gecheckt!
Hier nochmal der code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
div {
margin:0;
padding:0;
}
body {
margin:0px;
padding:0;
background-color: red;
}#container_aussen {
width:990px;
margin:auto;
margin-top:0;
position : relative;
background-color: green;
}
#container {
margin-left:20px;
margin-right:30px;
margin-top: 10px;background-color:white;
}</style>
<title>TEST</title>
</head>
<body>
<div id='container_aussen'>
<div id='container'>
<p>Content im container</p>
</div>
</div>
</body>
</html>-
Hallo :)
Entspricht das Deinen Erwartungen, wie es im FF gezeigt werden soll:
body {
margin:0;
padding:0;
background-color: red;
}#container_aussen {
margin: 0 auto 0 auto;
padding: 10px 0 0 0 ;
width: 990px;
background-color: green;
}
#container {margin: 10px 30px auto 20px; background-color: white;
}container_aussen hat jetzt 10px padding nach oben.
mfg
cygnus--
Die Sache mit der Angel und dem ><o(((°> hat immer einen Haken ...-
Hallo :)
Entspricht das Deinen Erwartungen, wie es im FF gezeigt werden soll:
Danke.
Nein, nur im IE7 wird es wie erwartet angezeigt. in FF3 und safari nicht.Ich erwarte:
Der grüne container_aussen wird ganz am oberen rand angezeigt.
der weisse container soll mit einem rand oben im grünen angezeigt werden.in FF3 und safari sehe ich:
oben einen roten rand
und keinen grünen rand über dem weissen container.-
Hallo :)
Ich erwarte:
Der grüne container_aussen wird ganz am oberen rand angezeigt.
der weisse container soll mit einem rand oben im grünen angezeigt werden.in FF3 und safari sehe ich:
oben einen roten rand
und keinen grünen rand über dem weissen container.Das verstehe ich nicht. Ich habe zwar den FF3 nicht,
aber die Ansicht sieht bei mir im IE7, in Safari und im FF2 gleich aus, nur der Safari macht den grünen Rand oben etwas breiter als FF2 und IE7.mfg
cygnus--
Die Sache mit der Angel und dem ><o(((°> hat immer einen Haken ...-
Das verstehe ich nicht. Ich habe zwar den FF3 nicht,
aber die Ansicht sieht bei mir im IE7, in Safari und im FF2 gleich aus, nur der Safari macht den grünen Rand oben etwas breiter als FF2 und IE7.sorry, das war mein Fehler.
es verhält sich in allen drei browsern wie gewünscht.Könntest Du noch kurz erklären, warum das paddig von 10px erforderlich ist.
-
Das verstehe ich nicht. Ich habe zwar den FF3 nicht,
aber die Ansicht sieht bei mir im IE7, in Safari und im FF2 gleich aus, nur der Safari macht den grünen Rand oben etwas breiter als FF2 und IE7.Das padding regelt den Innenabstand. Eigentlich sollte man den Innenabstand nehmen, statt den Außenabstand eines Elementes innerhalb eines weiteren.
-
Das verstehe ich nicht. Ich habe zwar den FF3 nicht,
aber die Ansicht sieht bei mir im IE7, in Safari und im FF2 gleich aus, nur der Safari macht den grünen Rand oben etwas breiter als FF2 und IE7.Das padding regelt den Innenabstand. Eigentlich sollte man den Innenabstand nehmen, statt den Außenabstand eines Elementes innerhalb eines weiteren.
Das verstehe ich immernoch nicht!
das margin-top:0 wird nur hergenommen, wenn ein positives padding-top gesetzt ist.ICh will gar keinen (Innenabstand) padding im container. ICh wir nur KEINEN Aussenabstand oben.
KAnn das jemand klären?
-
@@tonja:
ICh will gar keinen (Innenabstand) padding im container. ICh wir nur KEINEN Aussenabstand oben.
KAnn das jemand klären?
Hast du auch bedacht, dass das 'p'-Element durch das Browserstylesheet von 0 verschiedenen margin-top (und margin-bottom) hat?
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Hast du auch bedacht, dass das 'p'-Element durch das Browserstylesheet von 0 verschiedenen margin-top (und margin-bottom) hat?
nö. das war es auch :-) Danke!
-
-
-
-
-
-
-
-
-
-
-
-
In folgendem code wird über dem container_aussen ein 8px breiter roter Balen gerendert.
Ich verstehe nicht warum, ich habe doch margin-top:0; angegeben.Aber du hast den default body-mass nicht berücksichtigt.
Airbag ist vorhanden, falls nicht abtrainiert.mfg Beat
-
<style type="text/css">
body { margin:0px;background-color: red;}#container_aussen {
width:990px;
margin:auto; ????Was soll das? erst auto
margin-top:0; dann fest? Wieder ohne px!
background-color: green;
}
#container {
margin-left:20px;
margin-right:30px;
margin-top: 10px;background-color:white;
}Schöner wär ja die Notation so:
body { margin:0px;background-color: red;}.container {
position : relative;
width : 990px;
background-color: green;
}.container.Inhalt {
margin : 10px 30px 0px 20px;
}</style>
<title>TEST</title>
</head>
<body>
<div class='container'>
<div class='Inhalt'>
Content im container
</div>
</div>
</body>
</html> -
Hi,
In folgendem code wird über dem container_aussen ein 8px breiter roter Balen gerendert.
Ich verstehe nicht warum, ich habe doch margin-top:0; angegeben.Du hast die collapsing margins nicht berücksichtigt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Du hast die collapsing margins nicht berücksichtigt.
bin wohl auch gerade "Opfer" von collapsing margins geworden und bei meinen Recherchen auch auf diesen Thread gestoßen.
Hat mich jede Menge Zeit und Nerven gekostet, bis mir klar war, warums mir alles durcheinanderschmeißt.
Wenn ich in ein DIV was reinsetze, was ein margin hat, dann will ich doch, daß dieser margin zum umschließenden Element (DIV) eingehalten wird.
Ich halte collapsing margins also erstmal für absoluten Blödsinn.
Oder kann mir jemand den Sinn von collapsing margins erläutern und mich vom Gegenteil überzeugen?
gruß
peter-
Hallo :)
Ich halte collapsing margins also erstmal für absoluten Blödsinn.
Kasper in der Box.
Oder kann mir jemand den Sinn von collapsing margins erläutern und mich vom Gegenteil überzeugen?
Ich vermute, dass man die äussere Box nur als Umkarton für innere Boxen betrachtet hat. Dabei richtet sich der Abstand der verschachtelten Boxen nach der grösseren margin-Angabe, die kleinere wird ignoriert.
Betroffen ist davon CSS 2.0
CSS 2.1 soll margin nicht kollabieren lassen.
Möglicherweise der Grund, warum der IE7 das anders anzeigt als FF2 und Safari?mfg
cygnus--
Die Sache mit der Angel und dem ><o(((°> hat immer einen Haken ...-
Oder kann mir jemand den Sinn von collapsing margins erläutern und mich vom Gegenteil überzeugen?
Ich vermute, dass man die äussere Box nur als Umkarton für innere Boxen betrachtet hat. Dabei richtet sich der Abstand der verschachtelten Boxen nach der grösseren margin-Angabe, die kleinere wird ignoriert.
Betroffen ist davon CSS 2.0
CSS 2.1 soll margin nicht kollabieren lassen."In CSS 2.1, horizontal margins never collapse."
Nur für horizontale Margins, nicht aber für die betroffenen verticalen margins. Wobei ich diese Spez. für sehr problematisch halte.
mfg Beat
-
Hallo :)
"In CSS 2.1, horizontal margins never collapse."
Nur für horizontale Margins, nicht aber für die betroffenen verticalen margins. Wobei ich diese Spez. für sehr problematisch halte.
Das bringt mich jetzt aber durcheinander.
Eigentlich habe ich schon genug Probleme damit, dass ich rechts und links verwechsle.
Es ging doch um ein horizontales margin, das der inneren Box auf den Kopf fiel?horizontal
v
e
r
t
i
k
a
lmfg
cygnus--
Die Sache mit der Angel und dem ><o(((°> hat immer einen Haken ...-
Hallo,
"In CSS 2.1, horizontal margins never collapse."
ach was ... ?
Nur für horizontale Margins, nicht aber für die betroffenen verticalen margins. Wobei ich diese Spez. für sehr problematisch halte.
Das bringt mich jetzt aber durcheinander.Mich auch. Ich dachte bisher immer, *nur* die horizontalen Margins würden kollabieren.
Eigentlich habe ich schon genug Probleme damit, dass ich rechts und links verwechsle.
Ja, das ist ein Phänomen, das mehrheitlich bei Frauen auftritt. ;-)
Es ging doch um ein horizontales margin, das der inneren Box auf den Kopf fiel?
Ja, sozusagen.
h o r i z o n t a l
v
e
r
t
i
k
a
lDas ist sehr klar und anschaulich dargestellt. So sehe ich das auch.
Schönen Abend noch,
Martin--
Die letzten Worte des stotternden Beifahrers:
Frei... frei... frei... freilich kommt da was!!-
Hallo :)
Nur für horizontale Margins, nicht aber für die betroffenen verticalen margins. Wobei ich diese Spez. für sehr problematisch halte.
Das bringt mich jetzt aber durcheinander.Mich auch. Ich dachte bisher immer, *nur* die horizontalen Margins würden kollabieren.
Neeeee, auch einige von den Vertikalen:
Two or more adjoining vertical margins of block boxes in the normal flow collapse.
Ich habe ja einen bösen Verdacht.
Meine Englischkenntnisse sind bescheiden, und wegen Beat und derMartin habe ich die Seite jetzt zweimal ganz genau und langsam durchgelesen.War das Absicht?
mfg
cygnus--
Die Sache mit der Angel und dem ><o(((°> hat immer einen Haken ...-
Hi,
Mich auch. Ich dachte bisher immer, *nur* die horizontalen Margins würden kollabieren.
Neeeee, auch einige von den Vertikalen:Nein. Es kollabieren ausschließlich vertikale Margins:
In CSS 2.1, horizontal margins never collapse.
Vertical margins may collapse between certain boxes
(Quelle: siehe mein erstes Posting in diesem Thread)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
-
-
Hallo Peter,
Ich halte collapsing margins also erstmal für absoluten Blödsinn.
ich auch.
Oder kann mir jemand den Sinn von collapsing margins erläutern und mich vom Gegenteil überzeugen?
Die Frage habe ich auch schon gelegentlich gestellt - sowohl mir selbst im stillen, als auch anderen. Eine plausible Erklärung für diesen Unsinn hat mir noch niemand geben können. Das scheint irgendeine wahnwitzige Idee der W3C-Selbstfindungsgruppe zu sein, wahrscheinlich nach dem sechsten Bier. Ebenso wie das Box-Modell, das die Größe einer Box nach ihren Innenmaßen festlegt.
So long,
Martin--
"Drogen machen gleichgültig."
- "Na und? Mir doch egal."-
Hi,
Die Frage habe ich auch schon gelegentlich gestellt - sowohl mir selbst im stillen, als auch anderen. Eine plausible Erklärung für diesen Unsinn hat mir noch niemand geben können. Das scheint irgendeine wahnwitzige Idee der W3C-Selbstfindungsgruppe zu sein, wahrscheinlich nach dem sechsten Bier. Ebenso wie das Box-Modell, das die Größe einer Box nach ihren Innenmaßen festlegt.
nach weiteren Recherchen bin ich darauf gestoßen, daß das wohl bei Listen etc. einen Sinn machen kann. Da kann man dann margins angeben ohne beachten zu müssen, daß der nächste Listeneintrag ja auch ein margin hat. Es wird einfach der angegebene Abstand zum nächsten Listeneintrag eingehalten. Ergibt dann einen gleichmäßigen Abstand auch zu einem folgenden Element ohne margin. Naja, obs das rechtfertigt, so einen Quatsch zu machen....?
Das mit den Boxen ärgert mich auch ohne Ende.
Bei Änderung von border oder padding muß dann evtl. auch jedesmal die Box-Größe geändert werden. Und eine Größenangabe von 100% ist ja auch nur möglich ohne border, margin oder padding, sonst schiebts das Ding raus.
Wenn dann wenigstens sowas möglich wär wie "height:100%-20px;" wärs ja noch erträglich.Hab mich jetzt auch mal etwas mit mehrspaltigem Layout in CSS beschäftigt.
Da entsteht ja eine eigene Wissenschaft, die mit float und margin arbeitet.
Im Prinzip sind das ja auch alles nur Krücken-Konstrukte, die mehr schlecht als recht das nachbasteln, was Tabellen seit Urzeiten schon besser können.Die sollten sich ruhig mal ihr siebtes oder achtes Bier gönnen und dann darüber nachdenken, entsprechende Spalten-Elemente in CSS einzuführen.
gruß
peter
-
-
-