STARTSEITE eidechse
grafik

CSS Design - Layout erstellen

css design 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.
zurück







nach oben