Den Aufbau einer Seite mit Divisions gestalten

Sehr häufig sind Seiten so aufgeteilt, dass in einem rechteckigem Bereich das Menü dargestellt wird und in einem anderen der Inhalt.

Diese Aufteilung erreichst du mit Boxen, die du mit dem <div>-Tag definierst. Dieses Konzept müssen wir zunächst einmal verstehen.

"Divisions" <div>

Grundidee: Inhalt ist in einer Box (=rechteckige Fläche). Diese Fläche hat eine Breite, Höhe und Hintergrundfarbe.

Code für diese Box in der HTML-Datei:

<div class="box1">
Grundidee: Inhalt ist in einer Box (=rechteckige Fläche). Diese ...
</div>

Code für diese Box in der CSS-Datei:

.box1 {
background-color: yellow;
width: 50%;
}

Hinweis

Um das Konzept der Divisions auszuprobieren, werden wir viele verschieden formatierte Divisions innerhalb einer Datei haben. Dass die CSS-Datei zwischen verschieden formatierten Divisions unterscheidet, können wir nur dem Wissen über Class und ID erreichen. Dies muss zunächst verstanden sein.

Und bei der nächsten Division können wir über eine neue Klasse wieder ganz andere Dinge festlegen.

Hier kommt die nächste Box, die ganz anders formatiert ist:

Dieser Inhalt wiederum ist in einem Rahmen (border) und dieser Rahmen hat einen Innenabstand (padding) zum Inhalt.

Code dieser Box in der HTML-Datei

<div class="box2"> Dieser Inhalt wiederum ...
</div>

Code dieser Box in der CSS-Datei

.box2 {
background-color:yellow;
width:200px;
border:3px green solid;
padding: 20px;
}

Ein Beispiel mit Außenabstand

Der Rahmen wiederum kann einen Außenabstand=margin haben.

Code dieser Box in der HTML-Datei

<div class="box3"> Der Rahmen wiederum ...
</div>

Code dieser Box in der CSS-Datei

.box3{
background-color: yellow;
border: 3px red dashed;
margin: 50px;
width: 50%;
}

Achtung Fehlerquellen:

Semikolon vergessen
30 px statt 30px
"=" statt ":"
Tippfehler wie z.B. widht statt width

Leider gibt Eclipse bei solchen Fehlern keine Fehlermeldung. :o(

All diese Deklarationen können auch getrennt für oben, rechts, unten und links gemacht werden.
CSS-Definition für diesen Kasten: .box4{
margin-top: 30px;
margin-left: 100px;
border-top: dashed 4px green;
border-left: dotted 2px red;
border-bottom: double 3px black;
}

Übung 3:Hier ist ein Bildschirmfoto einer (sinnfreien) Website. Baue dies unter Verwendung von einer separaten CSS- und dieser HTML-Datei nach!

Nächste Seite: Seitenaufbau

Lösung von Übung 3