Ein Grundlayout - Teil IHTML CSS Grundlagen

Nun wollen wir uns ein einfaches Grundlayout bauen. In einer Tabelle würde das so aussehen:

Logo Kopfgrafik / Kopftext / Werbung
Navigation Text

Hier der dazugehörige HTML-Code:

<table width="300" height="167" border="2" cellpadding="1" cellspacing="1">
<tr>
<td width="68" height="50">Logo</td>
<td width="217">Kopfgrafik / Werbung</td>
</tr>
<tr>
<td>Navigation</td>
<td>Text</td>
</tr>
</table>

So (natürlich mit anderen Maßen) hat man früher Layouts gebaut - und kann es auch heute noch. Mit CSS ist man da aber flexibler.

Zuerst das HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">logo</div>
<div id="kopf">kopf</div>
<div id="navi">navi</div>
<div id="inhalt">inhalt</div>
</body>
</html>

Dann das CSS.

Der Abstand der Seite nach innen und aussen wird auf null gesetzt (body - margin - padding), Schriftart und Größe angegeben. Die Container werden absolut positioniert, Breite und Höhe angegeben. Den Rand nehmen wir nur um zu sehen, ob alles klappt, wie gewünscht

body {
margin:0;
padding:0;
font-family: Times, serif;
font-size:16px;
}
#logo {
position:absolute;
top:0;
left:0;
height:100px;
width:200px;
border:1px solid red;
}
#kopf {
position:absolute;
top:0;
left:200px;
height:100px;
width:600px;
border:1px solid red;
}
#navi {
position:absolute;
top:100px;
left:0;
height:500px;
width:200px;
border:1px solid red;
}
#inhalt {
position:absolute;
top:100px;
left:200px;
height:500px;
width:600px;
border:1px solid red;
}

Ansehen!

Das CSS lässt sich ein wenig übersichtlicher gestalten, wenn man gleiche Werte zusammenfasst.

body {
margin:0;
padding:0;
font-family: Times, serif;
font-size:16px;
}
#logo,#kopf,#navi,#inhalt {
position:absolute;
border:1px dotted green;
}
#logo {top:0;left:0;height:100px;width:200px;}
#kopf {top:0;left:200px;height:100px;width:600px;}
#navi {top:100px;left:0;height:500px;width:200px;}
#inhalt {top:100px;left:200px;height:500px;width:600px;}

Ansehen!

Hier geht´s zum letzten Teil.

·· PhiloPhax · Schwarzwald.net · Reiserat ·
· Schnelladende Layouts · Webtaugliche Texte · Suchmaschinenoptimierung · Bildbearbeitung fürs Web · Wordpress ·
· Holzgerlingen liegt bei Böblingen zwischen Stuttgart und Tübingen an der B 464