Bilder mit Untertiteln fließend nebeneinander anordnen

[Stefan B.]

Hallo zusammen,

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.

Für einzelne Bilder funktioniert das auch wunderbar, aber wenn auch noch Untertitel unter jedem Bild angezeigt werden sollen, reicht das nicht mehr aus, da je ein Bild und ein Untertitel eine zusammengehörige Einheit bilden sollen. Bild + Untertitel müssen also in einen Container, und die Container müssen - wie zuvor die <img>-Tags - nebeneinander dargestellt werden. Die naheliegendste Möglichkeit hierfür wäre wohl eine Tabelle, etwa in der Art:

  
<table cellspacing="4" cellpadding="0" border="0" style="display:inline;"><tr><td align="left"><img src="bild.jpg" width="192" height="144"><br>Bilduntertitel</td></tr></table>  

Das funktioniert, aber leider nicht mit allen Browsern. Während die Desktop-Browser Opera, Firefox und Internet Explorer die Tabellen tatsächlich wie beabsichtigt nebeneinander darstellen, ordnen Webkit-basierte Mobilbrowser für Android die einzelnen Tabellen weiterhin untereinander an, d.h. die Angabe "display:inline;" hat hier offenbar keine Auswirkung.

Also vielleicht ein <div> oder <span> als Container verwenden? Z.B. so:

  
<div style="margin:6px; text-align:left; display:inline; float:left;><img src="bild.jpg" width="192" height="144"><br>Bilduntertitel</div>  

Das funktioniert jetzt zwar auch mit Webkit-Browsern, aber die Bilder sind auf der Seite nicht horizontal zentriert, was wohl mit der Angabe "text-align:left;" zusammenhängt. Läßt man diese Angabe aber weg, sind die Bilduntertitel nicht mehr links ausgerichtet, sondern mittig unter jedem Bild. Des weiteren muß das Umfließen des Textes nachfolgender Elemente wieder beendet werden.

Hat noch jemand eine Idee, wie ich diese scheinbar einfache Sache hinbekomme?

Hier noch eine Seite zur Veranschaulichung der obigen Beispiele:
http://www.stefanbion.de/tmp/inline-table.htm

Gruß,
Stefan

[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

[Felix Riesterer]

Lieber Vinzenz Mai,

<li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>

Wozu das <p>-Element? Wenn man das <img> mit display:block versieht, braucht es doch kein <p> mehr!

Liebe Grüße,

Felix Riesterer.

[Vinzenz Mai]

Hallo Felix,

<li><img src="beispiel.jpg" alt="beispiel"><p>Untertitel</p></li>

Wozu das <p>-Element? Wenn man das <img> mit display:block versieht, braucht es doch kein <p> mehr!

Weil es mir semantisch richtig erscheint, die Bildbeschriftung auszuzeichnen.

Hier als figcaption-Ersatz, siehe den Beitrag von the-FoX für die semantische Auszeichnung der Bildbeschriftung (hier Bildunterschrift).

Freundliche Grüße

Vinzenz

[Stefan B.]

Hi Vinzenz,

ganz vielen Dank erstmal, das hat mir schonmal weitergeholfen. Ich wäre von selbst wohl nie auf die Idee gekommen, Listen dafür zu "mißbrauchen"...

Nach etwas Anpassung des CSS sieht es jetzt in Opera, Firefox und Webkit-Browsern so aus, wie es soll (siehe aktualisierte, verlinkte Seite im Ausgangsposting). Jetzt muß ich "nur" noch den Hack für den lieben Internet-Explorer (ich teste übrigens mit Version 8) hinbekommen, der die Liste unbeeindruckt wie normale Listen mit Spiegelpunkten untereinander darstellt (hoffentlich geht das ähnlich einfach...).

Gruß,
Stefan

[Stefan B.]

Moin,

hmm, also mit dem "IE-Hack" komme ich nicht klar - so, wie es dort auf der Seite angegeben ist ...

  
* html li {  
    display: inline;  
}  
  
*:first-child+html li {  
    display: inline;  
}  

... hat der Code jedenfalls keinerlei Auswirkungen. Leider verstehe auch ich die CSS-Angaben nicht wirklich gut genug, um damit zielführend experimentieren zu können. Was z.B. bedeutet der "*" und das "html", und wozu dient "*:first-child+html", und was soll überhaupt mit dem "display:inline" bewirkt werden? *kopf-rauch*

Gruß,
Stefan

[Vinzenz Mai]

Hallo Stefan,

hmm, also mit dem "IE-Hack" komme ich nicht klar - so, wie es dort auf der Seite angegeben ist ...

Du solltest den Code auch nicht unverändert übernehmen :-)

