DIV-Container

Für die Realisierung von tabellenlosem Webdesign sind DIV-Container sehr nützlich. DIV-Container sind wie der Name schon sagt, einfache Container. Also erstmal eine leere Hülle. Ein DIV-Container kann mit einer ID versehen werden. Somit ist es möglich, DIV-Container anzusteuern. Im Zusammenspiel mit CSS lassen sich mit DIV-Containern wunderbar tabellenlose Webseiten realisieren. In der Regel werden DIV-Container in Pixel (px) oder Prozent (%) bemaßt. Andere Bemaßungen wie Inch, Millimeter usw. sind jedoch auch möglich. Erstellen wir mal unseren ersten Container:

<div id="container1"><strong>Inhalt in einem DIV-Container</strong></div>

Für DIV-Container gibt es den Befehl div, hier haben wir gleich das Attribut id="container1" hinzugefügt. Das Ganze ist zudem mit dem strong-Befehl fett gestaltet worden und sieht im Browser folgendermaßen aus:

Noch ist gar nicht sichtbar, bis zu welchem Bereich unser Container geht. Also füllen wir es mal mit einer Hintergrundfarbe:

<div id="container2" style="background: #FF0000;"><strong>Inhalt in einem DIV-Container mit Hintergrundfarbe </strong></div>

Wir haben nun unser Code erweitert und mit style="background: #FF0000;" eine Hintergrundfarbe eingefügt. Das ist zwar nicht professionell, da man das Aussehen in einer CSS-Datei gestalten sollte. Diese Möglichkeit geht jedoch auch und sollte erstmal zur Beispieldemonstration reichen. Mit style= beginnen wir damit festzulegen, dass jetzt Anweisungen zum Aussehen kommen. Innerhalb der " " legen wir mit dem Befehl background: #FF0000 fest, dass der Hintergrund (background) mit der Farbe #FF0000 (Farbcode für Rot) gefüllt werden soll. Ein Semikolon ; trennt einzelne Anweisungen. Wir könnten also hinter dem Semikolon noch weitere Attribute hinzufügen, zum Beispiel style="background: #FF0000; width: 200px;". Der obige Code sieht jedenfalls im Browser wie folgt aus:

Probieren wir nun einen Container mit mehreren style-Attributen

<div id="container"

style="background: #00FF00; width: 200px; height: 200px; border: 1px solid #000000"></div>

Hier haben wir neben der Farbe noch festgelegt, die Breite mit width: 200px, die Höhe mit height: 200px sowie einen Rahmen mit border: 1px solid #000000", jeweils mit einem Semikolon ; getrennt. Mit diesem Code erstellen wir einen grünen Container mit 200px Breite und Höhe sowie einen durchgezogenen schwarzen Rahmen in 1px breiter Stärke und das sieht im Browser folgendermaßen aus: