Von Tabellen zu divs mit css

Webler

Hi ihr!

Ich möchte gerne meine Web-Seite vom Tabellen-Design befreien und auf divs mit css umstellen.

Ich habe dafür 2 Test-Seiten gemacht, eine mit Tabellen, wie es aussehen soll und eine mit divs und css. Leider bekomme ich die Umstellung nicht so recht hin und bräuchte da etwas professionelle Hilfe.

Hier die Datei mit Tabellen, wie es richtig aussehen soll:

<html>
 <head>
  <title>test: table 2 div</title>
  <style type="text/css">
td
{
    vertical-align: top;
}

td.left
{
    background-color: #FF0000;
    width: 160px;
    padding: 10px;
}

td.middle
{
    background-color: #0000FF;
}

td.right
{
    background-color: #00FF00;
    width: 250px;
    padding: 20px;
}
  </style>
 </head>
 <body>
<!-- test beginn: 1 -->
  ein text ganz oben
  <table>
   <tr>
    <td class="left">
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
    </td>

    <td class="middle">
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
    </td>

    <td class="right">
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
    </td>
   </tr>
  </table>
  ein text ganz unten
<!-- test ende  : 1 -->
  <br />
  <br />

<!-- test beginn: 2 -->
  ein text ganz oben
  <table>
   <tr>
    <td class="left">
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
    </td>

    <td class="middle">
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
     test-text test-text test-text test-text test-text test-text test-text test-text test-text
    </td>
   </tr>
  </table>
  ein text ganz unten
<!-- test ende  : 2 -->
 </body>
</html>

So wie ich bisher es gemacht habe, aber es kaum ähnlichkeit mit dem Orginal im Browser hat.

<html>
 <head>
  <title>test: table 2 div</title>
  <style type="text/css">
.container
{
    width: 100%;
}

.left
{
    background-color: #FF0000;
    width: 160px;
    padding: 10px;

    float: left;
}

.middle
{
    background-color: #0000FF;
}

.right
{
    background-color: #00FF00;
    width: 250px;
    padding: 20px;

    float: right;
}

.clear
{
    clear: both;
}
  </style>
 </head>
 <body>
<!-- test beginn: 1 -->
  ein text ganz oben
  <div class="container">
   <div class="left">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>

   <div class="middle">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>

   <div class="right">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>
  </div>
  ein text ganz unten
<!-- test ende  : 1 -->
  <br class="clear" />
  <br />

<!-- test beginn: 2 -->
  ein text ganz oben
  <div class="container">
   <div class="left">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>

   <div class="middle">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>
  </div>
  ein text ganz unten
<!-- test ende  : 2 -->
 </body>
</html>

Kann mir dabei jemand helfen?

Viele Grüße,
euer Webler

Dasd

Soweit ich das auf die Schnelle überblicken kann, fehlt dem middle-div noch der margin links und rechts.

Sehr schön wird das ganze u.a. hier beschrieben:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm

Scheppertreiber

Erst die floatenden div's aufführen, dann middle.

Webler

@ Dasd
Danke! Ich habe middle auch mit float:left gemacht, sieht schon besser aus. aber hat noch immer nicht die selben "effekte" wie table

@ Scheppertreiber
bin leider nicht so der css-experte, was meinst du? verstehe deine aussage nicht so recht.

drum brauch ich etwas ordentlich hilfe, damit ich die selben "effekte" wie ne tabelle habe. also auch beim vergrößern/verkleinern usw.

Dasd

Relative Angaben (also z.B. in Prozent) für die Größen der beiden äußeren divs sowie für den margin des inneren machen.

Zudem sollte middle keinen float haben, sondern wie gesagt den margin.

Webler

@Dasd
das ist ja doof. das ich middle als margin-left das width von left geben muss

Scheppertreiber

Gib den div's eine boarder, dann kannst Du genau sehen wie sich das verhält.
Grundsätzlich: alles was gefloatet wird muß eine width haben (zB width:20%;).
Zuerst werden div's notiert die floaten, dann der Rest. Danach ein clear.

Der Rand für die mittlere div dient dazu, das wie 3 Spalten aussehen zu lassen,
ansonsten fließt der Inhalt um die ersten beiden herum.

Webler

Ich muss gestehen ich bekomm es nicht auf die Reihe. Drum werde ich, denke ich, weiterhin auch bei Tabellen bleiben, da der Aufwand/Nutzen in keinem Verhältnis steht und auf jedem Browser es irgendwie anders dargestellt wird und man dies nur durch noch schlechtere work-arounds meistern kann, als Tabellen es sind.

Scheppertreiber

Nein Webler,

ich bin da auch durch. Dauert halt ein wenig. Meine Seiten sind durch CSS-Layout
auf im Schnitt 30 % der ursprünglichen Größe zusammengeschnurrt.

Weniger Traffix, moderneres flexibles Layout, einfachere Wartung.

Bleib mal dabei.

Webler

Maybe. Mag schon sein das sich 30% summieren usw. Jedoch seh ich nicht ein für jeden Browser einen eigenen Work-Around zu machen und rumzufrickeln bis zum geht nicht mehr, wenn ich mein 3 Spalten-Layout in einer einzigen Tabelle haben kann.

Das rentiert sich für mich bisher gar nicht und für das Beispiel was ich oben gemacht habe, sind keine 30% weniger für divs sondern ein paar Prozent mehr.

Apropos flexibel sehe ich auch in einem 3 Spalten-Layout nichts: Wenn ich das Browser-fenster verkleinere springen die einzelnen divs in eine andere Zeile und bei einer Tabelle wird das auf jedem (!!) Browser den ich kenne richtig gehandhabt, das die Zelle verkleinert wird.

