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;
	}