Vorhandenes Tabellenlayout in DIV umsetzen (float + clear)

[Tanja78]

Hallo,

ich habe jetzt schon viel rumprobiert, aber irgendwie
komm ich mit float und clear nicht ganz klar :-(

Ursprüngliches Layout in Grobform:

<table>

<tr>
<td width=500 colspan=5>Logo</td>
</tr>

<tr>
<td width=10 bgcolor=black>RAND</td>
<td width=100 bgcolor=blue>NAVI</td>
<td width=280>CONTENT</td>
<td width=100 bgcolor=blue>NAVI</td>
<td width=10 bgcolor=black>RAND</td>
</tr>

<tr>
<td width=10 bgcolor=black>RAND</td>
<td colspan=3 width=480 bgcolor=blue>FOOTER</td>
<td width=10 bgcolor=black>RAND</td>
</tr>

</table>

Mein Versuch mit DIVs:

<div style=position:relative;width:500px>Logo</div>

<div style=position:relative;width:10px;clear:left>RAND</div>
<div style=position:relative;width:100px;float:left>NAVI</div>
<div style=position:relative;width:280px;float:left>CONTENT</div>
<div style=position:relative;width:100px;float:left>NAVI</div>
<div style=position:relative;width:10px;float:left>RAND</div>

<div style=position:relative;width:10px;clear:left>RAND</div>
<div style=position:relative;width:480px;float:left>FOOTER</div>
<div style=position:relative;width:10px;float:left>RAND</div>

Total zerschossen würde ich mal sagen ;)

[Struppi]

Ursprüngliches Layout in Grobform:

<table>

<tr>
<td width=500 colspan=5>Logo</td>
</tr>

<tr>
<td width=10 bgcolor=black>RAND</td>
<td width=100 bgcolor=blue>NAVI</td>
<td width=280>CONTENT</td>
<td width=100 bgcolor=blue>NAVI</td>
<td width=10 bgcolor=black>RAND</td>
</tr>

<tr>
<td width=10 bgcolor=black>RAND</td>
<td colspan=3 width=480 bgcolor=blue>FOOTER</td>
<td width=10 bgcolor=black>RAND</td>
</tr>

</table>

Kann es sein, dass RAND ein Rand ist, das läßt sich ganz einfach mit margin oder padding umsetzen. Dann bleiben drei Spalten übrig.
Das findest du hier http://de.selfhtml.org/css/layouts/mehrspaltige.htm

Struppi.

[Tanja78]

Kann es sein, dass RAND ein Rand ist, das läßt sich ganz einfach mit margin oder padding umsetzen. Dann bleiben drei Spalten übrig.

Nein ist ein spezieller Rand mit Hintergrundbild,
will ich deswegen lieber extra haben...

[Struppi]

Kann es sein, dass RAND ein Rand ist, das läßt sich ganz einfach mit margin oder padding umsetzen. Dann bleiben drei Spalten übrig.

Nein ist ein spezieller Rand mit Hintergrundbild,
will ich deswegen lieber extra haben...

Dann hast du eine Tabellenlayout. Mit CSS sind Spalten nur schwer umzusetzen. Du musst mit ineinander verschachtelten Container rumtricksen um mit ein bisschen Glück etwas zu erreichen, was wie eine Tabelle aussieht. Also warum nicht gleich eine Tabelle? Oder besser ein CSS Layout, dass die Möglichkeiten die CSS bietet nutzt.

Struppi.

[Tanja78]

Ich wollte halt alle mit DIV-Containern machen,
weil das weniger Bytes verbraucht...

Weil der Rest im Content ist schon mit CSS und DIV gemacht,
nur die Tabelle darum ist noch "alt"...

Aber wenn das so kompliziert ist, lass ich das lieber.

Dachte halt nur, dass dies einfach mit DIV und float geht :-(

[Struppi]

Ich wollte halt alle mit DIV-Containern machen,
weil das weniger Bytes verbraucht...

In deinem Falle kaum. Fünf Spalten, die alle gleich hoch sein sollen, geht wenn überhaupt nur aufwenig und sicher mit mehr Code als mit einer Tabelle.

Aber wenn das so kompliziert ist, lass ich das lieber.

Dachte halt nur, dass dies einfach mit DIV und float geht :-(

Es gibt eben einen Unterschied zwischen einem Tabellenlayout und einem CSS Layout.

Struppi.