Was z.B. bedeutet der "*" und das "html",

Das ist der http://de.selfhtml.org/css/layouts/browserweichen.htm#star_html_hack@title=Star-HTML-Hack (für IE6)

• html li {
      display: inline;
  }

und wozu dient "*:first-child+html"

Das ist der [ref:self812;css/layouts/browserweichen.htm#star_plus_html_hack@title=Star-plus-HTML-Hack] für den IE 7.

*:first-child+html li {
    display: inline;
}

  

> und was soll überhaupt mit dem "display:inline" bewirkt werden? \*kopf-rauch\*  
  
IE 7 und älter unterstützen display: inline-block nicht wirklich, aber ... mit dieser lustigen Kombination  
  
a) display: inline-block;  
b) display: inline  
  
in etwa doch, siehe z.B. <http://www.brunildo.org/test/InlineBlockLayout.html>  
  
Damit die Hacks greifen, solltest Du beachten, dass die Listenelemente sich in der Liste mit der id="galerie" befinden:  
  
~~~css
  
/*  
    Star-HTML-Hack für IE6  
    Beachte, dass durch das vorhergehende  
  
        display: inline;  
  
    das Element über [link:http://www.webkrauts.de/2007/06/05/haslayout-auf-deutsch-erklaert/@title=hasLayout] verfügt.  
*/  
* html #galerie li {  
    display: inline;  
}  
  
/* Star-Plus-HTML-Hack für IE7 */  
*:first-child+html li {  
    display: inline;  
}  

Damit sah es in IE6, 7 und 8 so aus wie von Dir gewünscht. Ein

list-style: none;

war bei mir nicht erforderlich.

Freundliche Grüße

Vinzenz

[Stefan B.]

Hallo Vinzenz,

inzwischen habe ich den "IE-Hack" zum Laufen gebracht, allerdings nur mit der Dokumenttyp-Deklaration "Transitional". Leider verursacht das im IE dann wieder andere Probleme, z.B. daß dann der mittels "padding:5px;" erzeugte weiße Rahmen um die Bilder herum nicht mehr dargestellt wird.

Ich habe meine bisherigen Versuchsergebnisse nochmal auf meiner [Testseite](file://localhost/D:/Homepages/stefanbion.de/www/tmp/inline-table.htm) in einer Übersiche zusammengefaßt.

Was ich im Eingangs-Posting über die Webkit-basierten Browser geschrieben habe, trifft übrigens auch auf Chrome zu, d.h. die Variante mit der TABLE als Container funktioniert dort auch nicht richtig ("display:inline;" wird ignoriert). (Kein Wunder, da der Chrome ja auch die Webkit-Engine benutzt.)

Es ist echt zum Haareraufen, daß es keine Variante zu geben scheint, die mit allen "wichtigen" Browsern (Opera, Firefox, IE, Chrome/Webkit) funktioniert. Wenn ich mich entscheiden müßte, mit welchem Browser es nicht funktionieren soll, dann würde ich wohl den IE wählen...

...aber noch gebe ich die Hoffnung nicht auf, daß es doch noch eine Lösung für alle Browser gibt - ohne "Transitional". ;)

Gruß,
Stefan

[Stefan B.]

Nachtrag:

Wenn für die Webseite der "Kompatibilitätsmodus" deaktiviert wird, dann interpretiert der IE8 auch "display:inline-block;". Somit wäre das eine Lösung, die mit allen Browsern funktioniert - beim IE eben halt nur mit den Versionen ab 8 und ohne "Kompatibilitätsmodus". Ich denke, damit kann man leben, zumal wer sich den IE antut, sowieso noch ganz andere Probleme hat... ;->

