nicht angemeldet
Verständnisproblem bei verschachtelten DIV mit margin/padding
0 0 0 
Der Martin
0 
suit
Verständnisproblem bei verschachtelten DIV mit margin/padding
Gunnar BittersmannHallo
ich habe ein Verständnisproblem und finde nirgends eine sauber Beschreibung des Problems, hab aber im Hinterkopf dass ich das schon mal irgendwo gelesen habe... aber eben finds nimmer.
Mein Problem ist folgendes: Ich habe zwei verschachtelte Divs. Ins äussere lege ich ein Backgroundbild, dem Inneren gebe ich rundrum ein margin, um das innere div 20px nach innen zu schieben.
Wenn ich den Code nun wie hier schreibe, wird mir das backgroundbild des äusseren div (#header) 20px nach unten geschoben, wie wenn ich diesem Div ein padding gegeben hätte. Die Grösse des Divs stimmt nur das Backgroundbild wird verschoben und auch nur nach unten, lusterweise nicht nach rechts, dort hätte das innerdiv ja auch ein margin von 20px.
Wenn ich dem #header-inner anstatt margin ein padding mit denselben Werten gebe funzt alles richtig. Und... wenn ich dem #header einen border gebe stellt er das backgroundbild auch an die richtige Position.
Äähh... Bahnhof... Versteh da die Logik nicht.
<div id="header">
<div id="header-inner">
<p>Hier steht mein Header-Text.</p>
</div>
</div>
#header {
background: url(meinbild.jpg) no-repeat;
}
#header-inner {
height: 120px;
margin: 20px 20px 0 20px;
}
Ich weiss, dass man dies nicht zwingend mit 2 Divs lösen muss, ich arbeite aber mit dem Zen Theme in Drupal, welches aus Kompatibilitätsgründen vor allem wegen IE so aufgebaut ist. Die Frage interessiert mich generell, denn das Problem kann ja auch in anderen Konstellationen auftreten.
Kann mir jemand sagen WIESO CSS so eigenartig reagiert und wo ich dazu genauere Beschreibungen finde?
Besten Dank für eure Tipps oder Erklärungen.
Pierre
-
Hi,
Mein Problem ist folgendes: Ich habe zwei verschachtelte Divs. Ins äussere lege ich ein Backgroundbild, dem Inneren gebe ich rundrum ein margin, um das innere div 20px nach innen zu schieben.
Wenn ich den Code nun wie hier schreibe, wird mir das backgroundbild des äusseren div (#header) 20px nach unten geschoben, wie wenn ich diesem Div ein padding gegeben hätte.
Ich vermute, dass eher dieses aeussere Div selbst um 20px nach unten verschoben wird. (Hast du das mal bspw. mittels FireBug ueberprueft?)
Beschaeftige dich mit collapsing margins:
"The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."Die Grösse des Divs stimmt nur das Backgroundbild wird verschoben und auch nur nach unten, lusterweise nicht nach rechts, dort hätte das innerdiv ja auch ein margin von 20px.
Fuer die seitlichen margins ist ja auch nichts entsprechendes im Standard definiert.
Wenn ich dem #header-inner anstatt margin ein padding mit denselben Werten gebe funzt alles richtig. Und... wenn ich dem #header einen border gebe stellt er das backgroundbild auch an die richtige Position.
Na siehste - siehe oben.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Treffer! :-)
Herzlichen Dank, bin am lesen.
-
Hallo,
ich grüble immer noch, wer sich einen solchen Humbug ausgedacht hat, und was derjenige sich wohl dabei gedacht haben mag.
Denn ich habe zwar schon oft Erklärungen oder Definitionen dazu gelesen, aber noch nie irgendwas, das auch nur im Entferntesten den Sinn von collapsing margins verdeutlicht.
Scheint so, als hätten sich die CSS-Spezialisten etwas Raffiniertes, aber völlig sinnfreies ausgedacht - mit dem einzigen Zweck, die Webautoren in den Wahnsinn zu treiben.
So long,
Martin--
Abraham sprach zu Bebraham: Kann i mal dei Cebra ham?-
@@Der Martin:
ich grüble immer noch, wer sich einen solchen Humbug ausgedacht hat,
Ich grüble immer noch, warum du das Humbug nennst.
und was derjenige sich wohl dabei gedacht haben mag.
Ein Textabsatz habe oben und unten Abstand:
p {margin: 1em 0}Folgen nun zwei Absätze hintereinander, soll zwischen ihnen der doppelte Abstand sein?
Wohl kaum. Gut, dass die Randabstände zusammenfallen!
Scheint so, als hätten sich die CSS-Spezialisten etwas Raffiniertes, aber völlig sinnfreies ausgedacht
NAK.
mit dem einzigen Zweck, die Webautoren in den Wahnsinn zu treiben.
Mich würde es in den Wahnsinn treiben, wenn man sich keine collapsing margins ausgedacht hätte.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Hallo Gunnar,
collapsing margins
ich grüble immer noch, wer sich einen solchen Humbug ausgedacht hat,
Ich grüble immer noch, warum du das Humbug nennst.weil ich es so empfinde.
Ein Textabsatz habe oben und unten Abstand:
p {margin: 1em 0}
Folgen nun zwei Absätze hintereinander, soll zwischen ihnen der doppelte Abstand sein?Selbstverständlich. So bin ich es seit Ewigkeiten von Textverarbeitungen gewöhnt.
Abgesehen davon: Nach meinem Verständnis hat ein Textabsatz im Normalfall keinen Abstand nach oben, sondern das vorangehende Element (Absatz, Überschrift o.ä.) einen Abstand nach unten. Ein Element, das nach oben *und* nach unten Abstand bekommt, ist für mich eher die Ausnahme.Aber die collapsing margins schlagen ja nicht nur bei aufeinanderfolgenden Elementen zu, wo ich es nach deiner Darstellung noch (widerwillig) einsehen könnte. Sondern die Regel gilt ja auch bei verschachtelten Elementen - und da sehe ich ebensowenig ein, warum der obere Rand eines Elements mit dem oberen Rand seines Containers zusammenfallen sollte. Logisch und intuitiv wäre für mich auch hier, dass sie sich addieren. Das ist ja im RL auch so, wenn irgendwelche Boxen ineinander gestellt werden.
Gut, dass die Randabstände zusammenfallen!
Da sind wir offensichtlich unterschiedlicher Meinung.
mit dem einzigen Zweck, die Webautoren in den Wahnsinn zu treiben.
Mich würde es in den Wahnsinn treiben, wenn man sich keine collapsing margins ausgedacht hätte.Oha.
Schönes Wochenende,
Martin--
why the heck do you jerk think, that wir ein doppelposting nicht bemerken, wenn you zwischendurch the sprache wechselst?
(wahsaga)-
@@Der Martin:
Ein Element, das nach oben *und* nach unten Abstand bekommt, ist für mich eher die Ausnahme.
So selten kommen Überschriften nun auch nicht vor.
die Regel gilt ja auch bei verschachtelten Elementen - und da sehe ich ebensowenig ein, warum der obere Rand eines Elements mit dem oberen Rand seines Containers zusammenfallen sollte. Logisch und intuitiv wäre für mich auch hier, dass sie sich addieren. Das ist ja im RL auch so, wenn irgendwelche Boxen ineinander gestellt werden.
?? Welche Boxen im RL haben denn Außenabstand? Außenabstand hieße: Du darfst mir nicht näherkommen als soundsoviel.
Beispiel aus dem Nicht-gerade-RL*: Die Voyager habe margin: 500m. Der Delta Flyer habe margin: 200m. Wie weit darfst du dich der Voyager nähern, wenn der Delta Flyer drinnen auf dem Hangardeck steht? 700m?
Wäre das wirklich logisch, dass sich die Abstände addieren?
Live long and prosper,
Gunnar* aber das Beispiel sollte auch für Gelegenheits-Trekkie verständlich sein
--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Yerf!
Beispiel aus dem Nicht-gerade-RL*: Die Voyager habe margin: 500m. Der Delta Flyer habe margin: 200m. Wie weit darfst du dich der Voyager nähern, wenn der Delta Flyer drinnen auf dem Hangardeck steht? 700m?
Wenn ich mich der Voyager auf 500m nähere hab ich immernoch mindestens 700m Abstand zum Delta Flyer, da dieser aufgrund seines Margins ja midestens 200m von der Ausenhülle entfernt stehen muss.
Allerdings ist das Beispiel schlecht gewählt, da die Ausenhülle als Border collapsing Margins ausschließt.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Hallo,
?? Welche Boxen im RL haben denn Außenabstand? Außenabstand hieße: Du darfst mir nicht näherkommen als soundsoviel.
Beispiel aus dem Nicht-gerade-RL*: Die Voyager habe margin: 500m. Der Delta Flyer habe margin: 200m.
Ergo: Der Delta Flyer muss von der Außenwand der Voyager mindestens 200m weit nach innen entfernt sein.
Wäre das wirklich logisch, dass sich die Abstände addieren?
Ja. Du stellst in einem Labor ein Gerät auf, das wegen der Hochspannung einen seitlichen Sicherheitsabstand (margin) von 1m von allen anderen Gegenständen verlangt. Außerhalb der Laborwand gilt aus Lärmschutzgründen ein Sicherheitsabstand (margin) von 20m. Wie weit steht das Hochspannungsgerät also von der Wand weg?
* aber das Beispiel sollte auch für Gelegenheits-Trekkie verständlich sein
Hinreiß^Hchend, danke. ;-)
So long,
Martin--
Die letzten Worte des Architekten:
Mir fällt da gerade was ein...-
@@Der Martin:
Ergo: Der Delta Flyer muss von der Außenwand der Voyager mindestens 200m weit nach innen entfernt sein.
Ja, darauf, dass auch border im Spiel ist, hatte Harlequin schon hingewiesen.
OK, wir holen den Delta Flyer aus dem Hangardeck und lassen ihn auf einem Planeten mit margin: 1000m landen.*
Wie weit darf sich ein Bird of Prey** sich nun dem Planeten nähern? 1200m??
Wäre das wirklich logisch, dass sich die Abstände addieren?
Ja.
Immer noch?
Du stellst in einem Labor ein Gerät auf, […] Außerhalb der Laborwand […]
Wieder der Fall mit border. Denk doch mal frei von solchen Zwängen! ;-)
Live long and prosper,
Gunnar* Ja, der Delta Flyer darf den Planeten wegen [insert your favorite technobabbel here] anfliegen.
** den’s auch wegen [insert your second favorite technobabbel here] in den Delta-Quadranten verschlagen hat
--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Hallo,
Ergo: Der Delta Flyer muss von der Außenwand der Voyager mindestens 200m weit nach innen entfernt sein.
Ja, darauf, dass auch border im Spiel ist, hatte Harlequin schon hingewiesen.ja, ich gebe zu, das ist wohl oft der Fall.
Wäre das wirklich logisch, dass sich die Abstände addieren?
Ja.
Immer noch?Ja, oft. Nicht immer.
Du stellst in einem Labor ein Gerät auf, […] Außerhalb der Laborwand »» Wieder der Fall mit border. Denk doch mal frei von solchen Zwängen! ;-)
Okay: Angenommen, die Bauvorschriften der Stadt verlangen, dass du nur maximal bis auf 1m an deine Grundstücksgrenze Pflastersteine legen darfst. Wenn du aus dem Auto aussteigst, möchtest du aber noch wenigstens 50cm befestigten Untergrund haben, damit du nicht in den Matsch treten musst. Wie weit von der Grundstücksgrenze entfernt musst du parken?
So long,
Martin--
Wenn der Computer wirklich alles kann,
dann kann er mich mal kreuzweise.-
Yerf!
Okay: Angenommen, die Bauvorschriften der Stadt verlangen, dass du nur maximal bis auf 1m an deine Grundstücksgrenze Pflastersteine legen darfst. Wenn du aus dem Auto aussteigst, möchtest du aber noch wenigstens 50cm befestigten Untergrund haben, damit du nicht in den Matsch treten musst. Wie weit von der Grundstücksgrenze entfernt musst du parken?
Jetzt kommt vermutlich gleich der Einwand, dass es hier nicht um Margin sondern um Padding geht ;-)
Und auch wenn die CCS-Specs in manchen Fällen ganz praktisch sein mögen, so sind sie in den meisten Fällen eher komisch.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
-
-
-
-
-
Äähh... Bahnhof... Versteh da die Logik nicht.
Ich weiss, dass man dies nicht zwingend mit 2 Divs lösen muss, ich arbeite aber mit dem Zen Theme in Drupal, welches aus Kompatibilitätsgründen vor allem wegen IE so aufgebaut ist.
kompatiblitätsgründe heisst umgehung des box-model-"bug", der durch mangelden doctype hervorgerufen wird - wenn mans richtig raucht, kann man sich diesen workaround sparen
Kann mir jemand sagen WIESO CSS so eigenartig reagiert und wo ich dazu genauere Beschreibungen finde?
siehe oben