Gösta Thomas' Blog

Um was geht es hier? Um eine HTML-/CSS-Bildergalerie aus mehreren Bildern mit jeweils verschieden langen Untertexten für eine Webseite. Die Bildergalerie soll zentriert (mittig ausgerichtet) und zugleich mobilgerätefreundlich sein: auf Smartphones werden die Elemente, jeweils bestehend aus Bild und zugehörigem Text, untereinander dargestellt. Auf breiteren Bildschirmen werden die Elemente nebeneinander angeordnet, brechen aber bei ausgeschöpftem Platz in die nächste(n) Zeile(n) um: eine tabellenartige Bildergalerie mit Untertexten in variablem Elementfluß. Ich verwende für die Beispiel-Lösung eine normale HTML-Liste ul. Die Listenelemente li werden mit der CSS-Eigenschaft display: inline-block; (Version CSS 2.1) angeordnet, die sogar der IE 8 schon umsetzt. Es gibt also keine Darstellungsprobleme auf älteren Browsern. Als Kopier-Muster finden Sie unten zwei Codeschnippsel in HTML und CSS.

Bildergalerie-Test: für breite Bildschirme und Mobilgeräte geeignet

• 

  Bild mit Untertext

• 

  Bild mit etwas längerem Untertext

• 

  Bild mit ganz langem Untertext. Bild mit ganz langem Untertext. Bild mit ganz langem Untertext.

• 

  Bild mit etwas kürzerem Untertext

• 

  Bild mit Untertext

Eine Bildergalerie mit fünf Elementen, bestehend aus Bild und Untertext, reicht zum Test mit breiten Bildschirmen und Mobilgeräten aus. Wenn Sie alle fünf Bilder nebeneinander sehen, verschmälern Sie das Browserfenster zum Test, so daß das fünfte Bild mit seinem zugehörigen Text in die (neue) nächste Zeile umbricht: dort ist es, bezogen auf die erste Zeile, mittig ausgerichtet.

Wenn Sie das Browserfenster noch schmaler ziehen, wechselt auch das vierte Bild in die zweite Zeile. Bei noch weiter verkleinertem Fenster rutscht auch das dritte Bild in die zweite Reihe, und das fünfte von der zweiten in die neue dritte. Egal, wie lang der Untertext eines Bildes ist, mehrere nebeneinander liegende Bilder werden immer auf gleicher Höhe angezeigt.

Bei ganz schmalem Fenster, also der Smartphone-typischen Darstellung, werden alle Bilder untereinander angezeigt. Dabei ist die gesamte Liste, unabhängig von der Anzahl der Reihen, stets zum HTML-Elternelement zentriert angeordnet. Sie können auch ganz einfach die Funktion Bildschirmgrößen testen (Firefox) bzw. Emulation (Vivaldi, Chrome) der Entwicklerwerkzeuge Ihres Browsers verwenden (über die Taste F12 erreichbar).

HTML- und CSS-Codeschnippsel: Muster zum Kopieren

HTML-Codeschnippsel: eine ganz normale unsortierte HTML-Liste

Zum Einsatz kommt eine unsortierte HTML-Liste (Element ul), der die Klasse bigaltxt zugeordnet wird. Wie die Klasse heißt, ist egal, nur muß in der Stylesheet-Datei der gleiche Name verwendet werden. Jedes Listenelement enthält einen Link mit einem Bild sowie einen Absatz mit dem zugehörigen Untertext. Der Link könnte etwa zu einer Seite zeigen, die das gleiche Bild in größerer Auflösung enthält. Wer keine Links braucht, sondern nur die Bilder anzeigen will, entfernt einfach das a-Element rings um das img-Element. Aus Platzgründen enthält mein Codeschnippsel nur drei Listenelemente.

Für die Anzahl der Listenelemente gibt es keine Obergrenze. Theoretisch könnte man jährlich eine Million Listenelemente hinzufügen, allerdings würde dadurch die Ladezeit der Seite erheblich erhöht.

<ul class="bigaltxt">
  <li>
    <a title="..." tabindex="41" href="...">
      <img src="..." alt="...">
    </a>
    <p>Untertext zum Bild</p>
  </li>
  <li>
    <a title="..." tabindex="42" href="...">
      <img src="..." alt="...">
    </a>
    <p>Untertext zum Bild</p>
  </li>
  <li>
    <a title="..." tabindex="43" href="...">
      <img src="..." alt="...">
    </a>
    <p>Untertext zum Bild</p>
  </li>
  <!-- hier weitere Listenelemente einfügen -->
</ul>

CSS-Codeschnippsel: die zugehörigen CSS-Eigenschaften (CSS 2.1)

Jedem Listenelement wird normalerweise ein Aufzählungszeichen vorangestellt. Dessen Anzeige wird mit der Eigenschaft display: inline-block; zwar unterdrückt, das nicht sichtbare Aufzählungszeichen beansprucht aber dennoch Platz. Die Folge: Trotz Angabe der Eigenschaft text-align: center; wird die Liste innerhalb des Elternelements nicht genau mittig angezeigt, sondern entsprechend nach rechts verrückt. Mit den Angaben position: relative; left: -38px; wird dieser Fehler behoben, und die Liste wird zentriert ausgerichtet. In meinem Fall war eine Linksverschiebung um -38px erforderlich, bei anderen Layouts könnte aber auch ein anderer Wert der richtige sein, zB -42px. Beachten Sie bitte auch, daß Ihnen die Vererbung von CSS-Eigenschaften durch Elternelemente einen Streich spielen könnte. Deswegen mußte ich in einem Fall den Parameter !important angeben, um die angegebene Eigenschaft durchzudrücken. Es hängt von Ihren schon vorhandenen CSS-Regeln ab, ob die Eigenschaften aus meinem CSS-Codeschnippsel geändert oder ggf. ergänzt werden müssen. Wenn Sie für Ihre Bilder eine andere Auflösung als 148 * 111 Bildschirmpunkte eintragen, wäre zusätzlich auch die Breitenangabe für den Untertext-Absatz zu ändern.

.bigaltxt {width:100%; position:relative; left:-38px;
    text-align:center; margin:1.2em auto .8em auto;}
.bigaltxt li {display:inline-block; vertical-align:top;
    margin:.3em !important;}
.bigaltxt li img {width:148px; height:111px;
    margin:.3em; border:1px solid;}
.bigaltxt li a:focus {color:#DF0066; background-color:#fff;}
.bigaltxt li a:hover {color:#DF0066; background-color:#fff;}
.bigaltxt li p {text-align:center; width:148px;
    margin:0 4px 1.4em 4px;}

Bildergalerie: nur mobilfreundlich oder auch responsive?

CSS3-Medienabfragen werden nicht eingesetzt. Meine Bildergalerie in variablem Elementfluß mit Untertexten für jedes Bild ist also mobil-(geräte-)freundlich, aber nicht responsive. Denn der Begriff responsive setzt voraus, daß Medienabfragen verwendet werden (siehe zB diesen Artikel des Kulturbanausen).

Links zum Thema CSS-Eigenschaft display

• wiki.selfhtml.org : Eigenschaft display
• css-wiki.com : Eigenschaft display

veröffentlicht in kat_Webdesign