Tabelle vs CSS

R3WARD

Hallo,

da hier einige CSS-Experten jede Verwendung einer Tabelle als Layout als "Totsünde" bezeichnen möchte ich nun mal sehen wer es schafft dieses Tabellenlayout mit CSS und DIVS umzusetzen.
Wichtig dabei ist das die Höhe aller 3 Spalten immer gleich und abhängig vom Inhalt ist.

Jetzt bin ich mal gespannt wer dies schafft.

HTML

<table style="text-align: left; width: 100%;" border="0"
 cellpadding="10" cellspacing="0">
  <tbody>
    <tr>
      <td style="background-color: rgb(51, 51, 51);" colspan="3" rowspan="1"><br>LOGO<br>
      </td>
    </tr>
    <tr>
      <td style="width: 100px; vertical-align: top; background-color: rgb(204, 204, 204);">
        Text1<br>
        Sonstiges<br>
        Überschallgeschwindigkeitsflugzeug</td>
      <td style="height: 400px; background-color: rgb(102, 255, 153); vertical-align: top;">
             Dies ist ein TEST</td>
      <td style="width: 80px; background-color: rgb(204, 204, 204); vertical-align: top;">
      Text1<br>
      Text2<br>
      Text3</td>
    </tr>
  </tbody>
</table>

Alles anzeigen

Unregistriert

etwas XHTML und Css würde dir auch nicht schaden, das was du möchstet ist sooooo easy. Wenn du divs und css kannst dann kannst du nach dieser anleitung arbeiten :p

http://ohne-css.gehts-gar.net/0005.php

lg Shila

koslowski

Moin,

Tabellenlayout ist von vorvorgestern,
die Diskussion darüber von vorgestern und
die "Wer schafft es dieses Tabellenlayout in CSS umzusetzen ?"-Spielchen von gestern.

Setz dich halt einfach auf den Hosenboden und lerne CSS.

sejuma

Eine Website mit Divs zu machen ist genauso falsch wie mit Tabellen. Deshalb soll man Tabellen auch nicht mit Divs ersetzen.

Vielmehr kommt es darauf an, eine Seite möglichst semantisch korrekt aufzubauen. Hierzu bietet HTML für fast jeden Zweck spezielle Elemente an, die man sinngerecht einsetzen sollte, siehe HTML-Elementreferenz.

Eines dieser vielen Elemente sind Tabellen. Sie dienen der strukturierten Darstellung tabellarischen Inhalts, also z.B. eine Adressliste, ein Terminkalender o.ä.

Ein weiteres Element ist der Div (division). Er dient dazu, größere Bereiche zu gruppieren und darzustellen.

CSS wiederum dient der Formatierung und Positionierung aller Elemente.

Wenn du dir dieser Logik bewusst wirst, dann wirst du auch verstehen, weshalb man eine Seite weder mit Tabellen, noch mit Divs macht.

Und was dein Spaltenlängenproblem betrifft: Zugegeben, da gibt es keine Standardlösung. Man kann sich aber mit Faux Columns behelfen.

R3WARD

Zitat von Unregistriert

etwas XHTML und Css würde dir auch nicht schaden, das was du möchstet ist sooooo easy. Wenn du divs und css kannst dann kannst du nach dieser anleitung arbeiten :p

Also ich habe mich natürlich vorher informiert ab zu meinen Problem konnten auch Personen die komplett auf DIVS schwören mir keine Antwort liefern.

Klar ist es einfach mit Faux Columns schön paar Spalten zu erstellen aber ich habe keine Lösung gefunden das die Spalten zwar fest aber auch dynamisch bleiben.
D. h. ist in einer Spalte der Inhalt zu breit dann soll die Spalte verbreitert werden ohne das sich der Rest vom Design verhaut. (siehe HTML-Tabellen Layout oben, da funktioniert dies)

Zitat von koslowski

die "Wer schafft es dieses Tabellenlayout in CSS umzusetzen ?"-Spielchen von gestern.

Tja bisher konnten mir auch Spezialisten keine richtige Lösung auf das Problem geben, deswegen bin ich einfach mal gespannt ob jemand eine Lösung hat.

Zitat von sejuma

Und was dein Spaltenlängenproblem betrifft: Zugegeben, da gibt es keine Standardlösung. Man kann sich aber mit Faux Columns behelfen.

Faux Columns ist mir bekannt nur setze ich es eben nicht ein da mir keine eine Lösung auf das Problem nennen kann (siehe oben)

