nicht angemeldet
Layouttabelle bei dieser konkreten Seite umwandeln?
Hallo!
Habe mir mal die Beiträge zum Thema 'Layouttabelle zugunsten "reinem" CSS wegfallen lassen' durchgelesen. Wenn ich ehrlich bin, weiß ich aber in meinem konkreten Fall trotzdem nicht, ob das sinnvoll wäre. Die Layouttabelle ist sehr einfach, die Struktur seht Ihr oben in dem angegeben Code.
Was meint Ihr: Bekomme ich das einfach hin, auf die Tabelle zu verzichten, so dass das Ganze halbwegs ähnlich aussieht? (Wenn ja, würde ich mich über kleine Tipps freuen.)
Schon mal vielen Dank.
<html> <head>
<style type="text/css"> <!-- /*
|-----|---------|---------|-----| | 1 | 2 | 3 | 4 | |-----|---------|---------|-----| | | | | | 5 | | 7 | | | | | |-----| |-----| | 8 | 6 | 9 | |-----| |-----| | | | | | 10 | | 11 | | | | | |-----|---------|---------|-----| | 12 | 13 | 14 | 15 | |-----|---------|---------|-----|
*/ -->
body { background-color:#ffffff; color:#000000; }
.layoutTable { border:none; margin-top:2%; margin-left:2%; width:95%; }
.eins { width:140px; border-right-width:2px; border-right-color:#ff0000; border-right-style:solid; border-bottom-width:2px; border-bottom-color:#ff0000; border-bottom-style:solid; }
.zwei { font-size:135%; font-weight:bold; padding:15px; text-align:center; vertical-align:middle; border-bottom-width:2px; border-bottom-color:#ff0000; border-bottom-style:solid; }
.drei { border-bottom-width:2px; border-bottom-color:#ff0000; border-bottom-style:solid; }
.vier { width:140px; }
.fuenf { vertical-align:top; padding-top:8px; border-right-width:2px; border-right-color:#ff0000; border-right-style:solid; }
.sechs { text-align:justify; vertical-align:top; padding:30px; }
.sieben { padding-top:8px; padding-bottom:8px; }
.acht { border-right-width:2px; border-right-color:#ff0000; border-right-style:solid; }
.neun { border-left-width:2px; border-left-color:#ff0000; border-left-style:solid; }
.zehn { }
.elf{ border-left-width:2px; border-left-color:#ff0000; border-left-style:solid; }
.zwoelf { }
.dreizehn { border-top-width:2px; border-top-color:#ff0000; border-top-style:solid; }
.vierzehn{ padding:15px; border-top-width:2px; border-top-color:#ff0000; border-top-style:solid; }
.fuenfzehn{ border-left-width:2px; border-left-color:#ff0000; border-left-style:solid; border-top-width:2px; border-top-color:#ff0000; border-top-style:solid; }
</style>
<title>Titel</title> </head>
<body>
<table cellpadding="0" cellspacing="0" class="layoutTable"> <tbody> <tr> <td class="eins"> </td> <td class="zwei">Überschrift</td> <td class="drei"> </td> <td class="vier"> </td> </tr> <tr> <td class="fuenf"> <div><a href="xy.html">Ein Link</a></div> <div><a href="xy.html">Noch ein Link</a></div> <div><a href="xy.html">Link-Link-Link-Link</a></div> </td> <td rowspan="3" colspan="2" class="sechs">
asdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asd asdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asd
</td> <td class="sieben"> </td> </tr> <tr> <td class="acht"> </td> <td class="neun"> </td> </tr> <tr> <td class="zehn"> </td> <td class="elf"> </td> </tr> <tr> <td class="zwoelf"> </td> <td class="dreizehn"> </td> <td class="vierzehn">bla blabla blabla blabla bla</td> <td class="fuenfzehn"> </td> </tr> </tbody> </table> </body> </html>
-
Hallo,
|-----|---------|---------|-----|
| 1 | 2 | 3 | 4 |
|-----|---------|---------|-----|
| | | |
| 5 | | 7 |
| | | |
|-----| |-----|
| 8 | 6 | 9 |
|-----| |-----|
| | | |
| 10 | | 11 |
| | | |
|-----|---------|---------|-----|
| 12 | 13 | 14 | 15 |
|-----|---------|---------|-----|das ist offenbar zunächst eine tabellarische Struktur die mit einer Tabelle bestmöglichst umgesetzt wird.
Eine Darstellung per CSS wird sich irgendwie machen lassen, aber ohne Prioritäten bei deiner Angabe "halbwegs ähnlich" gibt es wohl eher zu viele als zu wenig Ansätze, und bei relativen Schriftgrössen usw. dürfte die Tabelle hier nochmals Vorteile haben (anders mag es bei einem statischen Layout für 800x600 sein).Um das als CSS-Layout besser abschätzen zu können ist vielleicht mehr Inhalt beim Beispiel nötig, wie wichtig ist die Beziehung von 8 zu 9 (gleiche Höhe, Mitte)?
Ist die Mittelachse wichtig usw., dein Beispielcode scheint jedenfalls eher CSS-geeignet als deine schematische Darstellung.Hast du schon entspr. Versuche mit tableless layout gemacht, was hat da nicht geklappt?
Grüsse
Cyx23