Thaylon: Layout-Umsetzung table -> css

SELF-Forum

Layout-Umsetzung table -> css

Thaylon
– Informationen zu den Bewertungsregeln

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>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layout-Umsetzung table -> css

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Layout-Umsetzung table -> css

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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.

    --
    Javascript ist toll (Perl auch!)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln