Es ist verhältnismäßig einfach, den Content an die richtige Position zu bekommen und zu verhindern, dass die Inhalte unter der Sidebar umbrechen. Wir gehen in zwei Schritten vor:
- Zunächst setzen wir den rechten
Margin-Bereich so, dass der Content genau an die Sidebar
anschließt. Für alle anderen Seiten setzen wir
margin
auf0
. - Anschließend deklarieren wir
die inneren Abstände über die Eigenschaft
padding
. Dabei brauchen wir uns nur um die horizontalen Abstände zu kümmern; die vertikalen Abstände sind0
.
/** * @section Content */ div#content { margin: 0 0 0 288px; padding: 0 12px 0 36px; }
Natürlich hätten wir einfach
margin: 0 12px 0 324px;
schreiben können, jedoch finde ich es sauberer,
zunächst ein lückenloses Spaltenlayout zu formulieren
und zusätzliche Abstände über weitere
Deklarationen zu realisieren.
Nun fehlen noch zwei Formatierungen für
die Inhalte: Den oberen Margin-Bereich der Hauptüberschrift
setzen wir auf 0
, damit sie direkt an der oberen
Kante des Contents beginnt. Und wir sorgen dafür, dass das
Gemüse floatiert. Es ist das einzige img
-Element im
Content (und zwar derzeit auf allen Seiten), daher können
wir ganz unkompliziert vorgehen und einfach alle Grafiken
innerhalb von #content
floatieren.
#content h1 { margin-top: 0; } #content img { float: left; margin: .5em .5em .5em 0; }
Übung: Content
- Ergänzen Sie Ihre
default.css
. - Speichern Sie und betrachten Sie die Kochbar im Browser. Vergleichen Sie das Ergebnis mit Abbildung 8.32.
Den Abschluss jeder Seite bildet die Fußzeile, um die wir uns als Nächstes kümmern.