Webmaster-Crashkurs

CSS-Layout mit Kopf und Fußbereich

Im folgenden Layout wollen wir 3 Bereiche:

Dazu legen wir in HTML 3 Bereiche, also 3 Container an:

<div id="kopfbereich">
    <p>Hier kommt der Kopfbereich mit Logo etc.</p>
</div>

<div id="inhaltsbereich">
    <h1>Beispiel f&uuml;r Layout mit 3 Bereichen</h1>
    <p>Hier unser Inhalt</p>
    <p>Und mehr Inhalt</p>
</div>

<div id="fussbereich">
    <p>Fu&szlig;bereich</p>
</div>

Auf dem Bildschirm kommt dann folgendes Ergebnis:

HTML-Aufbau für CSS-Layout mit Kopf und Fußbereich

Um zu sehen, wo unsere Bereiche sich befinden und wo wir arbeiten, hinterlegen wird einzelnen Bereich mit Farbe:

In CSS sieht es dann wie folgt aus:

#kopfbereich {
    background-color: orange;
}

#inhaltsbereich {
    background-color: limegreen;
}

#fussbereich {
    background-color: silver;
}

Jetzt sehen wir wo welche Bereich sind und müssen feststellen, dass zwischen den Bereichen ein weißer Abstand sich unschön bemerkbar macht.

Hintergrundfarbe für CSS-Layout mit Kopf und Fußbereich

Die Abstände zwischen den einzelnen Bereichen sind störend. Diese „Bikinistreifen“ kommen daher, dass der Browser intern bereits verschiedene Vorgaben für Abstände etc. hat. Diese Vorgaben sind von Browser zu Browser und Browserversion unterschiedlich. Um keine unangenehmen Überraschungen zu erleben, stellen wir alle Abstände kollektiv auf 0. Dadurch müssen wir zwar alle Abstände neu definieren – hat aber den Vorteil, dass man keine unangenehmen Überraschungen beim Design erlebt.

Dazu wird über den Universalselektor alles Abstände auf 0 gestellt:

* {
    margin:0;
    padding:0;
}

Und schon sind die weißen Abstände verschwunden:

weiße Abstände entfernt für CSS-Layout mit Kopf und Fußbereich

Allerdings dürfen wir nicht vergessen, die Abstände für die Überschriften, Absätze usw. neu zu definieren. Allerdings nur für den Inhaltsbereich:

#inhaltsbereich h1 {
    padding-bottom: 0.5em;
}

#inhaltsbereich p {
     padding-bottom: 1em;
}

Das Ergebnis ist wie erwartet

Abstände gesetzt für CSS-Layout mit Kopf und Fußbereich

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2023   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: