Kommentare zu: Von Kisten und Kästchen

Von: Ralph

Ralph — Mon, 14 Apr 2008 19:28:05 +0000

Danke für die sehr schöne Zusammenfassung des Artikels und den Hinweisen in den Kommentaren, vor allem von Peter Müller.

Ralph

Von: Achim H

Achim H — Fri, 14 Dec 2007 03:36:31 +0000

Erwähnen sollte man vielleicht noch:

dass im Internet-Explorer ein nicht angegebener bzw. nicht vollständiger Dokumenttyp (Quirksmodus) die Darstellung von blockbildenden Elementen hinsichtlich des Boxmodel falsch interpretiert wird.

dass gefloatete bzw. absolute/fix-positionierte Blockelemente ihre spezifische Breite verlieren und nur noch so breit dargestellt werden, wie der breiteste Inhalt in diesem Element ist.

dass jedes HTML-Element, auch , eine Kiste darstellt, die formatiert werden kann.

mfg Achim

Von: Susanne Jäger

Susanne Jäger — Tue, 04 Dec 2007 12:45:45 +0000

@Peter: Danke für den Hinweis auf die "Design Patterns", das muss ich mir mal genauer anschauen.
Mit dem Hinweis auf "Styling ändert nichts an HTML-Regeln" hast du selbstverständlich völlig recht, der Passus ist leider einer rigiden "nicht mehr als 400 Worte"-Vorgabe zum Opfer gefallen. Eigentlich bin ich ja geschwätziger.

@macx: Ich habe sehr bewusst den Begriff Boxen gewählt, da sich der Artikel ausschliesslich mit der Frage der Darstellung – dem CSS-gesteuerten Layout befasst. Elemente bilden und beschreiben die Struktur im Markup; die Boxen, Kästen oder Schachteln, die ich hier am Wickel habe, beziehen sich dagegen explizit auf die visuelle Darstellung. Vielleicht arbeite ich ja schon zu lange mit diesen Begriffen, aber meine Assoziation zu "Box" ist eher eine Art Karton-Stapel, mit vielfältigen Inhalten und nicht ein großer abgeschlossener Block.
Das Bauprinzip der ineinanderverschachtelten Boxen/Blöcke/Rechtecke ist m.E. für das Verständnis und die Konstruktion komplexerer Seiten – möglicherweiser sogar mit rund oder polygon "erscheinenden" Bestandteilen – von zentraler Bedeutung. Richtig spannend wird es nämlich erst, wenn es einmal darum geht, inline-Boxen/Kästen/Rechteck, die sich nicht wie erwartet verhalten, zu zähmen. Aber das ist eine andere Geschichte …

Von: Peter Müller

Peter Müller — Tue, 04 Dec 2007 12:25:31 +0000

@Eric
Gern geschehen, aber so fundamental war meine Anmerkung gar nicht gemeint.

@macx
Element und Box gibt es beides. Motto:

"Im Quelltext Element, am Bildschirm eine Box"

Block-Elemente erzeugen Block-Boxen, Inline-Elemente Inline-Boxen (oder Inline-Block-Boxen wie bei Grafiken). Und Susanne hat ja schon angesprochen, dass es da noch diverse Mitteldinger gibt …

Im Englischen wird fast jedes viereckige Ding mit was drin als Box bezeichnet. Zigarettenschachteln
ebenso wie Häuser oder DVD-Hüllen.

Von: Eric Eggert

Eric Eggert — Tue, 04 Dec 2007 11:42:52 +0000

Zum Bild: Peter Müller hat uns erlaubt seine Darstellung zu verwenden, die auch in meinen Augen die bessere ist. Vielen Dank.

Von: macx

macx — Tue, 04 Dec 2007 09:22:43 +0000

Ich finde die Bezeichnungen Blockboxen und Inlineboxen ziemlich irreführend, weil ich bei einer Box zwangsläufig immer an einen großen schweren Kasten denke, der nichts neben sich duldet.
Besser finde ich die Bezeichnung Blockelemente und Inlineelemente. Die Verwendung von "Element" statt "Block" nimmt den Wörtern die Visualisierung und es bleibt die Struktur: "Block" und "Inline". Block ist ein Block und geht immer bis zum Rand, Inline ist innen.
So zumindest würde ich es das erklären.

Von: Peter Müller

Peter Müller — Tue, 04 Dec 2007 08:33:34 +0000

Schönen Dank für den kurzen, knackigen Überblick zu "Kisten und Kästchen".

Block-Boxen bilden das Gerüst eines Layouts

Ich habe bei Michael Bowers in "CSS Design Patterns" ein interessantes Konzept gelesen. Er unterscheidet bei den Block-Elementen zwischen "structural", "terminal" und "multi-purpose:

Strukturierende ("structural") Block-Elemente sind z. B. ul oder ol, die nur andere Block-Elemente aber keinerlei Inhalt enthalten dürfen. "Inhalt" definiert er übrigens als "Text" und "Inline-Elemente", wenn ich mich richtig erinnere.
Abschließende ("terminal") Block-Elemente wie z. B. p beenden die Strukturierung und enthalten Inhalt, aber keine anderen Block-Elemente.
Mehrzweck-Elemente ("multi-purpose") wie div können sowohl Block-Elemente als auch Inhalt enthalten.

Diese Unterscheidung erleichtert (mir zumindest) das Merken, welches Element in welchem stehen darf.

Diese Vorgaben können im CSS mit der display-Eigenschaft überschrieben werden.

Was ich in dem Artikel noch etwas deutlicher herausstellen würde ist, dass die Überschreibung der Box-Eigenschaften mit display nur die Darstelltung Box betrifft, nicht den in der HTML-Spezifikation beschriebenen Charakter des Elements.

Im Klartext: Ein Konstrukt wie

`Inhalt`

ist auch dann nicht valide, wenn man h2 per display:inline darstellt. Entsprechende Fragen habe ich in Foren schon des öfteren mal gesehen

Bildquelle Boxmodell

Bei den meisten Abbildungen des Box-Modells ist zumindest für Einsteiger irreführend, dass padding und "Inhaltsbereich" in verschiedenen Farben dargestellt werden. Das suggeriert, dass per CSS eine getrennte Farbgebung möglich ist, wat ja nu nich geht …