Der DIV-Container ist ein wesentliches Element zur Strukturierung und grafischen Gestaltung von Internetseiten mit HTML und CSS. Viele moderne Layouts von Internetseiten sind durch die Verwendung von DIV-Containern überhaupt erst möglich geworden. Unter einen DIV-Container versteht man dabei einen in Größe, Layout, Position und teilweise auch in der Form festgelegten Bereich auf einer Internetseite, der jeden beliebigen Inhalt enthalten kann.
DIV-Container als Layout-Werkzeug
Das Layout von Webseiten wurde lange Zeit hauptsächlich mit Hilfe von Tabellen oder Framesets realisiert. Diese Techniken hatten aber sowohl konzeptionelle wie gestalterische Grenzen. Mit Einführung von CSS, einer Sprache zur Formatierung von HTML-Dateien, gab es erstmals die Möglichkeit, komplexe Designs und mehrspaltige Layouts ohne die Zweckentfremdung von Tabellen zu verwirklichen. Eine zentrale Rolle kommt dabei dem DIV-Container zu. Er ist der universelle Baustein, aus dem sich jedes denkbare Element einer Webseite frei gestalten lässt. Da jeder DIV-Container weitere DIV-Container mit unabhängigen Eigenschaften beinhalten kann, gehen die gestalterischen Möglichkeiten weit über das hinaus, was mit purem HTML möglich ist.
Der DIV-Container stellt zwar für den Besucher einer Internetseite eine Einheit dar, technisch gesehen besteht er aber aus zwei Teilen, die meist in unterschiedlichen Dateien definiert werden. Der eigentliche DIV-Container befindet sich im HTML-Code einer Internetseite. Die Angaben zur Formatierung des Containers sind gesondert in einer externen CSS-Datei notiert. Wie in HTML üblich, besteht der DIV-Container aus einem öffnenden und einem schließenden Tag, zwischen denen sich der Inhalt des Containers befindet. Hierbei kann es sich um Texte, Bilder, Tabellen oder weitere DIV-Container handeln. Ohne die Daten aus der CSS-Datei hat ein DIV-Container jedoch keinen wesentlichen Einfluss auf das Layout einer Internetseite. Er fasst die in ihm enthaltenen Inhalte lediglich zu einem Blockelement zusammen.
Formatierung des DIV-Containers mittels CSS
Über eine zusätzliche Angabe im öffnenden Tag kann für jeden DIV-Container eine eigene Kennzeichnung (ID) vergeben werden. In der externen CSS-Datei kann der DIV-Container dann über diese ID formatiert werden. Um den Code übersichtlich zu halten, empfiehlt es sich, für die IDs der DIV-Container eindeutige und „sprechende“ Namen zu vergeben. Soll ein DIV-Container eine Navigationsleiste enthalten, wäre ’navi‘ eine passende ID. Um die ID ’navi“ zu referenzieren, muss in der CSS-Datei eine entsprechende Definition mit dem Titel #navi eingefügt werden. Die Raute vor dem Namen weist darauf hin, dass es sich hier nicht um einen Verweis auf ein originäres HTML-Element handelt, sondern auf die ID eines HTML-Elements.
Eine häufige Verwendung von DIV-Containern ist der Einsatz als sogenannte „Wrapper„. Soll eine Webseite zentriert im Browserfenster dargestellt werden, verpackt man den gesamten Inhalt der Seite in einen „Wrapper“, den man anschließend über entsprechende Formatierungen in der CSS-Datei zentriert.
Die eigentlichen Formatierungsangaben werden in der CSS-Datei innerhalb von geschwungenen Klammern { } notiert und durch ein Semikolon getrennt. Hat man einmal den DIV-Container im HTML-Dokument definiert und in der CSS-Datei referenziert, sind den gestalterischen Möglichkeiten kaum noch Grenzen gesetzt. Ob Größe, Position, Rahmendicke und -farbe, Hintergrundbild – praktisch jede Eigenschaft des Containers lässt sich festlegen.
Doch nicht nur die Eigenschaften des DIV-Containers selber, auch seine Inhalte können über der Verweis auf den Container in der CSS-Datei individuell gestaltet werden. Möchte man im DIV-Container eine andere Absatzschriftart als im restlichen Dokument verwenden oder die Größe der Überschriften anpassen, ist das möglich, ohne die Layoutvorgaben für andere Bereiche der Webseite zu beeinflussen.
Größenangaben wie Breite, Höhe und Abstand zu anderen Elementen können sowohl absolut (z.B. in der Anzahl von Pixeln) als auch relativ (z.B. durch Prozentangaben) festgelegt werden. Dadurch sind pixelgenau gestaltete Layouts ebenso möglich wie Seiten, deren Inhalte sich an die Größe des Browserfensters anpassen. Da es mittels CSS auch möglich ist, für verschiedene Ausgabemedien unterschiedliche Layouts zu verwenden, kann über DIV-Container die Darstellung jedes einzelnen Elements für Smartphones und Touchscreens angepasst werden.
Das CSS-Box-Modell
Soll ein DIV-Container eine exakt festgelegte Höhe und Breite haben, ist es ratsam, sich vorher mit dem CSS-Box-Modell vertraut zu machen. Die Parameter height und width (Höhe und Breite) legen nämlich nicht – wie man zunächst vermutet – Höhe und Breite des Containers fest, sondern Höhe und Breite des Inhalts. Die tatsächliche Breite eines Containers ergibt sich aus der Breite des Inhalts, dem Innenabstand (padding), der Rahmendicke und dem Außenabstand (margin). Dabei muss man die Angaben für Innenabstand, Rahmendicke und Außenabstand doppelt (jeweils für die linke und die rechte Seite des Containers) berücksichtigen. Das gilt analog für die Berechnung der Höhe eines DIV-Containers.
Viele Möglichkeiten zur Gestaltung eines DIV-Containers sind noch nicht in der offiziellen Version der CSS-Sprache enthalten, werden aber von vielen Browsern bereits unterstützt. Mit diesen neuen Attributen ist es möglich, dem Hintergrund eines DIV-Containers Transparenz zu verleihen, Schatteneffekte einzusetzen oder die Ecken des Containers abzurunden. Richtig eingesetzt lassen sich damit Layouts erzielen, die vorher nur mit dem intensiven Einsatz von Grafiken möglich waren. Stellt man den Radius für die runden Ecken entsprechend ein, lassen sich sogar kreisrunde Container definieren. Möchte man sicher gehen, dass die eigene Webseite in allen Browsern identisch aussieht, sollte man diese neuen CSS-Regeln mit Vorsicht verwenden.
Zusammenfassung
Der DIV-Container ist ein essenzielles Werkzeug für die Strukturierung und Design von Webseiten, das durch die Kombination von HTML und CSS seinen vollen Funktionsumfang entfaltet. Er ermöglicht komplexe und mehrspaltige Layouts, die über die Grenzen traditioneller Tabellen- oder Frameset-Techniken hinausgehen. Ein DIV-Container kann auch weitere, unabhängig gestaltbare DIV-Container enthalten.
Technisch besteht der DIV-Container aus zwei Teilen: Der Container selbst ist im HTML-Code definiert, während seine Formatierung in einer separaten CSS-Datei erfolgt. Durch die Verwendung von IDs kann jeder DIV-Container individuell gestaltet werden, was auch für die Inhalte des Containers gilt.
Formatierungsangaben werden in der CSS-Datei innerhalb geschwungener Klammern notiert und bieten nahezu unbegrenzte gestalterische Möglichkeiten. Abmessungen können sowohl in absoluten als auch in relativen Werten definiert werden, wodurch eine adaptive Gestaltung für verschiedene Ausgabemedien ermöglicht wird.
Das CSS-Box-Modell ist entscheidend für die präzise Formatierung der DIV-Container. Es berücksichtigt neben den Inhaltsmaßen auch andere Faktoren wie Innen- und Außenabstand sowie Rahmendicke.
Moderne Browser unterstützen bereits viele erweiterte CSS-Attribute, die noch nicht offiziell in der Sprache verankert sind. Diese ermöglichen innovative Designmöglichkeiten wie Transparenz, Schatteneffekte und abgerundete Ecken.
Häufige Fragen und Antworten
Was ist ein DIV-Container?
Ein DIV-Container ist ein essentielles Element zur Strukturierung und grafischen Gestaltung von Internetseiten mit HTML und CSS. Er ist ein festgelegter Bereich auf einer Webseite, der jeden beliebigen Inhalt enthalten kann.
Welche Rolle spielt der DIV-Container beim Webseitenlayout?
Der DIV-Container spielt eine zentrale Rolle beim Webseitenlayout, da er komplexe Designs und mehrspaltige Layouts ohne die Zweckentfremdung von Tabellen ermöglicht. Er ist der universelle Baustein, aus dem sich jede Element einer Webseite frei gestalten lässt.
Wie kann ein DIV-Container formatiert werden?
Ein DIV-Container kann über CSS formatiert werden. Über die Vergabe einer ID können individuelle Formatierungen für jeden DIV-Container vorgenommen werden, wie z.B. Größe, Position, Rahmendicke, Hintergrundbild und vieles mehr.