Design mit Tabellen

[Fellyboy]

Guten Abend zusammen

Bin momentan mit einem Redesign einer Webseite beschäftig. Die "Grundidee" steht und die ersten Vorlagen sind auch schon erstellt...

Hier findet ihr die erste Version!

Nun jedoch meine Frage:
Die Webseite hat eine fixe Breite von 900 px. Alle vier Balken (schwarz, dunkelgrau, blau und unten nochmals grau) sollen jedoch die gesamte Bildschirmbreite ausnutzen. Heisst, wenn sich jemand die Seite auf einen grossen Bildschirm anschaut sollen die erwähnten Balken das gesamte Browserfenster von links nach rechts ausfüllen. Die Tabelle muss somit eine Breite von 100% haben. Wie kann ich das mit der bereits vorhandenen Tabellen etc. verbinden?

Was ich bis jetzt versucht habe ich folgendes: eine Tabelle mit 100% Breite. Darin wiederum eine Tabelle mit 2 Spalten und einer Zeile. Habe in der ersten Spalte eine fixe Breite von 900 vergeben und danach in diese Zelle mein bisherigen Code eingefügt. Leider klappt dies nicht... oder ich habs falsch gemacht

Hab ihr mir einen Vorschlag oder Tipps? Besten Dank!

Gruss
Markus

[Joxa]

Also hast du es so versucht ?

<table border="1" width="100%">
<tr>
<td width="900" bgcolor="#0033FF"> &nbsp;</td>
<td bgcolor="#0099CC"> &nbsp;</td>
</tr>
<tr>
<td width="900" bgcolor="#0033FF"> &nbsp;</td>
<td bgcolor="#0099CC"> &nbsp;</td>
</tr>
<tr>
<td width="900" bgcolor="#0033FF"> &nbsp;</td>
<td bgcolor="#0099CC"> &nbsp;</td>
</tr>
<tr>
<td width="900"> Hier kommt der Inhalt</td>
<td> &nbsp;</td>
</tr>
</table>

[Fellyboy]

Nicht ganz! Der Inhalt sollte - analog deinem Beispiel - über sich über alle Zeilen hinweg erstrecken. Der erste Navigationsbalken (schwarzer Hintergrund) muss in der ersten Spalte / ersten Zeile sein, die zweite Navigation (dunkelgrauer Hintergrund) muss in der ersten Spalte / zweiten Zeile plaziert sein, etc.

Also in etwa so:

<table border="1" width="100%">
<tr>
<td width="900" bgcolor="#0033FF">Inhalt Navi 1</td>
<td bgcolor="#0099CC"> &nbsp;</td>
</tr>
<tr>
<td width="900" bgcolor="#0033FF">Inhalt Navi 2</td>
<td bgcolor="#0099CC"> &nbsp;</td>
</tr>
<tr>
<td width="900" bgcolor="#0033FF">Inhalt Home</td>
<td bgcolor="#0099CC"> &nbsp;</td>
</tr>
<tr>
<td width="900">Inhalt Bottombar</td>
<td> &nbsp;</td>
</tr>
</table>

Funktioniert aber leider nicht ;-(

[Fellyboy]

Habs nun endlich hingekriegt... leider nicht ganz! Habe zwischen der einen und der anderen Tabelle einen Unterschied von einem Pixel (-> siehe Anhang).

Finde den Fehler einfach nicht! Schaue mir den Code nun schon seit über einer Stunde an...

[TheEkki]

Hallo. Ich habe mich im Forum erst heute dafür bedankt, dass ich mir CSS beigebracht habe. Inzwischen kann ich diese Technik für das Layouten nur empfehlen!

[Elea]

ein design mit "blinden"/layout-tabellen geht im prinzip einfacher als... alles andere

aber es ist letztendlich eine veraltete technik... es entspricht nicht den vorschriften der barrierefreiheit (ok, barrierefreiheit ist derzeit NUR gesetzlich pflicht fuer behoerden, aber ich kann mir gut vorstellen dass in den naechsten jahren auch fuer banken, versicherungen, online shops etc. pflicht wird)