Oft ist es sinnvoll, mehrere Elemente von unterschiedlicher Art und unterschiedlichem Design in Gruppen zusammenzufassen. Diese Gruppierungen werden DIV-Boxen genannt und finden vor allem in der Positionierung häufig Verwendung.
Wie der Name schon sagt, handelt es sich dabei um eine virtuelle (standardmäßig unsichtbare) Box, in der die Elemente abgelegt werden können. Die DIV-Box selbst erfüllt dabei noch keine Funktion, ihre Präsenz ist also ohne entsprechenden CSS-Code nicht bemerkbar:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
</style>
</head>
<body>
<div>
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin der erste Absatz.</p>
</div>
</body>
</html>
Wenn wir nun aber die DIV-Box mittels CSS-Code ansprechen, ersparen wir uns die Zuweisung der Positionsangaben für jedes einzelne Element. Im folgenden Beispiel werden drei DIV-Boxen mit Inhalt befüllt und dann nebeneinander positioniert.
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
#box1 {
position: absolute;
top: 100px;
left: 100px;
}
#box2 {
position: absolute;
top: 100px;
left: 400px;
}
#box3 {
position: absolute;
top: 100px;
left: 700px;
}
</style>
</head>
<body>
<div id=“box1″>
<h1>Überschrift</h1>
<p>Text</p>
</div>
<div id=“box2″>
<h1>Überschrift</h1>
<p>Text</p>
</div>
<div id=“box3″>
<h1>Überschrift</h1>
<p>Text</p>
</div>
</body>
</html>
Natürlich können DIV-Boxen auch gleich als Box sichtbar gemacht werden. Hierfür empfiehlt es sich, entweder eine Hintergrundfarbe zu definieren, oder einen Rahmen mittels der CSS-Property border zu erzeugen. Der Aufbau dabei ist wie folgt:
Border: [farbe] [typ] [Dicke in Pixel];
Dazu ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
.blauebox {
Border: #0044FF solid 2px;
Background-color: #B0C5FF;
}
</style>
</head>
<body>
<div class=“blauebox“>
<h1>Überschrift</h1>
<p>Text</p>
</div>
</body>
</html>
Farben können hier, wie immer, auch als Hexadezimalcode, beginnend mit Raute (#) bestimmt werden. solid (=durchgehend) ist in diesem Fall der border-Typ. Man kann außerdem noch andere border-Typen durchtesten:
- dotted Gepunktet
- dashed Strichliert
- double Doppelte Linie
- groove 3D Effekt – abhängig von der Farbe
Für eine bessere Optik empfiehlt es sich außerdem, einem Abstand zwischen Rahmen und Text in der DIV-Box zu definieren. Dieser Abstand wird genau wie das bereit in den vorigen Kapiteln abgehandelte margin definiert, allerdings heißt die Property hierfür padding:
.blauebox {
Border: #0044FF solid 2px;
Background-color: #B0C5FF;
Padding: 10px;
}
Wie aufgefallen ist, passt sich die DIV-Box in der Höhe automatisch an den Inhalt an (wenn man mehr sichtbaren Content in die DIV-Box schreibt, wird sie größer) und nimmt automatisch die gesamte Breite des Bildschirms ein. Wie man diese Standardeinstellungen aushebeln und die Größe der Boxen selbst bestimmen kann, sehen wir uns im folgenden Kapitel an.