divs statt tables für Layouts
0 0 0 0 0 
at
0 3 Patrick Andrieu
divs statt tables für Layouts
Hi,
ich bin gerade dabei, eine Website zu erstellen. Das habe ich zuletzt vor einigen Jahren gemacht, als komplexere Layouts quasi nur mit tables zu machen waren. Nun gibts ja CSS und es funktioniert einigermaßen gut und alle Welt sagt, dass man tunlichst keine tables für Layoutzwecke missbrauchen soll, größtenteils mit einleuchtenden Argumenten untermauert.
Also dachte ich mir, Zeit mal was Neues zu lernen und machte mich daran, meine Seiten mit CSS zu layouten.
Um es kurz zu machen, ich verzweifle bald. Simpelste Dinge, die ich früher mit tables in wenigen Minuten perfekt und browserunabhängig auf die Beine gestellt habe, kosten mich nun Stunden. Hier wird Text abgeschnitten, da wird das Element ohne Grund breiter, auf jenem Browser stimmt der Rand nicht. Also nochmal die Spezifikation lesen, Google befragen, ähnliche Seiten mal im Quelltext anschauen usw...
Als ich mit der Site angefangen habe, hatte ich ein einigermaßen komplexes Navigationsmenü mit tables in PHP implementiert. In weniger als 3 Stunden waren alle Einsatzzwecke abgedeckt und einsetzbar.
Dann habe ich nochmal von vorne angefangen, um das gleiche Ergebnis mit CSS zu erreichen. Das war vor 3 Tagen und ich bin nicht mal annähernd am Ziel, von Browserinkompatibilitäten ganz zu schweigen, deren Lösung mich sicher nochmal so viel Zeit kosten wird.
Ich bin kurz davor, den ganzen Kram wegzuschmeißen und einfach mit tables weiterzumachen. Dann werde ich wenigstens irgendwann mal fertig.
-
Hallo Pock,
ich kann dazu leider nur sagen, es geht mir genau so. Ich habe inzwischen sogar aufgegeben diese begehrte CSS Fähigkeit auszutüfteln und gebe die Basisarbeit an meinen Bekanntenkreis weiter. Ich bin allerdings auch kein Frontend Mensch. Wenn du einer bist, dann solltest du m.M. nach incht aufgeben, sondern eben die Zeit investieren, die du brauchst um CSS Layouts zu meistern. Als du damals angefangen hast HTML zu lernen und gelernt hast wie man mit tables browserunabhängig arbeitet, da warst du auch noch nicht nach 3 Tagen fertig oder?
Gruß,
Cruz-
Hi Cruz,
Hallo Pock,
ich kann dazu leider nur sagen, es geht mir genau so. Ich habe inzwischen sogar aufgegeben diese begehrte CSS Fähigkeit auszutüfteln und gebe die Basisarbeit an meinen Bekanntenkreis weiter. Ich bin allerdings auch kein Frontend Mensch. Wenn du einer bist, dann solltest du m.M. nach incht aufgeben, sondern eben die Zeit investieren, die du brauchst um CSS Layouts zu meistern. Als du damals angefangen hast HTML zu lernen und gelernt hast wie man mit tables browserunabhängig arbeitet, da warst du auch noch nicht nach 3 Tagen fertig oder?
Ich bin eigentlich kein "Frontend-Mensch". Wenn ich jemanden hätte, der mir das Frontend macht, würde ich es gerne abgeben :) Es geht mir aber auch darum, auf dem neuesten Stand zu bleiben. Ich möchte immer gerne wissen, wie man es "richtig" macht.
Leider ist es bisher äußerst frustrierend, weil das (Miss-)Verhalten so einiger Elemente für mich kaum nachvollziehbar und die Fehlerursache nur durch stupides rumprobieren zu finden ist. Und wenn es dann in verschiedenen Browsern auch noch völlig verschieden aussieht, macht das die Fehlersuche nicht gerade einfacher.
Bei tables hat man wenigstens eine klare Struktur, einzelne Elemente (Zellen/Tabellen) sind strikt voneinander getrennt und beeinflussen sich nur begrenzt. Das macht schon einiges einfacher. Im Moment kann ich mich nur darüber wundern, warum das Eltern-div plötzlich dreimal so breit wird, wenn ein Kindelement float:left hat.
-
Hallo,
Glücklicherweise habe ich erst so spät mit der Materie begonnen, daß ich von vorneherein auf CSS gesetzt habe. Bisher konnte ich auch alle Aufgabenstellungen ohne Layouttabellen umsetzen. Wenn Du Deine Probleme etwas konkreter schildern würdest, vielleicht sogar verlinkt, dann könnte man Dir mit Sicherheit helfen Deine Vorstellungen rein mit CSS umzusetzen.
mit freundlichen Grüßen
Ulrich -
Hi,
ich habe bei meiner HP mit Tabellen angefangen,
dann aber (auch wegen des Forums hier) auf CSS umgestellt.
Ich muss sagen, da ich mich nie an die Tabellen gewöhnt hatte, finde ich das CSS gut.
Aber ich mache eben auch keine komplexen Strukturen damit. Eher: ich mache ein Kästchen, nehme eine meiner 4 Standartformatierungen, passe die individuell etwas an, dann habe ich es auf dem Bildschirm. Ist so in etwa wie Power Point für mich.Sg stefan
-
-
-
Hi Pock,
kann ich verstehen... habe selber ähnlichen Ärger. Und auch viel dazu gegooglet. Mein Ergebns war so in etwa, dass es zwar gut und schön ist mit CSS, aber auch im Ergebnis gewissen Nachteile hat.
Praktisch läuft das jetzt in etwa darauf hinaus, dass wir eine Kombination aus CSS und Tables benutzen. Also die ganzen Styles kommen aus dem CSS Stylesheet, einige Positionierungs-CSS helfen auch, aber auf Tables verzichten tun wir trotzdem nicht, weil sie sich einfach bewährt haben.
Übrigens war mein Eindruck bei der Analyse von Wettbewerbs-Quellcodes ein ähnliches: Auch dort werden CSS für die Schriften, Farben, etc. benutzt, aber dennoch konnte ich viele Tabellen etdecken.
Das sich der weitere Gbrauch von Tabellen negativ auf Google auswirkt konnte ich auch noch nicht entdecken - wir sind nach wie vor Top gelistet. Aber näheres solltest du mal (falls relevant) bei Abakus Forum Googlen...
Schöne Grüße,
Tobi -
Hi!
Ich hoffe ja mal, dass sich hier noch einige CSS-Gurus
zu Wort melden und mir meine Motivation zurückgeben.
Ich wollte nämlich gerade damit anfangen, meine bisherige
Positionierungen mit Tables mit CSS vorzunehmen.
Aber die bisherigen Antworten von Tobi und Cruz nehmen
einen irgendwie die Motivation, etwas neues zu lernen,
was dann wohl doch net so das gelbe vom Ei ist.
Also schreibt doch bitte reichlich Vorteile von der
Postitionierung mit CSS, um mich zu überzeugen, dass
das net nur nen Ballerspiel ist.-
Hi!
Ich hoffe ja mal, dass sich hier noch einige CSS-Gurus
zu Wort melden und mir meine Motivation zurückgeben.
Ich wollte nämlich gerade damit anfangen, meine bisherige
Positionierungen mit Tables mit CSS vorzunehmen.
Aber die bisherigen Antworten von Tobi und Cruz nehmen
einen irgendwie die Motivation, etwas neues zu lernen,
was dann wohl doch net so das gelbe vom Ei ist.
Also schreibt doch bitte reichlich Vorteile von der
Postitionierung mit CSS, um mich zu überzeugen, dass
das net nur nen Ballerspiel ist.Naja, die theoretischen Vorteile sind ja schon einleuchtend. Du kannst dein Layout viel zentraler definieren und bleibst unabhängig vom tatsächlichen Inhalt. Die Ladezeiten sinken, weil das table/tr/td-Gewusel wegfällt. Außerdem suggerierst du mit tables eine Semantik, die tatsächlich gar nicht gegeben ist und machst so einen großen Schritt in Richtung Barrierefreiheit. Auch die Anpassung auf verschiedene Ausgabegeräte (für mich besonders interessant: Mobiltelefone u.ä.) ist einfach zu lösen.
Das Ganze erkaufst du dir aber (meiner bisherigen, geringen Erfahrung nach) mit einem ungleich höheren Zeitaufwand. Insbesondere dann, wenn du bisher eher "in Tabellen denkst".
-
-
Hallo Pock,
ich kann Dich beruhigen, diese "Verzweiflung" ist ganz normal. Layer (DIV)-basierte Layouts sind in XHTML/CSS am Anfang vom Einstieg in die Materie etwas schwieriger zu erlernen als die alten Table-Lösungen. Nach einiger Zeit wirst Du allerdings mit Sicherheit die Vorzüge des neuen Weges nicht mehr missen wollen, glaub mir ;-)Ich selbst habe noch bis vor drei Jahren Layouts - wie damals eigentlich üblich - mit Tabellen erstellt. Die Einarbeitung und Umstellung auf Layer hat mich einige Nerven gekostet. Heute bin ich aber bei der Umsetzung eines Layouts in XHTML schneller als je zu vor. Und auch schneller als damals.
Also kopf hoch, mit Hilfe von SELFHTML schaffst Du das.
Grüße,
KonstantinPS: Neben SELFHTML hilft es oft auch, in den Code von interessanten Internetseiten hineinzuschauen. Bspw. www.alistapart.com
-
Hallo.
Layer (DIV)-basierte Layouts sind in XHTML/CSS am Anfang vom Einstieg in die Materie etwas schwieriger zu erlernen als die alten Table-Lösungen.
Noch viel schwieriger scheint aber zu lernen, dass CSS und der, womöglich massenhafte, Einsatz von
<div>nichts miteinander zu tun haben.
MfG, at
-
-
Ich bin kurz davor, den ganzen Kram wegzuschmeißen und einfach mit tables weiterzumachen...
no Problem. Ich mach das auch. Um die "reine" CSS-Lösung wird m.E. viel zu viel Theater gemacht - am Ende ersticken diese selbsternannten Gurus in ähnlicher DIV-Soße, wie wir früher in Table-Soße - das war nicht der Sinn der Erfindung. Also alles da anwenden, wo es sinnvoll ist. Das gute alte Rasterlayout ist nunmal NUR mit Tabellen möglich, denn nur sie halten die Spalten und Zeilen unabhängig vom Userfenster zusammen - und so wird es vermutlich auch bleiben, weil im W3C Leute sitzen, denen grafische Gestaltung anscheinend scheißegal ist.
-
Hallo Pock (und natürlich auch billy the gates und die anderen Beteiligten)!
als komplexere Layouts quasi nur mit tables zu machen waren.
Ich weiß nicht, wann "als" für Dich bedeutet, aber ich kann mich erinnern, dass es auch dam"als" nicht so einfach war. Schließlich sind Ausdrücke wie <selbstzitat title="im Archiv zu finden">"programmiertechnische Fehlgeburt"</selbstzitat> nicht umsonst gefallen!
Das fiel uns damals nur deswegen leichter, weil wir das ja alle eingermaßen beherrschten. Es gab ja schließlich nicht viel, was man anders hätte machen können. Aber ein Herumdoktoren wegen der anderen Darstellung in jenem oder diesem Browser gab es damals schon, gibt es heute noch, und ich befürchte, das wird es immer geben.
Ich habe mittlerweile aufgehört, Browser X oder Y als "Fehlgeburt" zu titulieren, mittlerweile nutze ich selbst vier oder fünf verschiedene. Man kann sich ob dieses oder jenes streiten, ob der eine dies richtig interpretiert oder nicht, auch die Entwickler sind nur Menschen, und ich (zwar kein Entwickler) zum Beispiel sehe einen Rahmen UM ein Bild HERUM (dafür ist es ja ein _Rahmen_) und nicht AUF einem Bild DRAUF (wie es der W3C anscheinend vorschreibt - Stichwort Box-Modell) - aber gut, es heißt ja "border", und die uns beherrschenden Anglophonen meinen ja vielleicht was ganz anderes als wir (ich meine die Deutschsprachigen) mit "Rahmen" oder wir (jetzt meine ich meine Landsleute) mit frz. "Cadre". So viel dazu, warum der IE den Border außerhalb der angegebenen DIV-Breite macht, sicher sitzt ein Franzmann oder ein Francokanadier bei Microsoft ;)
Und wie man früher eine andere Lösung gesucht hat (mit Tabellen), weil die erst gedachte nicht in allen Browsern funzte(TM), so macht man das auch mit CSS. Die Browser interpretieren viele CSS-Eigenschaften leider genauso unterschiedlich wie einst manch eine Tabelleneigenschaft. IE ist da eher etwas rückständig, vielleicht wird es mit Version 7 besser, aber wie es den Anschein hat, ist IE ohnehin auf dem Rückmarsch - trauern tue ich nicht.
Nichtsdestotroz haben in meinen Augen diejenigen recht, die gebetsmühlenarig wiederholen, dass Tabellen nur für tabellarische Daten da sind. Das Stichwort heißt - wie fast immer im Leben - Kompromisse machen. Wenn eine Idee nicht funzt(TM) sucht man sich halt eine andere, die fast genau zu dem selben Ergebnis (hier: der selben Darstellung) führt. Und man wird fündig. Schließlich bietet CSS eine Fülle von Möglichkeiten, die man einst mit den starren Tabellen gar nicht hatte.
Ich habe die neuen Seiten meiner Webpräsenz ohne Tabellen gestaltet. Das Layout ist drei Jahre alt (also: die Idee und meine ersten Tests), war aber nie online - bis seit 27.08.06 - 00.00 Uhr. Der Grund ist nicht, dass ich drei Jahre dafür gebraucht habe, sonder eher viel Faulheit meinerseits, wenn es um die eigenen Sachen geht, an manchen Wochen habe ich täglich dran gearbeitet - dazwischen waren oft viele Monaten untätigkeit - und zeitweise großes Desintersse (oder halt andere Interessen *lechz*). Nun jetzt sind die Seiten online: CSS/JS-DOM Layout, das auch ohne JavaScript sich einigermaßen zeigen lässt.
Gestern und heute habe ich den Bericht eines "Fremdautors" (der hier jedoch bestens bekannt sein dürfte *g*) vom Tabellenlayout auf CSS umgestellt. Ist sicherlich nicht das Gelbe vom (Atomic) Egg, aber bis auf eine Kleinigkeit, die ich morgen angehen werde, sieht es genauso aus wie das Original. Genauso? Nun ja, Pixelzähler werden hier und da feststellen, dass irgendwo irgendwas vielleicht mal ein oder zwei Pixel breiter/höher/sonstwas ist:
CSS-Seite (nur diese *.html*-seite, links u.U. nicht funktionierend): http://banzaii.homeip.net/scr/gironde/index.html *
Original mit Tables: http://www.atomic-eggs.com/scr/gironde/index.htm **Mit Firefox und Mozilla (beide 4 Wochen alt), Opera 9.01 und IE 6 in etwa gleich.
Meine "sonstigen" Seiten: siehe Link bei meinem Namen und viel Spaß mit der Intro ;)*) Wenn der Link nicht geht, bin ich halt nicht online... später versuchen. Für's Archiv: Dieser Link wird irgendwann zum DeadLink.
**) Wieder für's Archiv: Dieser Link wird es auch nicht lange geben - Poste neue Verlinkungen sobald diese eingerichtet!Fazit: wo ein Wille ist, ist auch eine CSS-Lösung. Nicht verzagen. Weiter testen. Mit der Zeit kennt man seine Pappenheimer, weiß, wie damals auch mit Tabellen, welcher Browser da anders reagiert, und kann von vorne herein diese Fehldarstellungen vermeiden. Sicher, die eine oder andere Überraschung bleibt einem beschert, letztens musste ich den Opera-Leuten sogar einen Bug melden (die haben es aber genauso wenig nötig zu antworten, wie die M$-Schergen [(C) Bio]).
Das Wichtigste ist immer noch der Inhalt Deiner Seiten. Ob bei IE hier oben links ein Pixel fehlt, oder bei Opera dort einer zu viel ist, oder bei Firefox (verhält sich übrigens doch nicht synchron wie Mozilla, wie ich eben feststellen durfte) es noch etwas anders aussieht... den User interssiert es nicht, ob Deine Seite gut aussieht, wenn er nicht das finden kann, wonach er sucht. Wenn er findet, was er sucht, und er hat als willkommenen Nebeneffekt etwas "gut Aussehendes" (wobei... Geschmäcker sind verschieden), dann freut er sich um so mehr. Aber ein geniales Layout wird nichts gut machen, wenn die Informationen nicht erreichbar sind.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _-
Hallo!
aber bis auf eine Kleinigkeit, die ich morgen angehen werde,
ist schon erledigt... und alles ist neu verlinkt:
Neue Version ohne Tabellen
Originalversion mit TabellenlayoutViele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
-