tabelleninhalt proportional zu Browserfenster

[nilje]

hallo liebe Leute,
ich hoffe, ihr seid meine Rettung.
besuche seit 2 Monaten einen Crashkurs in Webdesign (XHTML...CSS) und muss nun eine Homepage als Abschlussprojekt basteln.
Haut auch alles wunderbar hin, aber ich hock seit gestern 11Uhr an einer Sache die mir echt den letzten Nerv raubt...

Es soll eine Gallerie werden, in der die Bilder (höchstens 1024x768px) nebeneinander angezeigt werden, also mit horizontalem Scrollbalken.
Es war erstmal ein Act die Bilder nebeneinander zu bekommen, darum habe ich sie in eine Tabelle, bzw jeweils in eine <td></td> gesetzt.
Nun sind die Bilder aber immer in der Originalgröße und müssen nicht nur horizontal, sondern auch vertikal gescrollt werden.

Habt ihr eine Lösung, wie ich die Tabelle bzw den Inhalt proportional zum Browserfenster angezeigt bekomm?
wenns nicht geht, muss ich wohl oder übel eine feste Pixelgröße vergeben, möchte aber gern für größere Monitore das beste ausschöpfen und somit bis zu 1024x768px anzeigen können...

so sieht es bis jetzt aus:
<div id="wrapper">
<div class="scroll-pane" id="postproduction">
<table>
<tr>

<td><img src="postproduction_bilder/03a.jpg" alt="postproduction_03" name="postproductin_03" width="512" height="768" border="0" /></td>
<td><img src="postproduction_bilder/05a.jpg" alt="postproduction_05" name="postproductin_05" width="512" height="768" border="0" /></td>
<td><img src="postproduction_bilder/07a.jpg" alt="postproduction_07" name="postproductin_07" width="512" height="768" border="0" /></td>
<td><img src="postproduction_bilder/08a.jpg" alt="postproduction_08" name="postproductin_08" width="512" height="768" border="0" /></td>
....usw​

</tr>
</table>
</div>
</div>

css:
* {
margin: 0px;
padding: 0px;

#wrapper {
position:relative;
top:-50%;
left:-50%;
z-index: 1;
height: 200%;
width: 200%;
}

#wrapper #postproduction {
height: 70%;
position: fixed;
left: 20px;
top: 110px;
right: 20px;
bottom: 60px;
overflow-y: hidden;
}

#wrapper #postproduction img {
height: 100%;
width: auto;
}




(javascript.. schätz unrelevant)
.scroll-pane {
overflow: auto;
}

 

[threadi]

Ideal wäre es gewesen, wenn Du keine Tabelle sondern eine Liste verwendet hättest. Jetzt hast Du ggfs. das Problem, das einige Browser Tabellenzellen anders anzeigen als gewünscht.

So oder so müsstest Du dein CSS anpassen. Ergänze für html und body jeweils "height: 100%;". Dann musst Du von body bis zum Bild alle Elemente mit "height: 100%;" versehen. Also in deinem Fall:

html, body, table, tr, td, img { height: 100%; }

Ich bin mir nur unsicher wie das mit deiner relativen Positionierung der Tabelle zusammenarbeitet.

Und entferne im HTML-Code die Attribute für Höhe und Breite aus dem img-Element.

Moderation: Verschoben von HTML zu CSS, da es eindeutig um Gestaltung geht.

 

[nilje]

vielen lieben Dank für die schnelle Antwort!
ich habs jetzt mit einem javascript code gebastelt.. aber leider hab ichs auch so nicht hinbekommen, dass die div und somit die Bilder sich dem Browserfenster anpassen... echt schade, aber nach 3 Tagen mit diesem Thema hats irgendwann gereicht
die Liste hab ich auch ausprobiert, aber dann warn die Bilder wieder untereinander, statt nebeneinander, trotz inline.. hab eigentlich alle display-Eigenschaften versucht...
vielleicht hätt ers kapiert, wenn ich die Bilder in der Entwurfsansicht reingeladen hätt? Wär irgendwie unlogisch, aber Dreamweaver scheint generell nicht so das logischste zu sein :)
na jedenfalls, wollt ich mich noch bedanken :)

liebe Grüße,
Daniela