Tabellenlayout durch CSS ersetzen

Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Tabellenlayout durch CSS ersetzen - wer schafft das?

Borlander am 03.03.2005, 16:46 / 7 Antworten / Baumansicht

Hallo CSS-Freunde (und CSS-Feinde),
ich hab da ein, zugegebenermaßen nicht ganz triviales, Problem:

Ich suche für ein Tabellenlayout (wie folgend) einen äquivalenten Ersatz, mit CSS (der natürlich ohne Tabellen auskommen soll und nicht nur in einem Browser funktioniert). Hört sich zwar einfach einfach an, ist es aber nicht wirklich ;-)

        <table><tr valign="top"><td nowrap bgcolor="#cccccc"><div class="nav">

            <a href="#">Link 1</a><br />

            <a href="#">Link 2</a><br />

        </div></td><td width="100%" bgcolor="#cccccc"><div class="content">

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

          Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

        </div></td></tr></table>

(das BGColor-Attribut dient hier nur der besseren Sichtbarkeit der Tabelle)

So schaut das ganze dann im Browser aus:

Link 1
Link 2

Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...

Schon mal vielen Dank das Ihr bis hier gelesen hab :-)

Gruß
Borlander

PS: Zaphod hat bisher auch keine Lösung...

stareagle

Borlander „Tabellenlayout durch CSS ersetzen - wer schafft das?“

03.03.2005, 21:05 Optionen

Hallo,

ich weiss zwar nicht ob es wirklich hilft, aber versuch ob es mit width:auto;float:left als im Style hilft klappt.
Ich hab letztens auch so was gebastelt, bei mir hat es damit ganz gut funktioniert...

MfG

Stareagle

Borlander

stareagle „Hallo, ich weiss zwar nicht ob es wirklich hilft, aber versuch ob es mit...“

04.03.2005, 01:54 Optionen

Hallo Stareagle,

also .nav { float:left } gehörte zu den Dingen die ich als erstes versucht hatte. Das sieht dann so aus (HTML-Code wie oben, nur ohne die Tabellen-Tags):

Wird von IE und Mozilla so dargestellt, das der Text unter dem div.nav weiterfließt (.nav { height:100%; } bring keine Abhilfe, das das gleiche dann wieder passiert wenn die Seite nicht mehr ins Browserfenster passt)...

Auf jeden Fall schon mal vielen Dank für den Versuch :-)

Gruß
Borlander

Plazebo

Borlander „Tabellenlayout durch CSS ersetzen - wer schafft das?“

04.03.2005, 14:11 Optionen

http://www.stichpunkt.de/css/bereiche.html

Borlander

Plazebo „http://www.stichpunkt.de/css/bereiche.html“

04.03.2005, 14:59 Optionen

Schaut erst mal vielversprechend aus, liefert jedoch leider keinen brauchbaren Ersatz. Die vorgestellten Methoden funktionieren nur so lange das div.nav eine feste Breite hat (was u.A. die freie Skalierbarkeit extrem einschränkt)...

Trotzdem Danke

Gruß
Borlander

stareagle

Borlander „Tabellenlayout durch CSS ersetzen - wer schafft das?“

05.03.2005, 09:09 Optionen

Hallo,

hab noch mal ein wenig getestet. Sieht so aus, dass es nur funktioniert, wenn man der linken Spalte eine feste Breite zuweist. Leider, wie du richtig geschrieben hast, kann man dann nicht frei skalieren.

Also, ihr lieben Verfechter des tabellenlosen Layouts, sagt mal wie ihr dieses Problem lösen wollt? Oder bleiben nur Tabellen übrig? Display:table wird ja leider vom IE nicht unterstützt, sonst wäre es ein interessanter Ersatz...

MfG

Stareagle

xafford

Borlander „Tabellenlayout durch CSS ersetzen - wer schafft das?“

05.03.2005, 20:52 Optionen

Hi Bor, ich hab noch einmal experimentiert. Das Layout, welches ich Dir gezeit hatte habe ich nun mit CSS hin bekommen. Ganz ohne Breitenangaben geht es definitiv nicht und kann es auch nicht gehen mit float, da der Browser sonst nicht weiß, wie er floaten soll. Alternativ geht e snur mit prozentualen Breitenangaben.

Borlander

xafford „Antwort“

07.03.2005, 22:46 Optionen

Nabend xaf,
gibt also wie bereits befürchtet keine äquivalente Lösung :-(

Gruß
bor