sejuma

Du hast in deinem Tabellencode drei Zellen nebeneinander:
Zei mit fixen Breiten von 100px und 80px und mittendrin eine ohne Breitenangabe.
Genauso funktioniert das mit drei nebeneinander angeordneten Divs auch.

Ich hab's nicht ausprobiert und habe momentan dazu leider auch keine Zeit. Aber generell sollte das was die gleiche Spaltenlänge betrifft ähnlich wie hier funktionieren:
http://www.ohne-css.gehts-gar.net/0031.php

Unregistriert

eben höre mal drauf was sejuma schreibt...... ansonsten lässt es aber wie sejuma schon sagte...

Texasmutscha

Zitat von koslowski

Moin,

Tabellenlayout ist von vorvorgestern,
die Diskussion darüber von vorgestern und
die "Wer schafft es dieses Tabellenlayout in CSS umzusetzen ?"-Spielchen von gestern.

Setz dich halt einfach auf den Hosenboden und lerne CSS.

Alles anzeigen

Ich habe letztes Jahr angefangen, würde es sicher hinbekommen

Du bist in dem Bereich schon viel länger tätig laut deiner Mitgliedschaft hier. In dem Zeitraum hättest du es längst erlernen können

Texasmutscha

ich war gerade fast dabei dir das mal kurz zu bauen(dauern würde es 3-5 min), aber da du wahrscheinlich auch verstehen willst. Sieh mal hier:
http://www.cssplay.co.uk/layouts/three-column-layouts.html
Ist mir gerade noch ins Auge gestochen als ich meine Favoriten duchsuchte

Hoffe du beschäftigst dich trotzdem auch mit XHTML und Css(extern).

Übernimm mal diesen Code hier 1:1 , dann kannst du sehen was wie geht.

index.html
-->

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Willkommen | Divs statt Tabellen</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
  <div id="header">
   <div class="content">
    <h1>CSS play - SIMPLE Flexible Layout - 3 columns two fixed widths</h1>
    <p>Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration (except for the 'Donate' button).</p>
   </div>
  </div> <!-- end header -->
 
  <div id="wrapper">
   <div id="outer1">
     <h3>Left 200px</h3>
     <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
     <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
     <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p>
   </div>
 
   <div id="outer3">
     <h3>Right 200px</h3>
     <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
     <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
     <p>All three columns will end at the footer.</p>
   </div> <!-- end outer3 -->
 
   <div id="outer2">
     <h3>Center percentage</h3>
     <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
     <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
     <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
     <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p>
     <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
     <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p>
   </div> <!-- end outer2 -->
 
 
  </div><!-- end #wrapper -->
 
  <div id="footer">
   <div class="content">
    <p>&copy; Autor der Seite </p>
   </div>
  </div> <!-- end footer -->
 
</body>
</html>

Alles anzeigen

Und die untere Css datei speicherst du unter css.css ab und lädst sie ins selbe verzeichnis wie die index.html

HTML

body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;}
 
#header {background:#a31e39;}
 
#outer1 {float:left; width:180px; padding:10px; background:#e0d0d0;}
#outer3 {float:right; width:180px; padding:10px; background:#b0b0b0;}
#outer2 {background:#e0e0e0; margin:10px 210px;}
 
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}
 
#wrapper {overflow:hidden; background:#e0e0e0;}
 
 
#footer {clear:both; background:#455c5a;}
 
.content {padding:10px;}
h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:18px; margin:0; padding:8px 0;}
p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}

Alles anzeigen

Auf obiger Seite gibt es verschiedene Modelle, allerdings sollte man den Doctype immer um einen aktuelleren ersetzten(wie ich in obigem Code)
Ist zwar keine Pflicht aber es ist für zukünftigere Webseiten durchaus von Vorteil.

Viel Glück:D:D

Texasmutscha

P.s Bitte den Beitrag noch zu vorigem hinzufügen, ist mir selber nicht möglich:p

R3WARD

Zitat von sejuma

Du hast in deinem Tabellencode drei Zellen nebeneinander:
Zei mit fixen Breiten von 100px und 80px und mittendrin eine ohne Breitenangabe.
Genauso funktioniert das mit drei nebeneinander angeordneten Divs auch.

Lese bitte erst mal meinen 2. Beitrag in diesem Thema.

Texasmutscha

