Gallerie mit float

[Benjamin Wilfing]

Hi Aybee,

<table>
[...]

ich finde, das ist eine schöne Lösung.

ich nicht. Mal ganz abgesehen davon, dass es semantischer Quatsch ist, eine Bildergalerie in einer Tabelle darstellen zu wollen (was hat das mit tabellarischen Daten zu tun?), ist es doch (IMHO) viel hübscher, wenn dem Benutzer eben *nicht* aufgezwängt wird, wieviele Bilder nebeneinander sind, sondern das ganz von der Größe des Fensters abhängig gemacht wird.

Hier mal ein Beispiel aus einem Projekt, an dem ich aktuell am Werkeln bin -- dort gibt es auch eine Fotogalerie. Ich habe den Code einfach mal von dort kopiert und hoffe, nichts vergessen zu haben ;-)

Hier der HTML-Teil...

  
<span class="thumbnail"><a href="bild1.jpg"><img src="bild1-klein.jpg" alt="..." /></a></span>  
  
<span class="thumbnail"><a href="bild2.jpg"><img src="bild2-klein.jpg" alt="..." /></a></span>  
  
<span class="thumbnail"><a href="bild3.jpg"><img src="bild3-klein.jpg" alt="..." /></a></span>  

(usw. usf ...)

... mit folgendem CSS-Code formatiert:

  
.thumbnail {  
 display: block;  
 float: left;  
 margin: 6px 12px 6px 0;  
 width: 126px;  
 height: 126px;  
 text-align: center;  
 }  
  
.thumbnail a {  
 display: block;  
 padding: 6px;  
 }  
  
* html .thumbnail {  
 overflow:auto;  
 }  
  
.thumbnail a:hover {  
 padding: 0;  
 }  
  
.thumbnail img {  
 background-color: #c7c3a9;  
 border: 1px solid #c7c3a9;  
 display: block;  
 margin: 0 auto;  
 }  
  
.thumbnail a:hover img {  
 border: 1px solid #727060;  
 padding: 6px;  
 }  

Der Vorteil gegenüber der Tabellenlösung liegt hier meiner Meinung nach auf der Hand: Ist das Browserfenster zu klein, um 4 (oder X) Bilder nebeneinander darzustellen, rutschen sie durch den Floateffekt einfach automatisch in die nächste Zeile. Ist das Browserfenster sehr breit (es soll ja Leute geben, die mit sehr hohen Auflösungen arbeiten), passen schön viele Bilder nebeneinander. Man kann das ganze Konstrukt ja trotzdem mit einem einfachen min-width und max-width (und entsprechenden IE-Würgarounds) in gewisse Grenzen packen, wenn man das möchte.

Viele Grüße
Benjamin