Vinzenz Mai: Tabelle: Umbruch für Thumbnails

Beitrag lesen

Hallo,

Hey Leuts danke für Eure Antworten. Ist überhaupt verstanden was gewünscht ist?

ja, selbstverständlich.

http://imageupload.org/en/file/187148/thumbnails.jpg.html

wie ich bereits schrieb, sollte dies mit dem generierten HTML problemlos möglich sein:

a) ein Containerelement für das Preview-Bild
b) ein Containerelement für die Thumbnails

<div id="preview">  
    <img src="path/to/preview/image" alt="Voransicht">  
</div>  
<div id="thumbnails">  
    <img src="path/to/tumbnail/1" alt="">  
    <img src="path/to/tumbnail/2" alt="">  
    <img src="path/to/tumbnail/3" alt="">  
    <img src="path/to/tumbnail/4" alt="">  
    <img src="path/to/tumbnail/5" alt="">  
    <!-- und noch viele mehr -->  
</div>

Nun nehmen wir ein wenig CSS zur Hand, um die gewünschte Darstellung zu bekommen:

#preview {  
    width:  480px;      /* meine Bilder sind 480 Pixel breit */  
    height: 360px;      /* und 360 Pixel hoch */  
    padding: 10px;      /* etwas Luft schadet nie, optional  */  
    float: left;        /* damit die Thumbnails links davon bleiben */  
}  
  
#thumbnails {  
    width:  270px;      /* meine Thumbnails sind 80 Pixel breit, so passen  
                           mit Scrollbalken drei nebeneinander.           */  
    height: 380px;      /* so hoch wie der Preview-Bereich plus Padding   */  
    overflow-y: scroll; /* damit man die Thumbnails scrollen kann, wenn es  
                           mehr werden, als gleichzeitig angezeigt werden  
                           können.                                         */  
}  

Wie ich bereits anmerkte, wird das HTML bereits ganz ähnlich erzeugt. Es kann somit nur noch am CSS liegen, wenn die Darstellung nicht so ist, wie gewünscht.

Freundliche Grüße

Vinzenz