www.stefanheymann.de

Stefan Heymann

Home | Fotografie · Hasselblad · Galerie | Ruler · XML · HomePump · HomeGallery

HomeGallery

Allgemein·Download·Doku·Historie·Links·Banner·Donateware

Thumbnail-Tabellen

Die voreingestellte und "klassische" Weise von HomeGallery zur Erstellung der Thumbnail-Tabelle auf den Index-Seiten ist die Realisierung als TABLE. Hierbei wird eine feste Anzahl von Spalten eingestellt (über das Feld Thumbnails - Anzahl horizontal).

Auf der Seite "HTML-Templates" von HomeGallery kann der Code für den Start-Tag des TABLE-Elements sowie der Code für eine Tabellen-Zelle (TD) angegeben werden.

Hiermit sind mit einfachen Möglichkeiten klassische Tabellen erstellbar. Diese haben eine feste Breite (Anzahl Spalten) und können über HTML und/oder CSS weitgehend frei gestaltet werden. 

Beginnend mit der Version 1.4.2 von HomeGallery wurden die Möglichkeiten zur Gestaltung der Tabelle erweitert: Es ist jetzt auch möglich, den HTML-Code für das End-Tag der TABLE, sowie für den Start- und End-Tag jeder Zeile (TR) anzugeben.

Spaltenzahl richtet sich nach der Browser-Fensterbreite

Damit ist es aber nun auch möglich, dass sich die Anzahl der dargestellten Spalten nach der Fensterbreite des Browsers bzw. nach dem durch entsprechendes CSS vorgegebenen Platz richtet (z. B. auch beim Ausdruck). Hierbei werden dann keine TABLES mehr verwendet, sondern DIV-Elemente, die mit der CSS-Eigenschaft float:left versehen werden. Diese sorgt dafür, dass die DIV-Elemente (die ja stets - wie Tabellenzellen auch - einen rechteckigen Umriss haben), so lange nebeneinander gestellt werden, wie Platz ist. Danach erfolgt ein "Umbruch".

Ich habe dieses Prinzip z. B. bei meiner Galerie "Diverse" eingesetzt. Hier sind horizontal immer so viele Thumbnails (per CSS als kleine Diarähmchen gestaltet) sichtbar, wie eben in das aktuelle Browser-Fenster passen.

Umsetzung in HTML und CSS

Diese Technik kann folgendermaßen umgesetzt werden:

Wenn Thumbnails im DIV nicht nur horizontal sondern auch vertikal zentriert werden sollen hilft im Moment (2003) leider nichts anderes, als das DIV mit einer TABLE auszufüllen, die ihrerseits nur eine Zelle mit dem Stil vertical-align:middle enthält. Dieser Stil wird leider nur von Tabellen-Zellen "verstanden".

Die Angabe der "Anzahl Thumbnails horizontal" in HomeGallery ist bei dieser Technik irrelevant. Es kann jeder beliebige Wert eingetragen werden.

(Auch wenn ich hier Tipps zu HTML und CSS gebe: bitte haben Sie Verständnis, dass ich keinen Support zu HTML- und CSS-Fragen leisten kann.)