nicht angemeldet
Hallo,
bei der Gestaltung einer neuen Homepage bin ich auf folgende Problematik gestossen:
Für das Layout habe ich einige Grafiken die (pixelgenau) positioniert werden müssen und dann den Rahmen / das Gerüst der Seite ergeben.
Dieses Gerüst soll bei unterschiedlichen Auflösungen die gesamte Bildschirmbreite und ggf. auch -Höhe einnehmen.
Dieses Grüst wollte ich durch eine (blinde) Tabelle erzeugen (s.u.).
Dabei habe ich allerdings einige Probleme, z.B. kommen immer wieder Lücken zwischen den Grafiken zum Vorschein.
Dazu habe ich u.a. den folgenden Artikel gefunden
http://www.dodabo.de/html+css/img-table/.
Ist es sinnvoller die Grafiken als Hintergrund-Grafik der einzelnen Tabellen-Zellen einzubinden oder als img-Objekt?
Weiterhin habe ich beim Suchen nach Lösungen zu diesem Problem immer wieder Hinweise gefunden, dass "table" für solche Zwecke nicht das optimale Mittel wären. Stattdessen könnte man besser "div" und "span" einsetzten!
Wie würde ich eine solche Tabelle mit "div" erzeugen?
Konkreter gefragt: Wie kann ich absolute und prozentuale Angaben bei div kombinieren, so dass ich bestimmte "Stretch"-Bereiche definieren kann, die sich ausdehnen, um den Bildschirm komplett zu füllen?
Die beschriebene Tabelle sieht z.Z. wie folgt aus (ohne Grafiken):
<table border="1" style="height:100%">
<tr>
<td rowspan="2" style="width:150px; height:100px;">Oben links</td>
<td style="width:625px; height:61px;">Schriftzug</td>
<td rowspan="2" style="width:100%; height:100px;">stretch</td>
<td rowspan="2" style="width:109px; height:100px;">button-abschluss</td>
<td rowspan="2" style="width:15px; height:100px;">r.</td>
</tr>
<tr>
<td style="width:625px; height:39px">Button-Leiste</td>
</tr>
<tr>
<td style="width:150px; height:509px;">Buttons-Links</td>
<td colspan="3" rowspan="2" style="width:100%; height:100%;"><p>Content</p></td>
<td style="width:15px; height:509px;">r.</td>
</tr>
<tr>
<td style="width:150px; height:100%;">stretch</td>
<td style="width:15px; height:100%;">st.</td>
</tr>
<tr>
<td style="width:150px; height:28;">rlu</td>
<td colspan="3" style="width:100%; height:28px;">Rand unten</td>
<td style="width:15px;height:28px;">rru</td>
</tr>
</table>
Kennt ihr weitere Links und Beispiele, die sich "Layout-Tabellen" beschäftigen?
Vielen Dank für eure Hilfe im Voraus
Daniel Niklas :-)