dynamische tabellenbreite/höhe

[acid]

hallo,

ich benutze die winlike fensterchen um die thumbnails einer bildergalerie anzuzeigen.

der vorteil der winlike fenster ist ja, dass ich diese vergrößern kann.
quasi wie ein window.open im js.

nun möchte ich, das sich der seiten-content (die thumbnails) dynamisch je nach fenstergröße in mehreren spalten und zeilen darstellen.

//fenster groß
+-----------------------------+
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
+------------------------------+

//fenster klein
+-----------------+
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
+-----------------+

die einzelnen thumbnails sollen quasi immer schön auf linie in einer tabelle stehen ohne mal auf der einen zeile 5 und auf der anderen zeile 3 bilder zu haben.

hat jemand eine idee wie man sowas machen kann?

der seiten-content wird ja beim vergrößern des fensters nicht neu geladen. es muss also was clientseitiges sein. am liebsten währe mir natürlich etwas css-artiges was die bilder immer schön in reihe hällt.

mfg uwe

[Struppi]

nun möchte ich, das sich der seiten-content (die thumbnails) dynamisch je nach fenstergröße in mehreren spalten und zeilen darstellen.

//fenster groß
+-----------------------------+
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
+------------------------------+

//fenster klein
+-----------------+
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
+-----------------+

Das läßt sich leicht mit CSS ohne Tabellen erreichen in dem du die bilder floaten läßt.

Struppi.

[acid]

nun möchte ich, das sich der seiten-content (die thumbnails) dynamisch je nach fenstergröße in mehreren spalten und zeilen darstellen.

//fenster groß
+-----------------------------+
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
| img | img | img | img | img |
+------------------------------+

//fenster klein
+-----------------+
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
| img | img | img |
+-----------------+

Das läßt sich leicht mit CSS ohne Tabellen erreichen in dem du die bilder floaten läßt.

Struppi.

so: danke für den tipp: habe es folgendermaßen gelöst:

<style type="text/css">
 .thumbnail
 {
  float: left;
  width: 140px;
  height: 130px;
  margin: 5px 5px 5px 5px;
  border: 1px dashed;
  }
 table {width: 100%; height: 100%;}
 </style>
 <div>
    <div class="thumbnail"><table><tr><th><img src="thumbnails/CRW_0184_preview.jpg" width="80" height="120" border=0 alt="CRW_0184_preview"></th></tr></table></div>
    <div class="thumbnail"><table><tr><th><img src="thumbnails/CRW_0186_preview.jpg" width="120" height="80" border=0 alt="CRW_0186_preview"></th></tr></table></div>
    <div class="thumbnail"><table><tr><th><img src="thumbnails/CRW_0187_preview.jpg" width="120" height="80" border=0 alt="CRW_0187_preview"></th></tr></table></div>
    <div class="thumbnail"><table><tr><th><img src="thumbnails/CRW_0188_preview.jpg" width="120" height="80" border=0 alt="CRW_0188_preview"></th></tr></table></div>
        </div>

habe die einzelnen thumbs immer noch in einen th geknallt damit das auch noch vertical zentriert ist.

danke

[Ingo Turski]

Hi,

habe die einzelnen thumbs immer noch in einen th geknallt damit das auch noch vertical zentriert ist.

wozu die nutzlosen Tabellen?
Divs um die Bilder reichen völlig aus und wenn Du die Thumbs auf eine einheitliche (quadratische) Größe bringen würdest, dann bräuchtet Du noch nicht einmal divs oder float, sondern könntest sie - mit passendem margin versehen - einfach hintereinander setzen; z.B. so.

freundliche Grüße
Ingo