Content

Natürlich wollen wir unsere Homepage auch mit Inhalt füllen, wozu wir noch eine Content-Box brauchen.
So langsam bekommen wir Routine:
"index.html" anpassen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste CSS-Seite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<h1>Meine erste CSS-Seite</h1>
</div> <!--Ende header-->
<div id="navi">
<a href="seite1.html">CSS Teil 1</a>
</div> <!--Ende Navi-->
<div id="content">
Ich bin der Content-Container
</div> <!--Ende content-->

</body>
</html>

Speichern, ansehen - fertig.

Einwand Euer Ehren?
Der Content soll doch sicher rechts neben die Navi und nicht unter die Navi.
Versuchen wir deshalb einmal, den Content etwas nach rechts zu schieben und bemühen dabei unsere mathematischen Grundkenntnisse:

Navi-Abstand von links: 15px
Navibreite: 180px
Navi-Rahmen: links und rechts je 1px
Schließlich berücksichtigen wir noch einen Abstand zwischen Navi und Content von 18px.
Macht zusammen nach Adam Riese: 15px + 1px + 180px + 1px + 18px = 215px
Vielleicht könnte also ein margin-left: 215px; für unsere Content-Anordung hilfreich sein.
Wir ergänzen also unsere CSS-Datei wie folgt (zur besseren Orientierung auch diesmal wieder mit einem Rahmen):

#content
{
border: 1px solid #8A2BE2;
margin-left: 215px;
}

Abspeichern, ansehen.

Unserem Ziel sind wir immerhin schon einen Schritt näher gekommen. Von der horizontalen Betrachtung her sitzt unser Content bereits richtig.
Wäre aber sicher schöner, wenn er nun auch noch "nach oben rutschen" würde.
Aber nach dem was wir über Blockelemente gelernt haben (siehe Div's & Tricks) ist das bei Div's ganz normal, dass sie sich untereinander und nicht nebeneinander anordnen.

"Schönes" CSS! Aber wer wird denn so schnell aufgeben?

Alles im Fluss mit der CSS-Eigenschaft "float".


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: