Thiemos Archiv

Galerien mit CSS gestalten.

Früher habe ich das mit sogenannten »blinden« Tabellen gemacht (zu sehen zum Beispiel noch hier). Aus heutiger Sicht ganz mieser Stil. Also CSS. Nach einigem Probieren mit diversen Browsern (besonders gemein, aber auf meiner »muss«-Liste: Opera 6) sieht meine empfohlene Lösung nun wie folgt aus. Zuerst der HTML-Teil:

In einem normalen Absatz (<p>), welcher der CSS-Klasse screenshot zugeordnet ist, stehen das Bild und der dazu gehörige Text einfach hintereinander, getrennt durch wenigstens ein Leerzeichen oder einen Zeilenumbruch. Das ist wichtig, um auch bei abgeschaltetem CSS eine kleine Lücke bzw. Sprechpause zu bekommen.

Das Bild selbst ist so attributiert, wie es sein sollte: width und height helfen dem Browser, zumindest das HTML schon vor dem Laden des Bildes richtig darstellen zu können. Der Alternativtext alt wurde in diesem Fall bewusst leer gelassen, da der Text neben dem Bild sämtliche Informationen liefert, das Bild dagegen nur zierenden Charakter hat. Ein optionaler title könnte in einem kleinen gelben Tooltipp-Fenster zum Beispiel erläutern, dass es sich um ein Bildschirmfoto handelt.

Auf das im Moment merkwürdig erscheinende <br clear="left"> gehe ich gleich noch ein.

Die Stylesheet-Angaben sehen so aus:

Der erste Regelsatz gilt für alle Bilder innerhalb von Screenshot-Objekten. Die wichtigste Angabe ist dabei das float: Das Bild wird auf der linken Seite positioniert und alles Folgende – in unserem Fall unser Text – »fließt« rechts um das Bild herum und geht danach unter dem Bild weiter. Ein Außenabstand (margin) von rechts zwei und unten einer Buchstabenbreite (Maßeinheit ex) sorgt dafür, dass der Text nicht doch wieder direkt am Bild klebt (das Leerzeichen von vorhin wird durch das float überlagert und bewirkt nichts mehr).

Zusätzlich verpassen wir unserem Bild einen dünner Rahmen (border), rücken diesen ein wenig vom Bild weg (padding) und füllen den entstandenen Freiraum mit Farbe (background-color).

Der zweite Regelsatz gilt für den umgebenden Textabsatz. Die Angabe clear sorgt dafür, dass jedes vorhergehende float abgeschlossen wird. Das ist wichtig, denn sonst »fließen« auch die Bilder um ihre Vorgänger herum und es entstehen lustige Kaskaden. Allerdings kann das komplizierter sein, als es klingt. Wenn nämlich der umgebende Code der Web-Seite bereits float verwendet, zum Beispiel für die Navigationsleiste, dann unterbricht clear im schlimmsten Fall auch das. In meinem Fall klappt es jedoch: Die Navigation verwendet float: right;, mit clear: left; werden jedoch nur linksseitige Positionierungen abgeschlossen.

Die letzte Angabe gibt den Absätzen nach oben hin einen großzügigen Abstand (margin) von vier Zeichenbreiten. Der Abstand von zwei Zeichen nach unten hat eigentlich keine Bedeutung, da von sich berührenden Außenabständen, die eigentlich Mindestabstände sind, immer der größere verwendet wird. Die 2ex wirken jedoch beim alleruntersten Absatz in der Liste.

Wozu nun das schon erwähnte <br clear="left">? So komisch das klingt: Es für Mozilla notwendig. Vieleicht liegt es daran, dass er etwas zu standardkonform ist. Wenn der Text niedriger ist als das Bild, wirken die eben erläuterten Außenabstände nur auf den Text und schließen das Bild nicht mit ein. Das führt dazu, dass zwischen den Bildern viel zu wenig Abstand entsteht (nur das 1ex aus dem vorherigen Regelsatz). Der manuelle Zeilenumbruch sorgt dafür, dass der Textabsatz in jedem Fall mindestens die Höhe des Bildes hat. Da das schlecht zu erklären ist, hier ein Beispiel (der negative Effekt, bei dem zwischen den ersten beiden Bildern fast gar kein Abstand ist, ist nur in Mozilla-verwandten Browsern zu sehen, IE und Opera haben kein Problem damit).

Besonders merkwürdig ist hierbei, dass eine reine HTML-Angabe (missbilligt und seit »HTML 4.01 strict« verboten) eine CSS-Eigenschaft beeinflusst. Immerhin: Es funktioniert. Alternative Lösungsvorschläge sind willkommen.

Mein Endergebnis zeichnet sich dadurch aus, dass es völlig unabhängig von der Größe des Browserfensters ist (einfach ausprobieren und das Fenster immer weiter verkleinern). Im Extremfall wandert der Text einfach komplett unter das Bild – und bleibt auf diese Weise lesbar.

Getestet ist diese Lösung mit Internet Explorer 5.0 und 6.0 (SP2), Mozilla 1.6, Firefox 0.9.2 sowie Opera 6.0 und 7.50. Einzig IE 5.0 hat ein Problem: Der Bildrahmen klebt ohne Abstand (padding) direkt am Bild. Aber das ist nicht schlimm. Im Idealfall bemerkt der Besucher diesen »Darstellungsfehler« gar nicht.