HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 143

Sie möchten Ihre Seite nun durch ein paar Fotos erweitern. Dies können Sie entweder
per img -Element oder CSS tun. In diesem Fall entscheiden Sie sich dafür, die Grid-Ele-
mente mit Hintergrundbildern zu versehen. Dafür erhält jedes Element eine id , über
die es im CSS angesprochen werden kann:

4

<article>
<section>
<div class="grid x4" id="bild1"></div>
<div class="grid x3" id="bild2"></div>
<div class="grid x1" id="bild3"></div>
</section>
<section>
<div class="grid x3" id="bild4"></div>
<div class="grid x5" id="bild5"></div>
</section>
</article>

Der entsprechende CSS-Code fügt die Bilder ein:

#bild1 { background: url(bilder/egypt1.jpg); }
#bild2 { background: url(bilder/egypt2.jpg); }
#bild3 { background: url(bilder/egypt3.jpg); }
#bild4 { background: url(bilder/egypt4.jpg); }
#bild5 { background: url(bilder/egypt5.jpg); }

Das hat den Vorteil, dass die Bilder beim Drehen des Geräts automatisch, ohne dass
sich die Höhe verändert, auf die entsprechende Spaltenbreite zurechtgeschnitten
werden. Was jetzt noch fehlt, ist der Text des Artikels.

Typografie und Textelemente

Was bei Bildelementen gut aussieht, funktioniert bei Text nicht besonders gut: Wenn
er bis an den Rand, also in den Anschnitt läuft, sinkt die Lesbarkeit. Das MagazineGrid
hält daher für Textblöcke eine spezielle Klasse bereit:

<section class="gutter column3">
<h1>…</h1>
<p>…</p>
</section>

Die Klasse gutter gibt einem section -Element einen angenehmen Außenrand von
etwa 12 mm, ähnlich wie bei einem gedruckten Magazin. Auch Textblöcke können
mehrere Spalten besitzen - das verbessert die Lesbarkeit und unterstützt den Maga-
zin-Look. Damit der Text sich aber je nach Textlänge gleichmäßig auf die Spalten ver-