Hilfe zum Thema

Index > mehr ... > Elementare Bausteine > Container, Spalten, Elemente

Container, Spalten, Elemente

Elemente

die Grundbausteine für den Aufbau einer Seite. Dazu zählen beispielsweise Textfelder, Bilder, Formularfelder, etc.

Elemente nehmen grundsätzlich die gesamte verfügbare Breite ein und können als Einheit angesprochen werden.

 
Textelement
Textelement

Container und Spalten

Sollen einzelne Elemente in mehreren Spalten nebeneinander angezeigt werden oder gemeinsame Stile erhalten, werden diese in einem Bausteinsystem aus Containern und Spalten angeordnet.

 
Textelement
Textelement
Textelement
Textelement
Textelement
Textelement
 

Die Skizze zeigt ein dreispaltiges Layout.

Als Rahmen dient ein Container (rot gepunktet), der die gesamte verfügbare Breite einnimmt.

Innerhalb des Rahmencontainers befinden sich, nebeneinander angeordnet, die drei Spalten (grün gepunktet)

Jede Spalte kann ihrerseits beliebig viele Elemente (Texte, Bilder, in der Skizze blau gepunktet) aufnehmen.

Technisch betrachtet ist ein Container ein <div>-Abschnitt mit den Stilen width:auto und clear:both

Spalten sind <div>-Abschnitte mit festgelegter Breite und float:left.

Schachteln von Containern

Der beschriebene Aufbau erlaubt ein beliebig tiefes Schachteln von Containern und Spalten und somit auch die Realisierung komplexerer Seitenlayouts

 
Textelem
Textelem
Textelement
Textelem
Textelem
Textelem
Textelem
Textelem

Mehr dazu: