Folgendes Layout ist in drei Spalten aufgeteilt. Die linke und die rechte Spalte bieten Platz für eine umfangreiche Navigation und Informationen, die beiden Spalten nehmen jeweils 15% der Seitenbreite ein. Die mittlere Spalte beinhaltet den eigentlichen Inhalt der Webseite, es ist genügend Platz für lange Texte vorhanden, sie nimmt die restlichen 70% der Seite ein.
Vorraussetzung: Das Stylesheet muss korrekt eingebunden werden, dazu
• Die CSS Datei „style.css“ nennen
• Die CSS Datei im HTML-Header korrekt einbinden
<head> <link rel="stylesheet" type="text/css" href="style.css" > </head>
HTML-Code:
<div id="left"> <h3>Linke Spalte</h3> <ul> <li><a href="#">Listenpunkt1</a></li> <li><a href="#">Listenpunkt2</a></li> <li><a href="#">Listenpunkt3</a></li> <li><a href="#">Listenpunkt4</a></li> <li><a href="#">Listenpunkt5</a></li> <li><a href="#">Listenpunkt6</a></li> </ul> </div> <div id="content"> <h1>Ein CSS Layout erstellen</h1> Hier kommt der Inhalt rein </div> <div id="right"> <h3>Rechte Spalte</h3> <ul> <li><a href="#">Listenpunkt1</a></li> <li><a href="#">Listenpunkt2</a></li> <li><a href="#">Listenpunkt3</a></li> <li><a href="#">Listenpunkt4</a></li> <li><a href="#">Listenpunkt5</a></li> <li><a href="#">Listenpunkt6</a></li> </ul> </div>
Im Stylesheet kann man sehen, dass die beiden äußeren Spalten jeweils 15% Seitenbreite einnehmen, die mittlere Spalte jedoch nur 68%. Die fehlenden 2% entsprechen dem Abstand der Spalten (margin-left bzw. margin-right).
CSS-Code:
#left{ width:15%; float:left; background-color:#eee; } #content{ float:left; width:68%; margin-left:0px; background-color:#fff; margin-left:1%; margin-right:1%; } #right{ width:15%; float:right; background-color:#eee; }
Hier können Sie das fertige Layout sehen.