Funktioniert zwar erstmal grundsätzlich wenn man solche Einstellungen setzen muss dann kann man auch gleich bei Tabellen bleiben

Code

#outer1, #outer2, #outer3 {padding-bottom:[B]32767px[/B]; margin-bottom:[B]-32767px[/B];}

So eine Angabe ist für mich in keinster Weise akzeptabel.

Es kann doch nicht sein das es in CSS keine schöne Lösung gibt

Unregistriert

Zitat von R3WARD
Lese bitte erst mal meinen 2. Beitrag in diesem Thema.

Texasmutscha

Funktioniert zwar erstmal grundsätzlich wenn man solche Einstellungen setzen muss dann kann man auch gleich bei Tabellen bleiben
Code
#outer1, #outer2, #outer3 {padding-bottom:[B]32767px[/B]; margin-bottom:[B]-32767px[/B];}
So eine Angabe ist für mich in keinster Weise akzeptabel.

Es kann doch nicht sein das es in CSS keine schöne Lösung gibt

Sorry ich wollte schreiben das paar sachen ausser dem doctype zu ändern sind, ist das nicht geschehen? Aber so grob ist schon richtig wie es zu machen ist(css lösung):p

R3WARD

Zitat von Unregistriert

Aber so grob ist schon richtig wie es zu machen ist(css lösung):p

Dies sehe ich nicht wirklich wie bereits beschrieben als Lösung an (Es funktioniert zwar aber schön ist es wirklich nicht einfach mal 32767px festzulegen.

Es muss doch wirklich eine schönere Lösung geben.

Grevas

Dynamisch gibt es aber keine. Entweder Faux Columns oder Tabelle bei sowas.

Solange es keine andere Möglichkeit als "float" gibt Elemente nebeneinander zu positionieren, ohne dabei feste Werte zu verwenden, wird sich das auch nicht ändern (Elemente mit Float beeinflussen die höhe eines Übergeordneten Elements nicht).

Die Tabelle hat nunmal einzigartige eigenschaften in HTML, wie z.B. eine richtige vertikale Ausrichtung. So schnell werden diese nicht verschwinden .
Bevor jetzt wieder jemand mit Semantik anfängt - erzählt es dem W3C!

Texasmutscha

Zitat von R3WARD

Dies sehe ich nicht wirklich wie bereits beschrieben als Lösung an (Es funktioniert zwar aber schön ist es wirklich nicht einfach mal 32767px festzulegen.

Es muss doch wirklich eine schönere Lösung geben.

Wie gesagt es ist auch möglich die Seite ohne die Riesen hin und her schiebung des margin bzw padding werts sematisch korrekt zu erstellen. Selber XHTML(incl. Boxmodell) und Css können;)

Alternativ kann ich dir noch Templateseiten ans herz legen wenn du es selber nicht kannst.
http://www.free-css-templates.com/
http://www.freecsstemplates.org/css-templates

Aber auch die sind nicht immer perfekt gebaut,(Quellcode perfekt) aber sie bestehen auch schon etwas länger8)

http://www.google.de/#hl=de&source=…b0f8312a7be4d4c

p.s Ich habe auch nur durch basteln, Quellcode überarbeiten alles gelernt.
Und immer wieder lesen, lesen und realitätsnahes Üben am Projekt. Das hilft ungemein;);)

Texasmutscha

R3WARD

Zitat von Texasmutscha

Wie gesagt es ist auch möglich die Seite ohne die Riesen hin und her schiebung des margin bzw padding werts sematisch korrekt zu erstellen. Selber XHTML(incl. Boxmodell) und Css können;)

Was möchtest Du mir damit sagen?
Das es eine Lösung gibt?

Texasmutscha

Zitat von R3WARD

Was möchtest Du mir damit sagen?
Das es eine Lösung gibt?

Wenns dir bis heute abend keiner gemacht hat oder du es nicht selbst hinbekommen hast mache ich es... aber es ist echt so einfach. Wo liegt das Problem.

Da hast du schonmal die HTML Struktur

HTML

<body>
        <div id="header"></div>
        <div id="links"></div>
        <div id="inhalt"></div>
        <div id="rechts"></div>
        <div id="footer"></div>
</body>

EDIT:

Css Datei

Code

