Navi-Box

Passen wir zunächst unsere "index.html" an, indem wir den bereits vorhandenen Link in einen Navi-Div einfügen, bzw. um den Link herum die Navi basteln (ihr solltet jetzt schon wissen, wie das geht):

<!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-->
</body>
</html>

Unsere Navi soll eine Breite von 180px erhalten.
Um den "Navi-Standort" besser zu erkennen, verzieren wir sie noch mit einem Rahmen. Ihr wisst ja mittlerweile wie's funktioniert.
Also fügen wir in unsere CSS auch noch die Angaben für die Navi ein und speichern ab:

#navi
{
width: 180px;
border: 1px solid #000080;
}

Na ja, ist zwar erkennbar, aber sollte doch besser ebenfalls den gleichen linken Abstand haben wie unser Header.
Seht also zu, dass ihr den linken Navi-Rand mit dem Header in Einklang bringt.
Und da ihr gerade dabei seid: Legt bitte auch noch die Schriftgröße für die Navi auf 0.9 em fest.

Noch nie was von "em" gehört?
"em" bezeichnet die Größe (Höhe) des Buchstabens "M" der jeweiligen Schriftart. "em" ist im Gegensatz zu "pt" und bedingt auch zu "px" eine relative Größeneinheit.

Im Zusammenhang mit unserer Schriftgrößendefinition im Body (siehe Schriften und Überschriften) von 100% bzw. 100.01% entspricht 1em etwa 16px. Hat der Benutzer dagegen als Schriftgröße 14 px standardmäßig eingestellt, hätte 1em lediglich die Größe von 14px.
Durch relative Größeneinheiten wird die Schriftgröße in Bezug zur Basis definiert. So entsprechen 0.8em 80 Prozent von 1em. 1.3em ist um 30 % größer als 1em.
Ein weiterer Vorteil relativer Größeneinheiten ist, dass die Schriftgröße praktisch in allen Browsern (über "Ansicht / Schriftgrad") von den Besuchern verändert (skaliert) und damit an individuelle Lesegewohnheiten (z.B. Schriftvergrößerung bei Sehschwächen) angepasst werden kann.
Umfassende Informationen über unterschiedliche Größeneinheiten hat Friedel hier zusammengestellt.

Weiter geht's mit Höhenangaben.


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