nicht angemeldet
Layout:Tabellen vs. Div
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 :-)
-
Hallo.
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?Eine Möglichkeit wäre, jede Zelle als eine Division zu nehmen und diese mit position:absolute aneinenader zu pappen. Grundsätzlich haben pixelgenaue Designs den Nachteil, dass sie je nach verwendeter Auflösung des Betrachters entweder zu groß oder zu klein sind, vor allem, wenn auch die Schriftgrößen fest gelegt wurden.
Zu den Bildern:
Ob du sie nun als Hintergrund oder img definierst hängt davon ab, ob du Text darüber legen willst. Wenn ja, funktioniert das nur als Hintergrundbild (oder auch wieder mit absolut übereinander positionierten divs (man kann es damit aber auch übertreiben ;o)))DIVs verstehen Prozentwerte genauso wie Pixelwerte.
Gruß
L00NIX-
Hallo Loonix,
DIVs verstehen Prozentwerte genauso wie Pixelwerte.
Meine Schwierigkeit liegt beim kombinieren dieser Werte.
Ich habe z.B. eine Tabelle mit 1 Zeile und drei Spalten.
Spalte 1 hat die Breite 100px, Spalte 2 auch die Breite 100px.
Der dritten Spalte teile ich nun über die Breiten-Angabe 100% mit, dass sie den restlichen Platz einnehmen soll.Wie würde ich soetwas mit divs machen?
Viele Grüße
Danile-
Hallo.
Wie würde ich soetwas mit divs machen?
Eins vorweg:
Es funktioniert NICHT korrekt im IE, für den muss man also irgendwie was tricksen.
Alle DIV:
position: absolute;
top: 0px;1.DIV (links):
left: 0px;
width: 100px;2.DIV (mitte):
left: 100px;
width: 100px;3.DIV (rechts, Rest):
margin-left: 200px;
left: 0px;
right: 0px;Das mit der Abstandsangabe für rechts UND links scheint den IE durcheinander zu bringen und er ignoriert sie eben völlig. Da muss man eben irgendeine Breite (100%-200px, was ja leider nicht so geht) definieren.
Gruß
L00NIX
-
-