Layout-Umsetzung table -> css

[Thaylon]

Hallo,

ich komme bei meinen versuchen einfach nicht weiter. Vielleicht kann mir jemand helfen wie man dieses layout korrekt in css umsetzt. Danke.

<table height=100% width=100%>
<tr><td colspan=2 bgcolor=gray>
titel<br>
titel2
</td></tr>
<tr height=100%;><td width=150px bgcolor=yellow>
links
</td><td bgcolor=red>
<div style="width:100%;height:100%;background:purple;overflow:scroll;">rechts scrollbar
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</td></tr>
<tr><td colspan=2 bgcolor=gray>
unten<br>
unten2<br>
unten3
</td></tr>
</table>

[wahsaga]

hi,

Vielleicht kann mir jemand helfen wie man dieses layout korrekt in css umsetzt.

Zuerst mal zeichnest du die Inhalte in HTML korrekt aus.

<table height=100% width=100%>
<tr><td colspan=2 bgcolor=gray>
titel<br>
titel2
</td></tr>

Hier haben wir also wohl zwei Überschriften - nutze h1 bis h6.

<tr height=100%;><td width=150px bgcolor=yellow>
links
</td><td bgcolor=red>
<div style="width:100%;height:100%;background:purple;overflow:scroll;">rechts scrollbar
[...]
</div>
</td></tr>

Hier sollen zwei Bereiche nebeneinander zu stehen kommen - also solltest du wohl einen davon floaten lassen.

Bei den Höhenangaben wäre erst mal zu klären, auf was sie sich beziehen sollen.

<tr><td colspan=2 bgcolor=gray>
unten<br>
unten2<br>
unten3

Das könnte ein einfacher Textabsatz P sein (oder mehrere).

Weitere Infos findest du hier:
SELFHTML: Einführung in CSS-basierte Layouts
SELFHTML: Mehrspaltige CSS-basierte Layouts
SELFHTML Weblog: Grundlagen für Spaltenlayout mit CSS

gruß,
wahsaga

[Struppi]

ich komme bei meinen versuchen einfach nicht weiter. Vielleicht kann mir jemand helfen wie man dieses layout korrekt in css umsetzt. Danke.

Ein Grundproblem ist: Es gibt keine Spalten in CSS - es gibt Möglichkeiten diese zu simulieren, besser wäre es aber dein Layout auf die Möglichkeiten die dir CSS bietet auszurichten und nicht auf die Möglichkeiten die dir Tabellen bieten.

<tr><td colspan=2 bgcolor=gray>
titel<br>
titel2
</td></tr>

Diese Reihe kannst du einfach ersetzen:

<h2> Titel2 </h2>

und das CSS:
h2
{
background-color: gray;
}

<tr height=100%;><td width=150px bgcolor=yellow>
links
</td><td bgcolor=red>

Da fängt es an, es gibt keine voneinander abhängige Spalten, wie in einer Tabelle. Es gibt diverse Möglichkeiten (soweit ich weiß sind auch hier im selfhtml CSS Kapitel Vorschläge), aber wie gesagt, besser ist es nicht in Spalten zu Layouten/denken, sondern in Kästchen (Boxen).

Dann ist es einfach zwei Bereiche nebeneinander zu legen, das geht mittles float

Struppi.