CSS Design - DIV-Layout erstellen

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.

CSS Design – DIV-Layout erstellen

Schreibe einen Kommentar