Momentan seh ich wirklich nicht den Aufwand/Nutzen, weder in sachen "moderneres flexibleres" Design, "einfachere" Wartung und Traffic. Eher das krasse Gegenteil mit zusätzlicher Frickelarbeit.

Also wenn du obriges Beispiel hinbekommst, das es wie das "orginal" Funktioniert, wäre das super, damit ich mal sehen kann wie es richtig gemacht wird. Ich bekomm es um ehrlich und direkt zu sein, nicht hin.

Scheppertreiber

Das geht mit 3 div nebeneindar mit weniger Code wie mit Tabellen und ist die
saubere Lösung. Bei Tabellen zu bleiben ist Denkfaulheit.

Beiß Dich da mal durch, es lohnt sich wirklich.

richtig (und sinnvoll gemacht) geht das mit ALLEN Browsern. Ächt

Webler

Lohn sieht für mich anders aus.

Ich habe es mal so gemacht, wie ihr gesagt habt, ob es jetzt "richtig" und "sinnvoll" gemacht ist, weiß ich nicht:

<html>
 <head>
  <title>test: table 2 div</title>
  <style type="text/css">
.container
{
    width: 100%;
}

.left
{
    background-color: #FF0000;
    width: 160px;
    padding: 10px;

    float: left;
}

.middle
{
    background-color: #0000FF;
    margin-left:160px;
}

.right
{
    background-color: #00FF00;
    width: 250px;
    padding: 20px;

    float: right;
}

.clear
{
    clear: both;
}
  </style>
 </head>
 <body>
<!-- test beginn: 1 -->
  ein text ganz oben
  <div class="container">
   <div class="left">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>

   <div class="right">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>

   <div class="middle">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>
  </div>
  ein text ganz unten
<!-- test ende  : 1 -->
  <br class="clear" />
  <br />

<!-- test beginn: 2 -->
  ein text ganz oben
  <div class="container">
   <div class="left">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>

   <div class="middle">
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
    test-text test-text test-text test-text test-text test-text test-text test-text test-text
   </div>
  </div>
  ein text ganz unten
<!-- test ende  : 2 -->
 </body>
</html>

Probleme:
1. Die Zellen sind nicht so tief wie sie sein sollten. Ist eine Zelle tiefer als die andere, wird die andere nicht auf die Tiefe der Zelle "mitgezogen"

2. Ist die blaue Zelle zu groß, schreibt diese sich unter die grüne Zelle

3. Der Text "ein text ganz unten" ist beim 2. Beispiel in einen Browser-Fenster das was breiter ist unter der blauen Zelle und rechts NEBEN der roten Zelle. (im Oberen ist der Text auf der Höhe der grünen Zelle)

4. Dann Fehlt mir der Zellabstand.

5. Im IE sind die Positionen "richtiger" als im Firefox, im Chrome sieht das spiel wieder anders aus.

Scheppertreiber

Löse Dich mal innerlich von "Es muß so aussehen wie eine Tabelle".

Das float macht genau das was es soll. Es läßt die div middle um die vorher
gefloateten divs herumlaufen. Mach mal die div middle größer, dann kannst Du
das schön beobachten.

Webler

Ich brauche es aber, weil ich einen Border von 1px drum legen will und ich möchte sicherlich nicht das irgendein Inhalt um einen abgegrenzten Bereich "rumfloaten" soll. Darum sollen alle Zellen die selbe höhe haben, ausgehend von dem benötigten Platz des Inhalts der Zellen.

Das middle soll keine Größe haben, sondern sich den Platz nehmen der ihm zur Verfügung steht.

Scheppertreiber

dann gib dem Container die border.

zwutz

divs passen sich von der Hoehe her immer dem Inhalt an. Entwickelt man sein Layout mit dieser Erkenntnis im Hinterkopf kann man sich viel Arbeit und Aerger ersparen...

ansonsten: YAML zeigt, wie es richtig geht (das dort vorgestellte Buch ist auch einen Blick wert)

und wenn man sich CSS Zen Garden ansieht, dann merkt man erst, wie schrecklich haesslich und unflexibel Tabellenlayouts sind...

Den Fehler, den viele machen, wenn sie von Tabellen auf divs umsteigen ist, dass sie weiterhin das Verhalten von Tabellen erwarten und die Tabelle 1:1 in CSS umsetzen wollen (was oft in einer div-Suppe, also dem uebermaessigen und grossteils sinnlosen Gebrauch von <div></div> endet).

Webler

@ Scheppertreiber
JEDE Zelle soll einen Border haben, nicht das gesamte!

Webler

@ zwutz
Na ja, Geld für ein Buch gebe ich jetzt nicht aus und bei diesem CSS Zen Garden hab ich mal die Designs durchgeklickt. Alle fixe Größe und nichts dabei was ich für meine Bedürfnisse benötige.

Mein Design soll so wie im Beispiel 1 (MIT Tabellen) aussehen und das selbe Verhalten haben, da ich es benötige. Und ich möchte keine Linien mit einem Hintergrundbild ziehen, diesen Fusch fang ich erst gar nicht an.

Dasd

Auch noch wichtig, da ich bei dir nirgendwo eine Doctype-Deklaration sehe:
http://de.selfhtml.org/css/formate/box_modell.htm#w3c

Scheppertreiber

Webler schrieb:

diesen Fusch fang ich erst gar nicht an.

Mit dieser Einstellung wirst Du nicht weit kommen.
Warum hast Du eigentlich gerfragt wenn Du's ja eh besser weist ?