Stellaplan weiter Alle Anleitungen Diese und weitere Anleitungen finden Sie unter http://stellatest.de/anleitungen

Layout mit div-Boxen

Positionierung mit CSS-Befehlen (Linktipp: www.intensivstation.ch)

Grundgerüst im body der HTML-Seite

<div id="container"><!-- ohne Inhalt -->
<div id="header">Kopfleiste</div>
<div id="navigation">Menüzeile</div>
<div id="content">Seiteninhalt</div>
<div id="footer">designed by ...</div>
</div>

Layoutpositionierung in der CSS-Datei (screen.css)

CSS-Layout#container {
margin-left: auto;
margin-right:auto;
width: 950px;
}

#header {
width: 950px;
height: 150px;
}

/* --- Kommentar ---
die Box #navigation wird vom nachfolgenden Element (#content) umflossen ---- */
#navigation {
width: 200px;
float: left;
}

#content {
width: 750px;
min-height: 800px;
margin-left: 200px;
}

#footer {
width: 950px;
height: 80px;
}

Verlinkung der CSS-Datei im Headbereich der HTML-Seite

<link href="screen.css" rel="stylesheet" type="text/css">

Weitere CSS-Befehle in der Abbildung:

Hintergrundfarbe der DIV-Boxen

#container {background-color:#CCC;}
#header {background-color:#CCC;}
#navigation {background-color:#CCC;}
#content {background-color:#CCC;}
#footer {background-color:#CCC;}

Schriftfamilie

body {font-family:Verdana, Geneva, sans-serif;}

 

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).