HTML and CSS Reference
In-Depth Information
<article>
<h4>Die Organisation von Inhalten mit einem Rastersystem</h4>
<p>Hier steht Ihr hoffentlich etwas längerer Blindtext.</p>
</article>
4
Listing 4.6
Eine einfache HTML-Datei mit Bild und Text als Ausgangslage
Aus Platzgründen ist hier der Blindtext etwas kürzer geraten, wir empfehlen Ihnen
jedoch einen längeren Text zum Testen einzusetzen. Sie leiden an einer Blindtext-
Schreibblockade? Kein Problem. Einen Blindtextgenerator finden Sie unter
http://
www.lipsum.com
.
Ein Bild zum Einsatz in diesem Beispiel finden Sie wieder im kostenlosen Bilderar-
chiv von
Flickr
unter
http://www.flickr.com/creativecommons
. Viele der Bilder kön-
nen Sie kostenlos, unter Angabe des Autors, in Ihrer WebApp einsetzen. Aber das
wissen Sie ja bereits. Alternativ können Sie natürlich auch ein Urlaubsbild von Ihnen
an einem Strand dieser Welt verwenden. Wie Sie möchten.
In diesem Beispiel benutzen wir das Bild
Landscape
von Rick Smit. Speichern Sie Ihres
unter dem Namen
landschaft.jpg
im Ordner
bilder
ab.
Haben Sie daran gedacht, die CSS-Datei im
head
-Bereich zu verlinken?
<link href='styles/raster.css' rel='stylesheet' type='text/css'>
Sehr gut, dann kann es weitergehen!
Definition der Darstellungen auf unterschiedlichen Bildschirmgrößen
Bevor Sie mit der Konfiguration der einzelnen Spalten beginnen, ergänzen Sie noch
Folgendes in der
body
-Definition im
Default Layout
:
margin:auto;
Damit wird das Raster automatisch mittig ausgerichtet.
Tipp: Testen auch ohne Smartphone oder Tablet
Sie können die Funktionsweise des Rasters auch ohne iPhone oder iPad in einem
modernen Browser, wie z. B. Google Chrome, testen. Verändern Sie dazu einfach die
Breite des Browserfensters.
Als Nächstes konfigurieren Sie die Darstellung der Text- und Bildelemente für die
verschiedenen Bildschirmgrößen. Auf großen Bildschirmen und auf dem iPad im
Querformat soll der Text neben dem Bild erscheinen (Abbildung 4.4). Wie in einem
richtigen Magazin eben!
Search WWH ::
Custom Search