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 drei solcher Rechtecke: Das Rechteck oben für den Titel, das Rechteck links für das Menü und das Rechteck für den Inhaltsbereich: Im HTML-Dokument werden diese drei Bereiche mit dem

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

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

Ein Beispiel zum Seitenaufbau

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