Bilder mit Untertiteln nebeneinander anordnen

[Vinzenz Mai]

Hallo Stefan,

für eine Fotogalerie sollen die Vorschaubilder zusammen mit ihren Untertiteln neben- und untereinander angezeigt werden. Das Layout soll jedoch keine statische Matrix sein, sondern sich den verschiedenen Fenstergrößen anpassen, d.h. es sollen immer soviele Bilder nebeneinander angezeigt werden, wie horizontaler Platz im Browserfenster zur Verfügung steht. Also so, wie <img>-Tags angezeigt würden, wenn man sie einfach durch Whitespaces voneinander trennen würde.

Das funktioniert, aber leider nicht mit allen Browsern.

welche Browser sind für *Dich* relevant?
Die einfache Lösung für halbwegs aktuelle Browser wäre display: inline-block:

Markup:

    <ul id="galerie">  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel, der länger und länger und noch länger ist.</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
        <li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>  
    </ul>  

mit folgendem CSS:

    #galerie {  
        /* [link:http://forum.de.selfhtml.org/hilfe/faq.htm#css-zentrieren@title=Du möchtest die Galerie ja zentriert] */  
        margin-right: auto;  
        margin-left: auto;  
  
        /*  
           und die Bildblöcke ebenfalls zentriert, falls die Reihe  
           nicht voll ist.  
        */  
        [link:http://wiki.selfhtml.org/wiki/Referenzen:CSS/Eigenschaftenreferenz/Ausrichtung_und_Absatzkontrolle#Horizontale_Ausrichtung@title=text-align]: center;  
    }  
  
    #galerie li {  
        /*  
           Damit die Untertitel nicht die Breite bestimmen, sondern  
           umbrechen, solltest Du eine an die Breite Deiner Thumbnails  
           angepasste Breite der Listenelemente vorgeben.  
        */  
        width: 200px;   /* so breit waren meine Thumbnails */  
  
        /* Für die gewünschte Anordnung in umbrechenden Zeilen */  
        [ref:self812;css/eigenschaften/positionierung.htm#display@title=display]: inline-block;  
  
        /*  
            Die Bilder sollen an der Oberkante ausgerichtet sein, damit  
            es bei unterschiedlichem Platzbedarf für Untertitel nicht zu  
            unschönen Verschiebungen kommt.  
        */  
        [link:http://wiki.selfhtml.org/wiki/Referenzen:CSS/Eigenschaftenreferenz/Ausrichtung_und_Absatzkontrolle#Vertikale_Ausrichtung@title=vertical-align]: top;  
    }  
  
    #galerie li p {  
        /* Die Untertitel sollen linksbündig sein. */  
        text-align: left;  
    }  

Hacks für IE 6/7 (falls für Dich relevant) findest Du bei Gunnar.

Freundliche Grüße

Vinzenz