GZB – Gero Zahns Blog

Ist für CSS-Formatierung die Zeit endlich reif für “display:inline-block”, mit dem sich so etwas wie das logischerweise nicht vorhandene, aber schmerzhaft vermisste “float:center” realisieren lässt? Ja, denn der letzte inkompatible Dinosaurier Firefox 2.x wird nur noch homöopathisch eingesetzt.

Laut browser-statistik.de liegt Firefox 2.0 nunmehr im Bereich von 1% – wohlgemerkt: Im Vergleich zu allen anderen firefoxoiden Gecko-Browsern – die laut o.a. Statistik rund und roh jeder 2. Surfer benutzt (yay!). Folglich ist der letzte Browser, der mit Inline-Blocks so gar nichts anfangen konnte, quasi ausgestorben. Internet Explorer wollen dahingehend je nach Version immer noch ein wenig gepampert werden, und je nach Statistik dürfen wir (leider) den IE6 aufgrund von 5-10% Gesamtmarktanteil immer noch nicht ignorieren. Aber ich bin bereit, das letzte unbeugsame gallische Dorf von Firefox 2-Usern ab sofort zu ignorieren.

Konkretes Beispiel: Wir haben ein Reihe von Bildern, die wir zeigen wollen – bild1.jpg, bild2.jpg und bild3.jpg. Egal, ob wir ein liquides, d.h. variabel breites oder  was sonst für ein Webdesign auch immer verwenden wollen: Es wäre schön, wenn man die Bilder (man verzeihe meine Wortwahl) einfach nebeneinander klatschen und den umgebenden Container einfach zur Zentrierung überreden könnte. Beispiel 1:

<div style=”text-align:center;”>
<img src=”bild1.jpg” />
<img src=”bild2.jpg” />
<img src=”bild3.jpg” />
</div>

So weit, so einfach. Das funktioniert deshalb, weil Bilder inline formatiert werden, d.h. sie sind im weitesten Sinne “große Buchstaben”. Wird das Browserfenster zu schmal (bei mehr als 3 Bildern keine Seltenheit), bricht die Bildfolge um und das nächste Bild landet wiederum zentriert in der nächsten Reihe untendrunter. Ist die Anzahl der Bilder dynamisch (z.B. im CMS), packt man einfach eins neben das andere – und das Design (egal ob mit fluider oder fester Breite) kümmert sich um den Rest.

Aber was, wenn wir nun Bildunterschriften unter den Bildern haben wollen? Dummerweise ist das alles andere als trivial. Holzhammer-Methode eins: Eine fette Tabelle mit zwei Zeilen. (Kids, never try this at home!) Beispiel 2:

<div style=”text-align:center;”>

<table style=”margin:0px auto;”>
<tr>
<td><img src=”bild1.jpg” /></td>
<td><img src=”bild2.jpg” /></td>
<td><img src=”bild3.jpg” /></td>
</tr>
<tr>
<td>Bild 1</td>
<td>Bild 2</td>
<td>Bild 3</td>
</tr>
</table>

</div>

Holzhammer-Methode zwei, damit die jeweils zueinander gehörigen Texte zumindest halbwegs in der Nähe der betitelten Grafik stehen. (Kids, depending on how bad the neighborhood is, you’ll end up in jail, crucified, or crucified head-down when you do something like that. So – don’t.) Beispiel 3:

<div style=”text-align:center;”>

<table style=”margin:0px auto;”>
<tr>
<td>
<table style=”margin:0px auto;”>
<tr><td><img src=”bild1.jpg” /></td></tr>
<tr><td>Bild 1</td></tr>
</table>
</td>
<td>
<table style=”margin:0px auto;”>
<tr><td><img src=”bild2.jpg” /></td>
</tr><tr><td>Bild 2</td></tr>
</table>
</td>
<td>
<table style=”margin:0px auto;”>
<tr><td><img src=”bild3.jpg” /></td></tr>
<tr><td>Bild 3</td></tr>
</table>
</td>
</tr>
</table>

</div>

Beide Tabellenlösungen haben den Nachteil, dass sie keinesfalls fluide sind.

Sprich: Wird das Browserfenster zu schmal, erscheint ein Scrollbalken. Ist die Anzahl der Bilder dynamisch, muss sich das CMS Gedanken über die verfügbare Breite machen und immer neue Tabellen erstellen. Nein, nein – und nochmals nein.

Zurück zum eigentlichen Problem: Warum haben wir eigentlich kein Blockelement, das sich inline verhält wie ein Bild? Also sowas in der Art (ja, das geht sicher eleganter – das ist ja hier auch nur ein grobes HowTo). Beispiel 4:

<div style=”text-align:center;”>
<div><img src=”bild1.jpg” /><br/>Bild 1</div>
<div><img src=”bild2.jpg” /><br/>Bild 2</div>
<div><img src=”bild3.jpg” /><br/>Bild 3</div>
</div>

Gute Idee – funktioniert aber nicht.

Denn die inneren Divs erstrecken sich über die volle Browserbreite – und ein Div ist ein Blockelement, das einen Zeilenumbruch erfordert.

Beispiel 5: Selbst wenn wir die inneren Divs schmaler machen …

<style>
<!–
.bild { width:150px; }
–>
</style>

