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.




Social Media
(04.09.2015)

Die Sozialen Medien schnell erklärt. Facebook, Twitter, Xing und Co in der Übersicht.
...mehr lesen
Call to Action
(03.09.2015)

Darf ich bitten? Natürlich gehört ein Besucher dezent aufgefordert auch etwas auf Ihrer Webseite zu tun. Ein Kontaktformular auszufüllen, einen Anruf zu tätigen oder einen Artikel in den Warenkorb hinzuzufügen. Wir erklären wie man das am besten macht.
...mehr lesen
Google Analytics
(03.09.2015)

Das umfangreiche Statistiktool Google Analytics kurz vorgestellt. Die wichtigsten Funktionen im Schnelldurchlauf.
...mehr lesen
Webseiten Texte gestalten
(25.08.2015)

Einen ansprechenden Text zu gestalten ist gar nicht so einfach. Oft schreiben viele Seitenbetreiber emsig drauf los und hoffen, dass die Besucher einen langen Blogtext gierig durcharbeiten. Hier stellen wir Ihnen ein paar Elemente und Möglichkeiten vor.
...mehr lesen
Guter Content
(24.08.2015)

Eine Webseite steht und fällt mir dem Inhalt. Den Content zu optimieren und eine eigene Struktur für die Inhalte zu gestalten ist daher ein wichtiger Arbeitsschritt im Webdesign.
...mehr lesen
Webdesign-Besucher-verstehen Webdesign heißt Kunden verstehen
(10.02.2013)

Bei vielen Webseiten (teilweise auch gerade erst erstellten Seiten) frage ich mich, wer beim Webdesigner eigentlich an den Besucher gedacht hat. Hier eine kleine Einführung wie wir Webdesign verstehen.
...mehr lesen
Webdesign-mobile-Endgeraete Webdesign für mobile Endgeräte
(01.05.2012)

Seit April bieten wir auch Webdesign für mobile Endgeräte (Smartphones) an. Hier wird meist eine verkürzte und kompakte Variante der Hauptseite mit größeren Schaltflächen und einfacher Navigation erstellt.
...mehr lesen
Stylesheet für den Ausdruck anlegen
(13.12.2011)

Nicht jeder liest gerne am Bildschirm und druckt deshalb eine Website aus. Mit einem Print-Stylesheet erhöhen Sie den Lesespaß dieser Besucher, denn ein Ausdruck ist ohne angepasste CSS-Eigenschaften zwar tauglich, aber alles andere als optimal.
...mehr lesen
E-Mail-Adresse vor SPAM-Bots schützen
(13.12.2011)

Jeder, der seine E-Mail-Adresse online stellt, läuft Gefahr, SPAM-Mails zu erhalten. Warum ist das so? Das World Wide Web wird von sogenannten SPAM-Bots durchforstet. Diese Programme durchsuchen Webseiten nach E-Mail-Adressen, welche dann in einem Verteiler landen. Wurden Sie in dieser Liste aufgenommen, müssen Sie nicht mehr lange darauf warten, bis in Ihrem Postfach tolle Angebote für täuschend echte Rolex-Imitate oder unfassbar günstige Potenzmittel landen.Sie können sich allerdings vor diesen neugierigen Programmen schützen.
...mehr lesen
Serverwechsel und Erweiterung
(14.10.2011)

Wenn die Familie größer wird, muss PLATZ geschaffen werden. Nach nun 3 Wochen der Vorbereitung wurde in der Nacht die Serverlandschaft umgestellt.
...mehr lesen
Ladezeit verbessern mit PHP Caching?
(26.08.2011)

Jahr für Jahr wachsen nicht nur die Anforderungen an Webseiten, sondern auch die Besucherzahlen. Zusätzlich möchte man als Webseitenbetreiber seine Webseite schnell und einfach verwalten können. Genau das richtige Einsatzgebiet für Skriptsprachen wie PHP und Konsorten.
...mehr lesen
Webdesign-W3-Validator-Anleitung Webdesign und der W3 Validator
(01.08.2011)

Wenn man von einer "sauber programmierten" Webseite spricht, meint man einen Programmiercode, welcher nach dem W3 Standart erstellt wurde. Wir erklären hier, wie Sie bei Ihrem Webdesign den Quellcode prüfen können.
...mehr lesen