CSS Bildergalerie: Thumbnails zentriert darstellen

joe67

Cadet 4th Year
Registriert
Jan. 2007
Beiträge
96
Hallo,

ich möchte Thumbnails einer Bildergalerie auf meiner Homepage darstellen und seit Tagen probiere ich rum wie ich folgendes erreichen kann:

  • Die Anzahl der Thumbnails, die in derselben Zeile dargestellt werden, soll abhängig von der Fensterbreite des Browsers variieren
  • Die Thumbnails sollen in der Zeile zentriert dargestellt werden
  • Jedes Thumbnail ist mit einer Bildunterschrift versehen



Folgenden Code habe ich ausgetüftelt:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>



<div style="display: table; text-align: center;">

    <div style="display: inline-block;"> 
        <img src="pic.png" alt="Bild" >	<br>
        Text <br>
    </div>

    <div style="display: inline-block;"> 
        <img src="pic.png" alt="Bild" >	<br>
        Text <br>
    </div>

    <div style="display: inline-block;"> 
        <img src="pic.png" alt="Bild" >	<br>
        Text <br>
    </div>

    <div style="display: inline-block;"> 
        <img src="pic.png" alt="Bild" >	<br>
        Text <br>
    </div>

</div>


</body>
</html>

In Opera, Firefox und Chrome sieht das Ergebnis wie gewünscht aus (siehe angehängte Grafik). Nur der InternetExplorer listet alle Thumbnails untereinander auf.

Wie gesagt, ich tüftel seit Tagen rum und bekomme keine alternative Lösung hin, die genau dieses Ergebnis in allen Browsern liefert. Hat jemand einen Vorschlag?

j o e
 

Anhänge

  • 2012-04-03_103954.png
    2012-04-03_103954.png
    159,8 KB · Aufrufe: 232
Zuletzt bearbeitet:
Welcher IE? Ab v8 sollte display: table funktionieren. Sonst würde mir ein float: left; einfallen, aber ich glaub dass die Bilder nicht mehr zentriert wären (falls unterschiedliche Auflösungen verwendet werden).
 
Hab hier IE 8 und dachte eigentlich auch, der würde das unterstützen. Tut er aber offensichtlich nicht.

float: left habe ich natürlich schon probiert und wie du richtig sagst, wird dann leider alles linksbündig dargestellt.

j o e
 
Du könntest auch nur mit float arbeiten, wenn du in den div-Containern fixe Angaben (Höhe + Breite) machst.

Btw solltest du glaub eher auf display: table-cell setzen anstatt inline-block. Zumal du bei inline-block auch fixe Angaben verwenden musst, sonst passen die sich genauso dynamisch dem Content an.
 
verwendet mal folgenden Eintrag bei dir

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
"strict" funktioniert. Natürlich meldet der W3C-Validator jetzt jede Menge Fehler (das Beispiel war ja nicht der komplette Code meiner eigentlichen Webseite). Aber ich werde mal sehen, ob ich das nicht alles korrigieren kann.

Danke einstweilen.

j o e
 
Ich würde auch noch UTF-8 Kodieren nicht mit ISO blub
 
Cool Master schrieb:
Ich würde auch noch UTF-8 Kodieren nicht mit ISO blub

Dem stimme ich auch mal zu, hab ich garnicht gesehen :rolleyes:
 
Machs doch ganze elegant, nimm <!DOCTYPE HTML>. Dann hast du auch für deine Bilder Zugriff auf das <figure>-Element nebst seinem Beschreibungs-Element. Semantisch korrekter Code ist toll.
 
Zurück
Oben