Stefan

[Vinzenz Mai]

Hallo Stefan,

Wenn für die Webseite der "Kompatibilitätsmodus" deaktiviert wird, dann interpretiert der IE8 auch "display:inline-block;".

der von Dir gewählte DOCTYPE ist unvollständig, das ist keine gute Idee (sieht man leider zu oft in den SELFHTML-Beispielen, im  Wiki hab' ich schon einiges aufgeräumt). Siehe z.B. auch </archiv/2012/1/t208850/#m1420785>.

Empfehlenswert ist der HTML5-Doctype

<!DOCTYPE html>

Gut für die Vergangenheit, gut für die nähere Zukunft.

Weitere Hinweise:
Die Auskommentierung der CSS-Angaben ist ein Relikt aus dem vergangenen Jahrtausend, diese kannst Du mit ruhigem Gewissen entsorgen.
Verzichte auf veraltete Attribute wie align, valign, hspace, vspace.

Freundliche Grüße

Vinzenz

[Stefan B.]

Hi Vinzenz,

der von Dir gewählte DOCTYPE ist unvollständig, das ist keine gute Idee (sieht man leider zu oft in den SELFHTML-Beispielen, im  Wiki hab' ich schon einiges aufgeräumt). Siehe z.B. auch </archiv/2012/1/t208850/#m1420785>.

Die Angabe des URI hatte ich bisher immer für entbehrlich gehalten. OK, man lernt nie aus... aber wie ist das eigentlich: Wird die dort verlinkte Datei tatsächlich vom Browser geladen? Und wenn ja, verzögert das nicht den Seitenaufbau, und was passiert, wenn der Server www.w3.org nicht erreichbar ist?

Empfehlenswert ist der HTML5-Doctype

<!DOCTYPE html>

Gut für die Vergangenheit, gut für die nähere Zukunft.

Den kannte ich noch nicht. Werde ich mir mal "vormerken" für zukünftige "Bereinigungsaktionen".

Weitere Hinweise:
Die Auskommentierung der CSS-Angaben ist ein Relikt aus dem vergangenen Jahrtausend, diese kannst Du mit ruhigem Gewissen entsorgen.
Verzichte auf veraltete Attribute wie align, valign, hspace, vspace.

Yo, ich weiß, ich schleppe noch viele Altlasten von 1997 mit mir herum... aber irgendwie ist man's gewohnt und es schreibt sich schneller mal eben so hin als saubere CSS-Angaben. Irgendwann™ werde ich das bestimmt mal alles bereinigen...

Gruß,
Stefan

[Der Martin]

Hallo,

ganz vielen Dank erstmal, das hat mir schonmal weitergeholfen. Ich wäre von selbst wohl nie auf die Idee gekommen, Listen dafür zu "mißbrauchen"...

wieso "missbrauchen"? Eine Bildergalerie *ist* eine Liste von Bildern (oder Blöcken aus Bild und Text). Also ist eine Liste das nächstliegende, was sich für die Auszeichnung anbietet.

Nach etwas Anpassung des CSS sieht es jetzt in Opera, Firefox und Webkit-Browsern so aus, wie es soll (siehe aktualisierte, verlinkte Seite im Ausgangsposting). Jetzt muß ich "nur" noch den Hack für den lieben Internet-Explorer (ich teste übrigens mit Version 8) hinbekommen, der die Liste unbeeindruckt wie normale Listen mit Spiegelpunkten untereinander darstellt (hoffentlich geht das ähnlich einfach...).

Dagegen hilft list-style-type:none;

Ciao,
 Martin

[MrMurphy]

Hallo,

für dein Problem sind entsprechend formatierte Definitionslisten die Lösung. Siehe z. B. Example 6 auf

http://www.maxdesign.com.au/articles/definition/

Die Definitionsliste läßt sich vielfältig gestalten (siehe z. B. auch Exampel 5) und irgendwelche Hacks sind nicht notwendig.

Gruss

MrMurphy

[Stefan B.]

Moin MrMurphy,

für dein Problem sind entsprechend formatierte Definitionslisten die Lösung. Siehe z. B. Example 6 auf

http://www.maxdesign.com.au/articles/definition/

Die Definitionsliste läßt sich vielfältig gestalten (siehe z. B. auch Exampel 5) und irgendwelche Hacks sind nicht notwendig.

Ist leider nicht so einfach wie Du es sagst. Ich habe das Beispiel ausprobiert - Ergebnis siehe "Versuch 5" auf meiner Testseite.

Gruß,
Stefan

[the-FoX]

Guten Morgen Stefan,

was ist mit dem figure-Tag und figcaption-Tag?
Wäre dies nicht auch eine Alternative?

Gruß,
the-FoX

[Stefan B.]

Moin the-FoX,

was ist mit dem figure-Tag und figcaption-Tag?
Wäre dies nicht auch eine Alternative?

Auch dabei scheint nix ohne "display:inline-block;" zu gehen, was dem IE am A vorbeigeht... :-(

Gruß,
Stefan

[Stefan B.]

Mahlzeit,

so, hier nochmal abschließend und zusammenfassend die Lösung, die ich jetzt erst einmal umgesetzt habe, und die mit allen relevanten Browsern funktioniert (mit dem IE ab Version 8):

Erstmal der HTML5-Doctype:

  
<!DOCTYPE html>  

Dann eine Extrawurst für den lieben Internet Exploder - eine Header-Angabe für das Deaktivieren der Kompatibilitätsansicht, damit er "display:inline-block" versteht:

  
<meta http-equiv="X-UA-Compatible" content="IE=8" />  

Das Gruppieren der Bilder und Untertitel für die Galerie-Ansicht wird mit einem <div> gemacht:

  
<center>  
<div id="thumbnail"><img src="..."><br>Untertitel</div>  
...  
</center>  

Das CSS dazu:

  
#thumbnail {  
	display:inline-block;  
	margin:4px 4px 8px 4px;  
	vertical-align:top;  
	font-size:8pt;  
	text-align:left;  
}  
  
#thumbnail img {  
	vertical-align:top;  
	width:192px;  
	height:144px;  
}  

Hier noch das Live-Beispiel dazu.

Danke allen für die Hilfe, vor allem Vinzenz! :)

