100% unverbindliche Anfrage

Bitte wählen Sie:

DIV-Container Begriffserklärung und Definition

div-containerDer 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.



Zurück zur Hauptseite: d

Sie haben Fragen?

Kostenlose, unverbindliche Erstberatung:

Anrufer aus Deutschland:
Tel. 0771 - 1589439
Internationale Beratung:
Tel. +49771 - 1589439
Anfrage per Email:
buero@seo-analyse.com

» zum Anfrage-Formular

Onpage Optimierung

Suchmaschinenoptimierung im Quelltext

Wir schaffen für Ihre Webseite oder Ihren Shop eine optimale Onpage-Basis für weiterführende Optimierungsmaßnahmen.

Offpage Optimierung

Offpage Suchmaschinenoptimierung

Natürlicher Linkaufbau gemäß den Regeln der Suchmaschinen - wir bieten ihn!

SEO Beratung

SEO Beratung

Unsere Spezialisten beraten Sie gerne hinsichtlich Ihrer akuten oder strategischen Fragen.

Ranking Monitoring

Ranking Optimierung

Bei uns Standard: qualifiziertes Monitoring Ihrer Google Platzierungen.

Suchmaschinenoptimierung für Google

Google Suchmaschinenoptimierung

Wir kombinieren Google Optimierung mit ganzheitlicher Suchmaschinenoptimierung.

SEO Strategie

SEO Strategie

Praxisbewährte Strategien, die auf Zahlen und Fakten basieren.

SEO Tools

SEO Tools

Immer im Bild: professionelle SEO Tools informieren Sie über den Status Quo.