fieldset {display:inline} -> Alternative mit CSS?

[molily]

Hallo Ingo,

kleiner Nachtrag: nach einiger Tüftelei habe ich eine _fast_ taugliche Lösung mit äußeren DIVs in der Höhe des größten Bildes zzgl. Umrahmung gefunden.

Hehe, ich habe heute Nachmittag dein Vorgängerposting gelesen und exakt diese Lösung erarbeitet und wollte sie gerade posten. :)

Leider hat diese den Schönheitsfehler, daß die vertikalen Abstände sich an diesen DIVs ausrichten und somit die sichtbaren Abstände uneinheitlich sind. Außerdem mißfällt mir natürlich diese Umständlichkeit, die etwas von 'BlindGifs' in Tabellen hat...

Ja, sinnlos verschachtelte div-Elemente... Etwas besseres fällt mir auch nicht ein (mit Tabellen habe ich es nicht probiert).

Die Krönung wäre wie schon gesagt noch, wenn die Bilder an den unteren Rahmen ausgerichtet würden, so daß die Bildunterschriften jeweils in einer Reihe sind.

Wie das bewerkstelligt werden kann, ist mir auch nicht bekannt. fieldset hat anscheinend eine Eigenschaft, welche sich nicht mit CSS und normalen Elementen nachmachen lässt. Meine Zwei-Minuten-Lösung basierte unter anderem auf display:inline-block (CSS2.1) und war zwar elegant und effektiv, aber nicht kompatibel. ;)

Hier mal der Link zu der "murksigen" Variante:
und das relevante CSS für die äußeren DIVs und das DIV der Bildumrahmung:
.Murks { float:left; width:216px; height:383px; margin:10px; padding:0; }
.Umrahmung { padding:7px 7px 3px; border:1px solid #00C; }

Ich habe es mit Nachkommensselektoren gelöst:
.foto {height:400px; float:left;}
.foto div {margin:0 10px 0 0; padding:7px 7px 3px; border:1px solid #00C;}
.foto span {/* ... */}
.foto img {padding:0 0 3px 0;}

Dabei ist eine Klasse ausreichend. (margin und padding sind natürlich willkürlich gewählt, 400px ist auch Pi mal Daumen kalkuliert, es könnte tatsächlich weniger sein.)

Ein Bild wird dann so eingebunden:

<div class="foto"><div><img src="bsw-paar.jpg" alt="Foto von Hans und Gisela" height="193" width="200" /><br /><span>Hans und Gisela</span></div></div>

Vielleicht versuchst du zusätzlich die Zeilenabstände dadurch zu verkleinern, beim höchsten Bild einen breiteren Bildausschnitt zu wählen, sodass die Füße der Abgebildeten früher aufhören und das Bild kleiner wird bei gleichbleibender Breite.

Grüße,
Mathias