Gruß,
Stefan

[Kai345]

[latex]Mae  govannen![/latex]

<center>

  
Nö, so nicht.  
["The <center> element was introduced in HTML 3.2 - Block elements. It has been deprecated since HTML 4. HTML5 classifies it as a non-conforming feature."](http://www.w3.org/wiki/HTML/Elements/center)  
  
Alternative in den [SelfHTML-FAQ](http://forum.de.selfhtml.org/hilfe/faq.htm)  
  
Stur lächeln und winken, Männer!  
Kai

-- 
It all began when I went on a tour, hoping to find some furniture  
 Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)  
[SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)

[Stefan B.]

Moin,

<center>

>   
> Nö, so nicht.  
  
Ja klar, man soll das deprecated <center> mittels CSS nachbasteln... aber wenn es so deprecated ist, warum hat man es dann mit HTML5 nicht einfach konsequent rausgeworfen? - Solange es funktioniert, wird es wohl auch verwendet werden...  
  
Stefan

[Kai345]

[latex]Mae  govannen![/latex]

<center>
Nö, so nicht.

Ja klar, man soll das deprecated <center> mittels CSS nachbasteln... aber wenn es so deprecated ist, warum hat man es dann mit HTML5 nicht einfach konsequent rausgeworfen? -

nicht? HTML5 differences from HTML4

Solange es funktioniert, wird es wohl auch verwendet werden...

Leider. Aber "es funktioniert" ist natürlich kein Qualitätsmerkmal. Tabellenlayout „funktioniert“ auch irgendwie, ebenso Inline-Styles oder DIV-Suppe ... sinnvoll wird es dadurch nicht.

Stur lächeln und winken, Männer!
Kai