Margin

Der Header sieht zwar jetzt schon etwas besser aus, allerdings würde er sicher noch mehr aufgewertet, wenn er nicht so weit an den Rändern "kleben" würde.
Hier hilft uns die Eigenschaft "margin" weiter.

Unter "margin" versteht man den äußeren Abstand zu einem anderen Element. Eine rechteckige Box kann also einen oberen, rechten, unteren und linken Abstand zu anderen Elementen haben.

Demnach gibt es die vier Einzelwerte

margin-top
margin-right
margin-bottom
margin-left

Unser Header soll links, oben und rechts einen Abstand von je 15 Pixel haben.
Sein Abstand zu den darunter folgenden Elementen soll 30 Pixel betragen.
Dementsprechend müssten wir hinterlegen:

margin-top: 15px;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 15px;

Wichtig (noch mal):
Achtet immer darauf, dass zwischen Wertangabe und Einheit keine Leerzeichen sind.
Also nicht 10 px sondern 10px sonst wird die Angabe nicht interpretiert.
Setzt nach jeder Angabe ein Semikolon.

Kommen wir zurück auf das menschliche Laster der Trägheit:
Sollen alle Seiten den gleichen Abstand zum jeweils nächsten Element haben, so reicht es aus wenn man schreibt
margin: 15px;

Aber auch für unterschiedliche Werte gibt es eine Kurzschreibweise. Statt wie oben jeden Margin-Wert einzeln anzugeben, wählt man folgende Vereinfachung:

margin: 15px 15px 30px 15px;


Die Reihenfolge ist im Uhrzeigersinn, beginnend mit 12 Uhr von oben (top).

Selbst diese Angabe lässt sich noch verkürzen, da in diesem Fall zwei gegenüberliegende Seiten (right und left) den gleichen Wert von 15px haben. Diese beiden identische Werte können zusammengefasst werden, so dass wir folgende Angabe erhalten:

margin: 15px 15px 30px;

Hier steht der erste Wert für den oberen, der zweite Wert für den rechten und linken sowie der dritte Wert für den unteren Abstand.

Hätten zwei gegenüberliegende Seiten den gleichen Abstand, z.B. oben und unten je 10px sowie rechts und links je 15px, so schreiben wir margin: 10px 15px;
Prägt euch das etwas ein. Es erspart euch Schreibarbeit und Quellcode und wir werden es für einen anderen Wert später noch mal brauchen.

Somit verschaffen wir unserem Header etwas "Luft", indem wir ihm folgende Margin-Werte in Kurzschreibweise zuweisen:

#header
{
border-top: 3px solid #990000;
border-right: 3px solid #990000;
border-bottom: 3px double #003300;
border-left: 3px double #003300;
background: #FFCC00 url(banner1.gif) no-repeat center;
margin: 15px 15px 30px;
}

Merke:
Liegen zwei Container nebeneinander, so werden ihre benachbarten Margin-Werte (right und left) addiert.
Liegen sie untereinander gilt für die benachbarten Margin-Werte (bottom und top) folgendes: Bei gleichen benachbarten Margin-Werten wird nur ein Abstand verwendet. Bei unterschiedlichen Werten wird der kleinere vom größeren eliminiert.
Um den Abstand zweier untereinander liegenden Container zu verändern muss man stets den größeren Wert anpassen.

Weiter geht's, indem wir auf unserer Seite eine Navi-Box einfügen.


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