DIV mit CCS gestalten
Im Layout jeder Website nehmen DIV-Container eine zentrale Bedeutung ein. Mit ihnen können mehrere Elemente gruppiert und positioniert werden. Sie bieten zudem viele Gestaltungsmöglichkeiten. Wir möchten Ihnen zeigen, was man alles mit einer DIV-Box anstellen kann.
DIV mit CSS gestalten
Im Layout jeder Website nehmen DIV-Container eine zentrale Bedeutung ein. Mit ihnen können mehrere Elemente gruppiert und positioniert werden. Sie bieten zudem viele Gestaltungsmöglichkeiten. Wir möchten Ihnen zeigen, was man alles mit einer DIV-Box anstellen kann.
Ein DIV-Element erzeugen
Zunächst legen wir einen DIV-Container im Body des HTML-Dokuments an und füllen ihn mit Text. DIV-Container dehnen sich nämlich abhängig von ihrem Inhalt aus, sofern wir keine Breite und Höhe vorgeben. Demnach wäre die DIV-Box ohne Text für uns unsichtbar.
Hintergrundfarbe per CSS setzen
Schauen wir uns diesen Code im Browser an, stellen wir zunächst keinen Unterschied zu einem Text fest, der nicht von einem DIV-Container umschlossen wird. Daher weisen wir der DIV-Box eine Hintergrundfarbe zu, indem wir Style-Angaben im Head des HTML-Dokuments vornehmen.
Maße des DIV-Containers festlegen
Schon besser! Wir können nun die DIV-Box sehen. Und stellen fest, dass sie sich über die gesamte Breite des HTML-Dokuments erstreckt. Um dieses Verhalten zu ändern, müssen wir wie eingangs angedeutet eine feste Breite notieren.
width: 150px;
Außerdem stört uns, dass der Text am Rand des DIV-Containers klebt. Wir erhöhen also den Innenabstand.
padding: 5px;
Um Abstand zum Dokumentrand oder anderen Elementen zu gewinnen, vergrößern wir zusätzlich den Außenabstand, wobei wir den horizontalen Abstand doppelt so groß wählen wie den vertikalen.
margin: 20px 10px;
Rahmen um die DIV-Box zeichnen
Wir können den DIV-Container mit einem Rahmen versehen. Die Eigenschaften dieses Rahmens können elegant in einer Zeile notiert werden, nämlich in der Reihenfolge Breite, Art und Farbe.
border: 2px solid black;
Interessant ist hier vor allem die Wahl der Rahmenart. Wir können ebenso gestrichelte (dashed) oder gepunktete (dotted) Linien zum Einrahmen verwenden. Sogar 3D-Effekte sind mit groove, ridge, inset und outset möglich.
Abgerundete Ecken mittels CSS
Eine beliebte Styling-Methode ist das Abrunden der DIV-Container-Ecken. Artete dieses grafische Mittel unter veralteten Browsern wie dem Internet Explorer 6 zu einem Gefriemel mit winzigen Bildern aus, unterstützen moderne Browser abgerundete Ecken per CSS. Wir müssen lediglich einen Radius notieren, um zu bestimmen wie stark die Ecken abgerundet werden sollen.
border-radius: 5px;
Schatten per CSS erzeugen
Ebenfalls beliebt und vor einiger Zeit noch umständlich zu realisieren sind Schatten. Glücklicherweise genügt in aktuellen Browsern das Setzen der CSS-Eigenschaft box-shadow. Um einen weichen Schatten hinter unseren DIV-Container zu legen, müssen wir Werte in der Reihenfolge x-Offset, y-Offset, Radius und Farbe angeben.
box-shadow: 2px 2px 5px black;
Sie sehen, dass schon wenige Zeilen CSS-Code genügen, um einen DIV-Container in einen hübschen Kasten zu verwandeln. Der kommende Standard CSS3, der glücklicherweise schon jetzt breite Unterstützung findet, erleichtert das Gestalten anspruchsvoller DIV-Container erheblich.
Webdesign Info
Layoutgestaltung
Entwicklung
CMS
Suchmaschine / SEO
Referenzen
Webdesign Preise
