CSS-Boxen

Dies ist eine alte Version des Dokuments!

Moderne Webseiten werden mit Hilfe von CSS-Boxen strukturiert. Im Fenster eines Browsers werden die Inhalte der HTML-Elemente in rechteckigen Bereichen dargestellt. Im nachfolgenden Beispiel erkennt man fünf solcher Rechtecke: Das Rechteck oben für den Titel, das Rechteck links für das Menü und das Rechteck für den Inhaltsbereich. Ein weiteres Rechteck umschließt die Seite, ein weiteres ist als Werbung an die linke Seite geheftet. Im HTML-Dokument werden diese fünf Bereiche mit dem

-Element aufgeführt. Das <body>- Element enthält also genau fünf

-Elemente. Über deren Attribut „id“ wird der Namen des Bereichs angegeben:

Ausführbares Beispiel

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Seitenaufbau mit DIV Containern</title>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
 
    <body>
        <div id="werbung">
            Werbung
        </div>
 
        <div id="rahmen"> 
 
            <div id="banner">
                Hier könnte ihr Banner platziert werden!
            </div>
            <div id="navigation">
                <ul>
                    <li><a>Link 1<a/></li>
                    <li><a>Link 2<a/></li>
                    <li><a>Link 3<a/></li>
                    <li><a>Link 4<a/></li>
                </ul>
            </div>
            <div id="inhalt">
                Hier könnte ihre Werbung stehen!
            </div>
        </div>
    </body>
</html>

#werbung{
	background-color: #FF0000; 
	width: 100px;
	height: 300px;
	position:absolute;
	top:150px;
	left:0px
}
#rahmen{  
	width: 600px; 
	height: 600px; 
	margin: 0 auto 0 auto; 
	background-color: #FFFFFF; 
	border: 3px dashed black;
}
 
#banner{
	width: 600px;
	height: 200px; 
    background-color: #1133AA; 
}
#inhalt{  
	width: 496px; 
	height: 400px; 
	background-color: #11AAAA;
	float: right;
	}
#navigation{  
	width: 100px; 
	height: 400px; 
	background-color: #AAAA22;
	float:left;
	}

Mit dem Attribut position kann man angeben, dass eine CSS-Box z. B. absolut positioniert wird. Mit den weiteren Attributen top, left, width und height kann man die Position und Größe in der Einheit px (engl, Pixel, Bildpunkt) festlegen. Für den Feinschliff einer CSS-Box gilt es zwischen margin (Abstand zu anderen CSS-Boxen), border (Rahmen) und padding (Abstand Inhalt zum Rahmen) zu unterscheiden. Die Zuordnung zeigt das nebenstehende Bild.

Class und Id-Attribute Mit Hilfe der Attribute class und id können praktisch alle HTML-Elemente mit CSS formatiert werden.

Das id-Attribut wird für Elemente verwendet, die nur einmal in einem HTML Dokument vorkommen, etwa einer Kopfzeile oder einem Menü.
Das class-Attribut kann für immer wiederkehrende Elemente benutzt werden.

In der folgenden Tabelle wird zusammenfassend dargestellt, wie die class und id-Attribute in einem HTML-Dokument mit den Formatierungen in einer CSS-Datei verknüpft werden.

<table> <tr><th>HTML</th><th>CSS</th><th>Erläuterung</th></tr> <tr><td><Elementname class = “Wert “></td><td>.Wert { CSS-Angaben }</td><td>.Wert { CSS-Angaben }</td></tr> <tr><td><Elementname id = “Wert “></td><td>#Wert { CSS-Angaben }</td><td>#Wert { CSS-Angaben }</td></tr>