<div style=”text-align:center;”>
<div class=”bild”><img src=”bild1.jpg” /><br/>Bild 1</div>
<div class=”bild”><img src=”bild2.jpg” /><br/>Bild 2</div>
<div class=”bild”><img src=”bild3.jpg” /><br/>Bild 3</div>
</div>

… hilft uns das immer noch nichts: Auch die schmalen Divs sind Blockelemente. Sie stehen untereinder – und außer im IE kleben sie nun trotz umgebendem “text-align:center” in vielen anderen Browsern links am Rand.

Lassen wir die Jungs doch “floaten” – Beispiel 6:

<style>
<!–
.bild { width:150px; float:left; }
–>
</style>

vorher

<div style=”text-align:center;”>
<div class=”bild”><img src=”bild1.jpg” /><br/>Bild 1</div>
<div class=”bild”><img src=”bild2.jpg” /><br/>Bild 2</div>
<div class=”bild”><img src=”bild3.jpg” /><br/>Bild 3</div>
</div>

nachher

Die Reihenfolge stimmt – aber so links und nicht zentriert ist auch nicht schön, und überhaupt gibt es Stress mit nachfolgenden Elementen.

Psst … “float:right” macht die Sache nicht besser. Beispiel 7:

<style>
<!–
.bild { width:150px; float:right; }
–>
</style>

vorher

<div style=”text-align:center;”>
<div class=”bild”><img src=”bild1.jpg” /><br/>Bild 1</div>
<div class=”bild”><img src=”bild2.jpg” /><br/>Bild 2</div>
<div class=”bild”><img src=”bild3.jpg” /><br/>Bild 3</div>
</div>

nachher

Dabei verkehrt sich dann auch noch die Reihenfolge, weil die Bilder der Reihe nach von rechts nach links schweben – das ist Quatsch mit Soße.

Wie schön wäre also, wenn wir die inneren Divs ohne Floats mit “display:inline-block” dazu zwingen könnten, sich wie unbeschrifteten Bilder zu verhalten. Obacht: Firefox, Safari und Opera können das in der Tat – aber nicht der Internet Explorer. Dort gilt: Ein Blockelement kann man nicht nachträglich dazu zwingen, sich wie ein Inline(-Block)-Element zu verhalten.

Dann also andersrum: Man nehme ein Inline-Element, das wir zum Blockelement umfunktionieren – also “span” statt “div”. Beispiel 8:

<style>
<!–
.bild { display:block; width:150px; }
–>
</style>

<div style=”text-align:center;”>
<span class=”bild”><img src=”bild1.jpg” /><br/>Bild 1</span>
<span class=”bild”><img src=”bild2.jpg” /><br/>Bild 2</span>
<span class=”bild”><img src=”bild3.jpg” /><br/>Bild 3</span>
</div>

Das sieht haargenau selbstredend (und absichtlich) haargenau so aus wie die schmalen Divs in Beispiel 5.

Doch jetzt kommt der Moment, wo der Frosch ins Wasser rennt: Wir zwingen die Spans, sich wie Inline-Blöcke zu verhalten. Wir können dabei sogar auf die Breitenangabe verzichten. Beispiel 9:

<style>
<!–
.bild { display:inline-block; }
–>
</style>

<div style=”text-align:center;”>
<span class=”bild”><img src=”bild1.jpg” /><br/>Bild 1</span>
<span class=”bild”><img src=”bild2.jpg” /><br/>Bild 2</span>
<span class=”bild”><img src=”bild3.jpg” /><br/>Bild 3</span>
</div>

Das ist haargenau das, was wir wollten:

Die Bilder samt Unterschriften in den Spans stehen brav nebeneinander, das Design ist fluide bzw. (bei variabel vielen Elementen) dynamisch um beliebig viele Bilder erweiterbar, die zeilenweise umbrechen und anschließend brav zentrieren.

Das funktioniert in dieser Form ab Internet Explorer 5.5 (aktuell: 8), Firefox 3.0 (aktuell: 3.6), Opera 7 (aktuell: 10) und mit aktuellen Webkit-Browsern wie Safari und Chrome ebenfalls.

Psst … Wer es sich mit der schwindenden Firefox 2-Community nicht verscherzen will, baut noch notdürtig einen kleinen Hack ein – in etwa so. Beispiel 10:

<style>
<!–
.bild { display:inline-block; }
:root .bild { display:-moz-inline-stack; }
–>
</style>

<div style=”text-align:center;”>
<span class=”bild”><img src=”bild1.jpg” /><br/>Bild 1</span>
<span class=”bild”><img src=”bild2.jpg” /><br/>Bild 2</span>
<span class=”bild”><img src=”bild3.jpg” /><br/>Bild 3</span>
</div>

Der “:root”-CSS-Hack erreicht nur Firefox bis einschließlich 2.x – Firefox 3+ ignoriert ihn. Das Resultat (siehe Screenshot) sieht zwar nicht wirklich schön aus, funktioniert aber notfalls sogar mit Firefox 1.

Aufgrund der Statistik-Entwicklung weg von Firefox 2 postuliere ich jedoch, das wir “Web Guys” andere Sachen zu tun haben, als uns für diesen höchst seltenen Fall etwas noch Abenteuerlicheres zu überlegen.

Update: Aua – die ganzen Codebeispiele hier im Blog waren durch idiotisches Copy & Paste meinerseits fehlerhaft – die Beispiel-Listings funktionierten aber. *seufz* Sollte nun aber alles korrigiert sein.

Share