* {margin: 0; padding: 0;}
html {background-color: #fff;}
body {
width: 1000px;
height: auto;
margin: 0 auto;
background-color: #000;
}
#header {
width: 100%;
height: 150px;
/* background-image: url(img/logo.gif); */
}
#links {
width: 150px;
height: 750px;
float: left;
background-color: #ff0000;
}
#inhalt {
width: 700px;
float: left;
}
#rechts {
width: 150px;
float: left;
background-color: #ff1250;
}
#footer {
width: 1000px;
height: 30px;
clear: both;
}

Alles anzeigen

So den Rest (deine breiten und längen musst du selber anpassen, sowie die Hintergrundfarben. Ist nur der Übersicht halber. Der feste Höhenwert im Footer muss bestehen bleiben!!

Wenns das nicht ist dann weiß ich nicht was du möchstet:-)

Layout.rar

Tobse

Natürlich...

HTML

<html>
 <head>
  <style type="text/css">
   body div {
     background: #808080;
   }
   #logo {
     background-color: rgb(51, 51, 51);
     height: 50px;
   }
   #spalte1 {
     float: left;
     width: 250px;
     height: 500px;
     background-color: rgb(204, 204, 204);
   }
   #spalte2 {
     width: auto;
     padding-left: 250px;
     padding-right: 200px;
     height: 500px;
     background-color: rgb(102, 255, 153)
   }
   #spalte3 {
     float: right;
     width: 200px;
     background-color: rgb(204, 204, 204);
     height: 500px;
   }
   .clear {
     /*clear: both;*/
     border: none;
   }
  </style>
 </head>
 <body>
  <div id="logo"><br><a>LOGO</a></div>
  <div id="spalte1">
   Text1<br>
        Sonstiges<br>
        Überschallgeschwindigkeitsflugzeug
  </div>
  <div id="spalte3">
   Text1<br>
      Text2<br>
      Text3
  </div>
  <div id="spalte2">
   Dies ist ein TEST
  </div>
  <div class="clear"></div>
 </body>
</html>

Alles anzeigen

im FF 3.5, Opera 10, Safari 4 und IE 8 perfekt angezeigt. Ist deine Frage geklärt?

Grevas

Sama...

Lest ihr eigentlich mit?

Spätestens als über Faux Columns geredet wurde, hättet ihr merken müssen, dass die Höhe nicht fest sein darf!

Mit einer variablen Breite dazu bekommt man es ohne Tabelle nicht hin.

Es gibt nur 2 Möglichkeiten Bereiche nebeneinander zu positionieren und dabei eine Variable Höhe zu lassen - ohne Tabellen.
1. position absolute
2. float

Beide davon beeinflussen die Höhe ihres Elternelements nicht, somit kann man keine bündige Fläche schaffen.

R3WARD

Zitat von Tobse

[/code]im FF 3.5, Opera 10, Safari 4 und IE 8 perfekt angezeigt. Ist deine Frage geklärt?

Nein, siehe Post von Grevas

Zitat von Texasmutscha

Wenns das nicht ist dann weiß ich nicht was du möchstet:-)

Das habe ich doch beschrieben oder täusche ich mich da?

Grevas
Danke für die Info und das Du wenigstens alles durchgelesen hast.
Soviel zur Behauptung mit CSS alleine ist alles möglich.

Ich werde dadurch wohl bei den HTML Tabellen + CSS bleiben müssen da es anscheinend keine Lösung gibt die auch in jeden Browser funktioniert.

Somit gibt es wohl keine Vorteile für CSS Tabellen.
(Klar würde man dadurch ein bisschen Traffic sparen aber wen interessiert es bei den heutigen Traffickosten, aber es bringt nichts wenn ich nicht mal ein dynamischen Design (Breite, Höhe) erstellen kann und beim Rest dauerndzu nur CSS Fixe benötige)

Grevas

Das heißt nicht, dass ich Tabellenlayouts befürworte - Wenn man sowas in ner Darstellung vom Content mal dringend braucht finde ich es durchaus legitim.

Aber ein professionel aussehendes Layout würde ich nie mit Tabellen machen.

1. Da man Grafiken so oder so nicht bei Dynamischer Breite / Höhe einsetzen kann. Zumindest nicht überall sinnvoll
.
2. Weil dadurch die möglichkeit besteht, dass Layout zu zerschießen. Die Möglichkeiten der Tabelle haben auch ihre Nachteile.

3. Semantik - Geschmackssache

4. Es die Übersicht im Code erschwerrt.

5. Ein Tabellenlayout ist bei Änderungen oft umständlich.

Gibt bestimmt noch ein paar Gründe dagegen sowohl aber auch dafür.

Tags