[CSS] div padding problem

[tobias-digital]

hab mir ein paar dinge angesehen. Bisher sind die meisten Seiten die ohne Tabellen auskommen solche, die feste breite und höhe angeben.

Ist völlig aus der Luft gegriffen. Ich weiß nicht ob es da empirische Untersuchungen gibt, aber ich denke eher das Gegenteil ist der Fall.

Mit Kritik 1 hast Du völlig recht: die Tags table, tr, th und td sind genau dafür da

Daten tabellarisch darzustellen. Jeder der sowas mit divs realisiert hat (X)HTML nicht verstanden.

zu Kritik 2:

Ich finde das Beispiel mit den Menüpunkten absurd. Es geht bei der (X)HTML-CSS-Trennung nicht darum, dass man schnell seine CSS Datei und sein Layout wechseln kann, sondern eher darum, sich sinnvoll Gedanken über den Aufbau eines Dokumentes zu machen und es im Anschluss nach einem (am besten vorher) entwickelten Layout zu formatieren. Ob da jetzt ein horizontales oder vertikales Menü mit 1000 Menüpunkten ist, muss das Layout festlegen, und nciht die Technik die dahinter steht.

Ein weiterer ganz wichtiger Punkt ist die Barrierefreiheit nach BITV (z.B. unter: http://www.barrierefreies-webdesign.de/richtlinien/index.php#bitv). Alle in der BITV genannten Angebote bis 31.12.2005 die BITV erfüllen. Mit Tabellen-Layouts ist das unmöglich.

Noch ein Punkt: wenn ich mir einen Neuwagen kaufen will, dann will ich nicht, dass er mit veralterter Technik ausgeliefert wird, sondern ich erwarte, das er nach dem aktuellen Stand der Technik funktioniert. Genauso sehe ich das bei (X)HTML und CSS. Alle Layouts, die sich mit Tabellen umsetzen lassen, lassen sich auch mit z.B. divs oder anderen Block Elementen (wie z.B. ul oder p) umsetzen. Das ist der aktuelle Stand der Technik. Der Kunde, der bei mir eine Webseite in Auftrag gibt, hat ebenso das Recht auf Aktualität wie ich im Autohaus.

Gruß, Tobias

[tobias-digital]

100% trennung ist mit XML möglich, aber XML kann auch nur dann angezeigt werden, wenn es in HTML oder ähnliches 'transformiert' (XSLT) wird. Andernfalls weis der Interpreter nicht, wie er den Baum anzeigen lassen soll.

XHTML 1.0 ist unter Zuhilfenahme von XML entwickelt worden. XHTML 1.1 führt diesen Ansatz weiter und muss sogar mit dem Mime-Typ application/xhtml+xml ausgeliefert werden.

[Aiun]

Wer legt denn bitte fest was noch aktuell ist oder nicht ?

Tabellen sind (wie frames auch) Teile des (x)HTML Standards.

Und sorry wenns blöd klingt, aber alles was ich bisher über Barrierefreiheit gelesen habe, lässt mir die Haare zu Berge stehen...werd mir da aber noch mehr drüber ansehen....

"Was" ist denn schlimm an Tabellen ?, "Warum" sollte ich sie nicht mehr benutzen ?

http://www.csszengarden.com/

beschreibt das gegenteil von dem was du zu Kritik 2 geschrieben hast. Dort wird beschrieben das Css dazu dient, das Layout ändern zu können, ohne großartig eingriff in HTML zu nehmen. Den selben HTML-Code mit verschiedenen CSS völlig anders darzustellen.

(möchte jetzt nicht ausschließen das ich irgendwas falsch interpretiert habe)

sinnvolle gedanken über den Seitenaufbau sollte sich jeder Web-coder/Designer machen, unabhängig davon, welche Elemente, Sprache etz. er benutzt.

Ein einfaches dreispalten-Layout würde ich immernoch mit einer Tabelle realisieren, wenn ich weis das sich dieser prinzipielle Aufbau so schnell nicht ändern wird. Die Tabelle ist immernoch am zuverlässigsten (Cross-browser)

und mit am wenigsten Aufwand zu realisieren.

ich glaube wir müssen bald mal einen friedenspost einschieben, sonst denkt noch jeder wir gehen uns hier an die Gurgel.

[forTeesSake]

Ein einfaches dreispalten-Layout würde ich immernoch mit einer Tabelle realisieren, wenn ich weis das sich dieser prinzipielle Aufbau so schnell nicht ändern wird. Die Tabelle ist immernoch am zuverlässigsten (Cross-browser)

und mit am wenigsten Aufwand zu realisieren.

wenn man mal googlet z.b. mit den suchbegriffen "css 3 column layout" oder "css multi column layout" findet man einfache techniken dies keinesfalls workarounds sind um mehrspaltige layouts zu realisieren.

ob es nun mit tabellen einfacher geht bleibt jedem selbst überlassen. fakt ist aber doch wohl, dass es mit divs genau so gut und x-browser kompatibel zu realisieren ist.

dazu kommt noch die oben angesprochene "aktualität" von css-standards.

eine schöne seite dazu: http://glish.com/css/7.asp

[Krain]

...

ich glaube wir müssen bald mal einen friedenspost einschieben, sonst denkt noch jeder wir gehen uns hier an die Gurgel.

Nein, bitte macht weiter. Ich finde Eure Diskussion sehr interessant und lese schon die ganze letzte Woche mit. Außerdem ist es ein Thema das mich auch interessiert.

@TOPIC:

Ich versuche mein Layout auch mit CSS zu gestalten (ohne Tabellen) und komme damit eigentlich sehr gut zurecht.

Die Beispiele von Aiun, die sie vor einigen Posts genannt hat (von wegen Name, Email, Homepage,etc..) erfordern IMHO eine Tabelle, da es auch tabellarische Daten sind (aber tobias sieht das glaub ich genauso).

Gruß

Markus

[tobias-digital]

*aiunmalnensmiliezuwerf*

Tja, wer legt fest was aktuell ist, ich würde mal sagen XHTML 1.1 ist die aktuellste (31 Mai 2001) Empfehlung des W3C, also würde ich sagen XHTML 1.1 ist der momentane Standard. So, die momentan dringend umzusetzende BITV sagt in Anlage Teil 1, Anforderung 5:

Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup–Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.

XHTML wurde unter der Beachtung der Accessability Guidelines (http://www.w3.org/TR/WCAG10/) entwickelt und eignet sich somit hervorragend zur Umsetzung der BITV. Ich persönlich finde die BITV nicht haarstreubend, sonder richtig und wichtig. (Unbeabsichtigter Reim im letzten Satz)

Das man bei CSS Zen Gardens Stylesheet austauschen kann, damit das Layout plötzlich anders aussieht sehe ich nicht als herausragende Eigenschaft von CSS an, sondern als besonderes Feature dieser speziellen Seite.

Dir und anderen hier sei mal die Slideshow "Warum Layout mit Tabellen dumm ist" empfohlen: http://seybold.jan-andresen.de/index.php

[geloescht_JesterDay]

Wer legt denn bitte fest was noch aktuell ist oder nicht ?

Tabellen sind (wie frames auch) Teile des (x)HTML Standards.

Tabellen sind Teil des Standards, aber Tabellen waren nie zum Layout und zum einteilen des Textes im Browser gedacht. Tabellen sind dazu da Daten tabellarisch anzuzeigen. sie sind eben einfach nur Tabellen. Manche Daten, wie z.B. die Bundesligatabelle, würdest du ja nie in einer anderen form erwarten. Und so Daten werden mit Tabellen dargestellt, dazu wurden sie eingeführt und dazu sind sie immernoch da.

Und sorry wenns blöd klingt, aber alles was ich bisher über Barrierefreiheit gelesen habe, lässt mir die Haare zu Berge stehen...werd mir da aber noch mehr drüber ansehen....

"Was" ist denn schlimm an Tabellen ?, "Warum" sollte ich sie nicht mehr benutzen ?

Weil sie eben für Tabellen da sind. Du siehst das alles aus deinem sehr beschränkten Blickwinkel. Barrierefrei heisst, dass die Seite eben nicht nur in deinem Browser angezeigt werden können soll. Z.B. (aber nicht als wichtigstes und einzigstes) sollen auch ScreenReader damit zurechtkommen. also Programme, die blinden die Seite vorlesen. Dieses Programm sieht dein tolles Layout nicht und auch der Blinde interessiert sich nicht dafür. Das Programm liesst die inhalte aus den Tabellenzellen vor, und das kann u.U. eine ganz andere, falsche, Rehienfolge sein, als du es optisch wahrnehmen würdest. Eine Tabelle ist eben eine Tabelle und wird als Tabelle vorgelesen, nicht als Seitenlayout. Ausserdem soll die Seite z.B. auch auf PDAs angezeigt werden. Also Geräten die nur einen Bruchteil deiner Bildschrimauflösung haben. Wie brichst du deine Tabelle um,, wenn von der Breite nur eine spalte hinpasst, du aber 5 Spalten vorgegeben hast? Kannst dir bestimmt vorstellen, dass deine Seite dann entweder zum gröten Teil unsichtbar oder absolut unbrauchbar wäre.

Ohne Tabellen werden die DIVS z.B. im Zweifel alle untereinander dargestellt. Für die Optik ist das genausowenig, aber da deine Seite eine klarere Struktur hat, ist sie dennoch benutzbar.

[Aiun]

Das Programm liesst die inhalte aus den Tabellenzellen vor, und das kann u.U. eine ganz andere, falsche, Rehienfolge sein, als du es optisch wahrnehmen würdest.

das ist im Fall von Divs noch schlimmer. Denn ich kann Divs "ganz anders" im Code anordnen, als es nachher in der Optik der fall ist.

----

zum Thema PDAs & Co

Webseiten werden für ein spezfisches Medium entworfen->PC Bildschirm

wenn eine Seite per PDA zu lesen sein soll (Anforderung ?) dann werden die Daten darauf deutlich anders angeordnet sein, bzw. erheblich weniger Daten auf einer Seite sein.

es ist schlichtweg unmöglich Seiten der heutigen Zeit wirklich auf "allem" gleich gut lesbar zu machen. (sonst kommen wir auch in den Bereich, was wenn der PDA-Browser noch kein Css kann ? (schon vorgekommen))

Was wenn eine Webseite ausgedruckt werden soll ?, soll ich deswegen auf schwarze hintergründe und bilder verzichten. Oder inhalte nur noch so formen das sie 'schön' auf Din-A4 passen ? Bisher habe ich nicht gesehen, das ein Browser einen Ausdruck relevant anders behandelt als eine anzeige. (kann mich irren) Und wenn er das tun würde, gehe ich davon aus das der Zusammenhang der Informationen verlorengeht, unabhängig davon ob table oder div-Layout.

----

Wie bitte erkennt ein Vorlesebrowser ob das was in dem Div drin ist, Menü/Design oder inhalt ist ? ... soweit ich das beurteilen kann->gar nicht. Demnach ließt er es wie es im Code steht, und somit ist irrelevant ob in Tabelle oder Div

----

Manche seiten die ich mir jetzt über CSS angesehen habe, übertreiben es ganz gut beispiel: <b> durch <strong> ersetzen. <strong> ist aber nicht der einzige formattierungstag um Text hervorzuheben. Wie soll ich dem Kunden jetzt klarmachen das er sich aussuchen muss "warum" er etwas fett haben will, wenn es ihm darum geht die worte einfach "hervorzuheben" ?

oder was wenn ich eine Seite habe (Forum ?) in der ein Benutzer selbsttätig Text eingeben kann ?, der definiert Zeilenumbrüche weis leserlicher ist, besser aussieht, keine Absätze ! also -> \r\n ersetzen durch <br />, warum <p> wenn ich einen Zeileumbruch haben will/Leerzeile ohne das sich der Zusammenhang des Textes dadurch ändert ?

----

ich benutze selbst ein CSS-basiertes Layout (wobei noch einige Fehler zu korrigieren sind). Header, Nav, Footer, Content jeweils als Div.

im Nav-Div sind bisher die punkte mit <br /> getrennt, ich überlege z.Z. ob ich auf ein <li> wechsle, wobei ich da schwierigkeiten sehe. (aktuell gewählter punkt fett, deswegen ist er aber vom Inhalt her nicht anders)

Header ist hauptsächlich optisch / Footer enthält basisinformationen wer ein geloggt ist und seit wann.

Im Contentframe können formulare, Listen oder Detailansichten auftauchen, die sind zu 75% Table-basiert. in den Formularen bleibt somit die Zuordnung zwischen Feldbeschriftung und feld erhalten.

in Detailansichten kann ich "einfach" auch elemente Nebeneinander anordnen etz.

----

CSS ist schön, erleichert viel und macht den code ein ganze stück kleiner, flexibler unsw.

Aber ich glaube wir müssen aufpassen das man es nicht übertreibt mit der Inhalt / Optiktrennung. Das Web ist dafür da inhalte in einer bestimmten Art darzustellen. Wenn ich inhalte woanders (anderes Medium) darstellen will, entwerfe ich sie auch dafür.

[tobias-digital]

... zum Thema PDAs & Co

Webseiten werden für ein spezfisches Medium entworfen->PC Bildschirm

wenn eine Seite per PDA zu lesen sein soll (Anforderung ?) ... Was wenn eine Webseite ausgedruckt werden soll ?, soll ich deswegen auf schwarze hintergründe und bilder verzichten. ...

Das z.B. stimmt ja auch garnicht, ich meine, der Trend geht dahin XHTML-Dokumente "maschinenlesbarer" zu machen, weil Du eben halt nicht wissen kannst auf welcher Technik Deine Seite gerendert wird (sei es PDA, oder auf einem Drucker oder auf dem Bildschirm). CSS bietet hier die Möglichkeit für verschiedene Medien auch verschiedene Stylesheets zu definieren. So kann ich z. B. verhindern, dass bestimmte für das Bildschirmlayout wichtige Bilder auf dem Drucker nicht ausgegeben werden, und Text in schwarz und ohne Hintergrundbild z. B.. Ein guter Artikel hierzu ist "Print Different" von Eric Meyer: http://www.meyerweb.com/eric/articles/webrev/200001.html

[geloescht_JesterDay]

das ist im Fall von Divs noch schlimmer. Denn ich kann Divs "ganz anders" im Code anordnen, als es nachher in der Optik der fall ist.

Aber bei gescheiter Aufteilung der DIVs macht das nix aus, weil der Text auch ohne CSS einen Sinn ergibt. Siehe csszengarden. Und genau deshalb ist CSS ja da. Du machst deinen Inhalt so, dass er einen Sinn ergibt und nicht, dass es toll auf dem Bildschirm aussieht.

[Aiun]

so, nach langer pause mal wieder zeitgefunden hier reinzusehen.

Jester, ich weis nicht wie du darauf kommst, das ein Tabellen-Basiertes Layout oder Menü aus Spacer-gifs bestehen muss ^^ Ich rede hier von der logischen Anordnung der Elemente. So kann eine Tabelle dazu dienen, Navigationspunkte oder Menüs 'gleichmäßig' anzuordnen.

Natürlich gibts auch <li> aber sagen wir ich habe eine Element das ich "neben" den Nav-Punkten über die gesamte höhe eines vertikalen Menüs strecken will...dann ist colspan mein größter Freund.

Wenn ich dem Kunde erzähle das seine Seite X € mehr kosten wird, weil es ja sein könnte das er irgendwann PDAs & Co verwendet, dann wird er mir sagen das er sich damit "dann" beschäftigen wird, für jetzt interessiert ihn nur das was er haben will und die Kosten dafür.

es ist ja schon schwierig genug den leuten klarzumachen das man lieber jetzt etwas mehr aufwand betreiben sollte, um es später besser zu haben

Wenn ich bisher Seiten auf einem anderen Medium gesehen habe, dann rege ich mich meistens schön darüber auf, das die Seiten überhaupt nicht für das Medium (Handy, PDA, Touchscreen-Infostation) geeignet sind.

An kleinen Bildschirmen (Handy, PDA) erwarte ich reduzierte Informationen, so das ich mich in den bereich durchklicke in den ich will.

Habe ich keine Maus zu Verfügung, möchte ich auch nicht großartig mit dem Mauszeiger navigieren müssen, sondern direkt auf Links oder Buttons klicken. Lese ich etwas mit einem Screenreader, interessieren mich Werbebanner und 'Design'-Texte (je nach Seite ein Zitat, kurzinfos, auszüge aus Beiträgen) nicht. Sondern nur der "eigentliche" Inhalt.

Sieht man sich seiten wie T-Online.de oder Tagesschau.de an, ich glaube egal wie der HTML-Code aussieht, mit einem Screenreader käme ich da nicht weit, weil einfach zu viele Navigationsbuttons auf einer Seite sind.

Dann wäre ein reines XML hilfreich, das mir die Informationen kategorisiert (NAvigationsmenü 1 beinhaltet: Link 1, link 2)

Ich lese gerade wiedereinmal einen Artikel über das Thema, ein Absatz hat es ganz gut ausgedrückt, nähmlich das es z.B. unmöglich ist, die gleiche Information und Bild und Text zu übermitteln, andernfalls müsste ich einen Seitenlangen Text über das schreiben, was das Bild darstellt.

Wenn ich eine Webseite entwerfe, dann weis ich was/wo angeordnet wird. Denn mit diesem Schritt fällt auch die Entscheidung, bestimmte Informationen in Unterseiten anzuzeigen "weil" sie auf dieser Seite, auf diesem Medium nicht 'schön' / übersichtlich (und nicht zu überladen) angezeigt werden können.

Wenn ich also Informationen habe, die auf verschiedenen Medien angezeigt werden sollen, greife ich eher auf Datenverarbeitung zurück (PHP,ASP,JSP) und schreibe ein einzelnes Darstellungsmodul für das Medium. Durchaus wahrscheinlich das beide Module in HTML münden. Aber die Menge und struktur der dargestellten Information kann abweichen.

Will ich eine Seite für Blinde machen, wird sie darauf ausgerichtet, dann müssen Bildschirmleser vermutlich einschnitte machen. Es wird keine / weniger schmuckschrift, oder Stichwort-informationen geben.

Mache ich eine Seite für ein Handy, wird sie weniger Information beinhalten, um endlose scroll-orgien zu vermeiden.

etz....

ich stimme euch zu das barrierefreiheit ein Ziel ist das man anstreben sollte. Dieses Ziel lässt sich aber allein mit (x) HTML nicht erreichen. Denn es ist nicht nur das Design / die optik die sich verändern wird, sondern auch die Information.

ich vergleiche das mal mit Google und vergleichbaren Seiten: Werbebanner werden auf das Surfverhalten des Anwenders hin angepasst (jetzt schon, oder in Zukunft wohl auch auf das Medium mit dem er unterwegs ist)

Die webseite unserer Schule wird am Lokalen Informationsterminal mit ganz anderen Informationen dargestellt als im web. (z.B.: der Stundenplan wird ohne weitere Artikel, werbebanner etz. angezeigt)

[forTeesSake]

wieder greife ich mir den punkt raus zu dem ich wirklich was sagen kann. den rest kann jester besser

Wenn ich dem Kunde erzähle das seine Seite X € mehr kosten wird, weil es ja sein könnte das er irgendwann PDAs & Co verwendet, dann wird er mir sagen das er sich damit "dann" beschäftigen wird, für jetzt interessiert ihn nur das was er haben will und die Kosten dafür.

es ist ja schon schwierig genug den leuten klarzumachen das man lieber jetzt etwas mehr aufwand betreiben sollte, um es später besser zu haben

sehe ich völlig anders. klar kommt es darauf an, wie fit man in sachen css ist, aber nach einiger einarbeitung in das thema erntet man dann die trauben.

ein layout das in den relevanten teilen auf <div> <ul> etc. basiert, ist meiner meinung nach viel schneller zu programmieren als ein tabellen layout.

wenn ich mir überlege wie viel zeit und code ich für ein 3-4 fach verschachteltes tabellenlayout brauche und dem die <div> lösung gegenüberstelle....das ist echt eine riesen zeitersparnis.

und wenn der kunde dann nicht wirklich zufriend ist, bzw. änderungen anm layout hat ist es auch einige male schneller umzustellen, da ich ja normalerweise gar nicht mehr in den quellcode, sondern nur ins css muss...

also zählt dieses argument für mich ganz und gar nicht.

p.s. ich schicke auch mal nen smiley an alle beteiligten. das hier ist ein echt guter und kompetenter thread den aiun und jester da geformt haben. und böse ist da nix im geringsten gemeint.

[geloescht_JesterDay]

Jester, ich weis nicht wie du darauf kommst, das ein Tabellen-Basiertes Layout oder Menü aus Spacer-gifs bestehen muss ^^ Ich rede hier von der logischen Anordnung der Elemente. So kann eine Tabelle dazu dienen, Navigationspunkte oder Menüs 'gleichmäßig' anzuordnen.

Natürlich gibts auch <li> aber sagen wir ich habe eine Element das ich "neben" den Nav-Punkten über die gesamte höhe eines vertikalen Menüs strecken will...dann ist colspan mein größter Freund.

[...]

ich vergleiche das mal mit Google und vergleichbaren Seiten: Werbebanner werden auf das Surfverhalten des Anwenders hin angepasst (jetzt schon, oder in Zukunft wohl auch auf das Medium mit dem er unterwegs ist)

Die webseite unserer Schule wird am Lokalen Informationsterminal mit ganz anderen Informationen dargestellt als im web. (z.B.: der Stundenplan wird ohne weitere Artikel, werbebanner etz. angezeigt)

Das mit dem Spacer.gif war natürlich nur eine Übertreibung bzw. ein Exdtremfall. Aber nimm dir mal die FF-Extension "Fangs ScreenReader Emulator". Damit kannst du dir (ohne einen teuren ScreenReader zu kaufen bzw. die Demoversion zu nutzen, die nach 30Tagen abläuft) eine Seite anzeigen lassen, wir ein ScreenReader sie "sieht" bzw. vorliest.

Hier mal ein Auszug aus Seite 3 unserer Diskussion:

Page has one hundred fifty-one links left bracket CSS right bracket div padding problem dash Seite three dash Fachinformatiker.de dash Mozilla Firefox Table with nine columns and nine rows Link Graphic slash header underline monitor.jpg Link Graphic slash header underline schrift.gif Table with one column and four rows Link Was passiert hier? vertical bar Link Impressum Table end Table with four columns and two rows Table with six columns and one row Link Home Link Forum Link Chat Link Kontakt Link Links Link Downloads Table end Table end Table end Table with two columns and three rows Table with three columns and two rows This page link Graphic Zurück Link Fachinformatiker.de alt plus 1 greater Link Fachliches greater Link Webdesign Link Graphic Seite neu laden left bracket CSS right bracket div padding problem Table end Willkommen, JesterDay. Ihr letzter Besuch war colon two point one one point two zero zero five um twelve colon thirty-eight Uhr Link Private Nachrichten colon Ungelesen zero insgesamt forty-two . Table end Table with eight columns and one row Link Kontrollzentrum Link Hilfe alt plus 5 Link Benutzerliste Link Kalender Link Neue Beiträge alt plus 2 Link Suchen alt plus 4 Link Nützliche Links Link Abmelden Table end Table with two columns and two rows Link Graphic Antwort Table with six columns and one row Seite three von three Link less Link one Link two three Table end Table end Table with four columns and one row Link Themen dash Optionen Link Thema durchsuchen Link Ansicht Table end Table with two columns and four rows Graphic Alt twenty-six point one zero. two thousand five fourteen colon forty-six number Link thirty-one Link tobias dash digital Registrierter Benutzer Link Graphic Benutzerbild von tobias dash digital Reg. dash Datum colon ten point one zero point two zero zero one Ort colon Neuss This page link Graphic tobias dash digital eine Nachricht über ICQ schicken Graphic Standard star aiunmalnensmiliezuwerf star Graphic Grinsen Tja, wer legt fest was aktuell ist, ich würde mal sagen XHTML one point one ist die aktuellste left paren thirty-one Mai two thousand one right paren Empfehlung des Wthree C, also würde ich sagen XHTML one point one ist der momentane Standard. So, die momentan dringend umzusetzende BITV sagt in Anlage Teil one Anforderung five colon Zitat colon Table with one column and one row Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup–Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden. Table end XHTML wurde unter der Beachtung der Accessability Guidelines left paren Link http colon slash slash www.wthree .org slash TR slash WCAGten slash right paren entwickelt und eignet sich somit hervorragend zur Umsetzung der BITV. Ich persönlich finde die BITV nicht haarstreubend, sonder richtig und wichtig. left paren Unbeabsichtigter Reim im letzten Satz right paren Das man bei CSS Zen Gardens Stylesheet austauschen kann, damit das Layout plötzlich anders aussieht sehe ich nicht als herausragende Eigenschaft von CSS an, sondern als besonderes Feature dieser speziellen Seite. Dir und anderen hier sei mal die Slideshow quote Warum Layout mit Tabellen dumm ist quote empfohlen colon Link http colon slash slash seybold.jan dash andresen.de slash index.php underline underline underline underline underline underline underline underline underline underline underline underline underline underline underline underline underline underline Adoptiere auch Du einen Link Thread mit zero Antworten ! List of two items bullet Link www.tobias dash digital.de bullet Link joblist left paren Version zero point one point two right paren mit PHP, MySQL, XHTML one point one und Ajax. Live dash Demo! Check it out! List end

und hier als Vergleich csszengarden:

[geloescht_JesterDay]

Jester, ich sagte nichts davon mit Tabellen zu Layouten, sondern zu Strukturieren.

[...]

Letztlich ist es eine sehr gute sache, seine Seite erstmal mti Tabellen einzuteilen, je nachdem was man machen will.

Aber es ist doch nichts anderes. Dein Strukturieren ist Layouten. Denn du fasst damit den Inhalt so zusammen, wie du ihn auf dem Bildschirm für richtig hälst. Klar mach ich das mit DIVS auch, aber DIVs haben für keine optische Bedeutung und sind sozusagen (unsichtbare) Hilfslinien.

wie du an den ScreenReader Ausgaben siehst, macht es keinen Unterschied ob du mit Tabellen layoutest oder strukturierst (ist für mich ja dasselbe und hab es weiter oben auch schonmal erklärt warum ), Tabellen sind Tabellen und sind nur für Tabellen da.

Klar ist es für dich optisch erstmal egal, aber du solltest von deiner Browseroptik wegkommen und hin zum Inhalt, der von deiner Seite übermittelt wird. Denn das ist das, was den Besucher der Seite Interessiert (Ja, ich kenn auch die Marketing und Vertriebsvorgaben: Das muss aber genau soooo aussehen ), aber letzlich kommt der Besucher nicht auf deine Seite, weil sie so toll aussieht, sondern weil ihn das interessiert, was er da als Inhalt geboten bekommt. Und Inhalt ohne Layout(Strukturierungs)Tabellen ist einfach zu warten, nicht so aufgebläht und für alle und jeden sinnvoll.

Ausserdem sind und waren Tabellen nie zum Layouten (Strukturieren) einer Webseite gedacht. Zukünftige Entwicklungen werden also nicht unbedingt Rücksicht auf Layout Tabellen nehmen, sondern sie werden vorallem nach den vorhandenen Standards gemacht. Das es mit Layouttabellen Probleme gibt, sagst du ja selbst. Auf kleinen Bildschirmen muss man viel scrollen oder sieht die Hälfte nicht. Wäre das keine Tabelle, sondern ein Layout per CSS (und auch ohne fixe Breiten etc. was eigentlich auch eine "Sünde" ist), würdes du vielleicht scrollen müssen, aber nur nach unten und das ist allemal angenehmer als nach rechts und dann am Ende wieder zurück und nach unten.

Wie es bei automatischer auswertung der Seite aussieht, siehst du ja am ScreenReader Beispiel. Wer weiss, ob es nciht in Zukunft viel mehr Gelegenheiten gibt, in denen Seiten von Programmen ausgewertet werden (Hab keine ahnung wozu, aber ich dachte vor 10 Jahren auch noch nicht an Internet auf dem Handy).

Ausserdem ist ein sauberes CSS-Layout auch gut für Suchmaschinen und die Platzierung im Index, und das ist ja ein Argument, was auch die Leute vom Marketing überzeugen sollte.

EDIT: Tabellen haben ja neben der optischen Bedeutung auch eine semantische Bedeutung, sie fassen Daten in einer bestimmten Art und Weise zusammen. durch Layouttabellen wird diese Semantik aber total unter den Tisch fallen gelassen. Das war zu Anfangszeiten vielleich noch zu verzeihen, ist es aber heutzutage (und in Zukunft, das sag ich jetz mal so) auf jeden Fall nicht mehr.

[geloescht_JesterDay]

Zu meinem letzten Beitrag... also entweder bin ich blind oder ... naja... ich dachte das wär ne Antwort auf den letzten Beitrag. Scheint aber schon älter gewesen zu sein (oder irgendwie is der Beitrag jetzt weg).

Also irgendwas is da wohl durcheinander gekommen (oder ich bin es, was ich eher glaube)... wollt ich nur mal anmerken

[Aiun]

*g*

was auch immer.

Ich lese mir z.Z. ein paar Artikel durch und versuche das mit meinen eigenen Erfahrungen und beispielen anderer in einklang...oder sagen wir in Beziehung zueinander zu bringen.

Ich habe mir kürzlich den Fahrplan der deutschen bahn für bestimmte züge auf den PDA geladen. Format: PDF, struktur: Tabelle.

es ist schrecklich. mich interessieren die informationen nicht, weil sie gar nicht sinnvoll 'darstellbar' sind.

Ein Abfrageformular das mich fragt, Wann, wohin oder so wäre da um einiges besser.

Vor wenigen Minuten Frage mich ein kollege, wie er folgendes realisieren kann:

drei div-Layer. davon zwei links untereinander und das dritte rechts daneben.

das dritte soll immer so hoch sein wie die beiden anderen.

mit einer Tabelle weis ich sofort wie das geht, aber wie denn bitte mit Div-Layern ?

Habe auf einer eigenen Seite einen Kalender, 4 Wochen. Jede Woche 1 spalte, darin eine eigene Tabelle mit 1 Zeile für jeden Tag.

wie könnte ich das mit Div-Layern realisieren ? - also das alle 4 Spalten die gleiche breite haben ?

im moment sehe ich einfach viele dinge, die nur mit CSS/DIv nicht zu realisieren wären.

Und wie gesagt, ich bin der Meinung, das seiten für PDA oder andere lesegeräte auch darauf ausgerichtet sein sollten. Der Informationsinhalt, die Informationsdichte und Informationsstruktur kann abweichen. und ich möchte eigentlich nicht 100 Div-LAyer verstecken um je nach lesegerät zu entscheiden was angezeigt wird.

Da ist es 'effektiver' eine Datenbank oder Datei-DAtenquelle zu machen, und dann für jedes Lesegerät eine eigene HTML-Datei zu erzeugen.

muss jetzt mal zum Tierarzt (nicht wegen mir...wirklich )

später mehr.

[geloescht_JesterDay]

Vor wenigen Minuten Frage mich ein kollege, wie er folgendes realisieren kann:

drei div-Layer. davon zwei links untereinander und das dritte rechts daneben.

das dritte soll immer so hoch sein wie die beiden anderen.

mit einer Tabelle weis ich sofort wie das geht, aber wie denn bitte mit Div-Layern ?

Kommt jetzt darauf an, was in dem rechten div zu sehen sein soll bzw. warum der so hoch sein soll, wie die anderen beiden? Ein Div ansich hat erstmal die Höhe, die sein Inhalt hat. Zuweisen kannst du ihm auch fixe Größen (150px), was man aber ansich vermeiden sollte. Oder du nimmst eine relative Größe (in %), die bezieht sich aber auf das Elternelement (height=100% heisst nicht, so groß wie der Anzeigebereich (Viewport), sondern so groß wie das darüberliegende Element.

body { height: 100%; }

.test { height: 100%; Margin-top: 200px; }

...

<body>

  <div class="test">

    Hallo Welt!

  </div>

</body>

Das würde z.B. ein Div erzeugen, dass 200px größer ist nach unten, als der Browser (ist jetz aber nich getestet, also nich darauf festnageln. Sollte aber so sein.). Das hat den hintergrund, dass der ViewPort des Anzeigegerätes im HTML-Standard erstmal nicht berücksichtigt ist. Wozu auch? HTML beschreibt ein Dokument und ein Dokument ist ein Dokument, egal wo und wie es angezeigt wird. Im Gegensatz zu einen Word-Dokument (was im Prinzip nichts anderes ist als ein HTML Dokument) ist dabei auch die Ausgabegröße nicht festgelegt. Ein Word-Dokument, was du mit einer A4 Einstellung machst, sieht auch komisch aus, wenn du das Papier auf A5 verkleinerst. In HTML gibt es aber keine Papierformate. Von daher gibt es auch keine Größenfestlegung für die Ausgabe (ausser absolute Positionierung und Pixelangaben bei der Größe/Höhe. Was ja aber nicht wirklich schön oder Sinn der Sache ist). Ok, zum Thema: Um ein DIV (mit z.B. einem Hintergrund) über eine gewisse Höhe zu strecken (die von allen divs auf der Seite) musst du die DIVs entsprechend Aufbauen. Also das Hintergrund-DIV als Container für alle anderen DIVs und nicht den Hintergrund dem DIV zuweisen, der den Inhalt hat. Das müsste ung. so aussehen (auch nicht getestet):

...

#hintergrund { background-image: url(../image.jpg); 

                     background-repeat: repeat-y;

                     background-position: right; }

#Box { float: left; width: 10em; }


#Inhalt { margin-left: 10em; }


...


  <div id="hintergrund">

    <div id="Box>

    </div>

    <div id="Box">

    </div>

    <div id="Inhalt">

    </div>

  </div>

Die herangehensweise an ein Design mit DIVs ist eben eine ganz andere als mit Tabellen. Um da rein zu kommen, muss man sich erstmal vom Tabellendesign und dem Denken im Tabellendesign lösen. Das ist nicht unbedingt einfach, sagt keiner. Und es sagt auch keiner, dass alle Wünsche einfach so mit DIVs umgesetzt werden können. Mit CSS3 soll vermehrt auf Layout und ähnliches eingegangen werden. Zur Zeit muss man halt aber auf jeden Fall erstmal vom "klassischen Design" weg. Das heisst aber nicht, dass das schlechter sein muss. Und DIVs sind nicht deswegen da, um dir Tiparbeit o.ä. zu sparen (im Gegensatz zu Tabellendesign), sondern deswegen, weil DIVs keine grafischen elemente mit eigener Bedeutung sind (wie Tabellen) und genau für Layoutzwecke da sind (Tabellen wiederum sind das nicht).

[Aiun]

Deine Erläuterung zu den genannten Punkten werte ich eher 'für' Tabellen.

Mir ist rel. egal, ob an Divs eine andere herangehensweise ist oder nicht. Wenn ich eine Webseite entwerfe, dann weis ich "da" kommt die Navigation hin, "da" kommt der Inhalt hin.

Natürlich kann sich das dann noch verschieben.

Wenn ich jetzt, wie angedeutet, zwei Felder unteinander und eins daneben haben will, dann ist das so und wenn das mit Divs nicht möglich ist, dann nehme ich tabellen.

<table>

<tr>

<td></td>

<td rowspan="2">

</tr>

<tr>

<td></td>

</tr>

</table>

Wenn ich etwas auf einem PDA darstellen will, wird drüber nachgedacht, wie die informationen dort 'sinnvoll' dargestellt werden. Das kann in ganz anderen Formen resultieren als es für einen Bildschirm wäre.

Wie ich bereits zuvor angemerkt habe, HTML "funktioniert" nur, weil festgelegt ist, wie ein Element zu behandeln / zu zeichnen ist.

Was wäre denn, wenn ich in der PDA-Version einen bestimmten Text "nicht" als Link haben will ?

Frage:

Ignoriert ein Screenreader versteckte Divs ? ... ansonsten ist dieser Punkt für mich nebensächlich, denn dann schreibe ich "wirklich" in den HTML Code nur rein, was rein soll.

----

andere sache,

ich habe ein Problem damit, das unentwegt 'Komponenten' (darstellung, Inhalt, verarbeitung) voneinander getrennt wird.

Ich arbeite z.Z. meistens mit PHP und habe dort ein Framework zusammengestellt, mit dem ich die Ebenen ganz gut trennen kann...ich benutze es, weil ich den Sinn darin sehe.

Nun treffe ich auf datenbankler die faseln, das alles in stored procedures zu speichern.

das heißt ich habe eine Ebene die Daten besitzt und daten verwaltet.

Dann haben wir eine 'Programmiersprache' (sagen wir, etwas das den namen verdient), die aus mehreren Schichten besteht, weiter geht es in HTML, das heist neben dem von PHP erzeugten HTML muss ich noch ein CSS schreiben...

CSS ist 'schön' wenn ich darin dinge definieren kann, die ich auf mehreren HTML seiten brauche. Aber ansonsten "muss" ich einen gewissen darstellungsstandard definieren, damit HTML überhaupt funktioniert. und das ist nunmal <a> ist ein Link ("ich kann draufklicken") <li> ist eine Liste ("und wird als liste dargestellt")

Aber wenn es darum geht barrieren zu lösen, das ist mit HTML an sich nicht möglich.

Wenn ich XML habe, da können die Informationen unabhängig strukturiert werden. Aber über eine HTML-Umwandlung (XSLT z.b.) ist überhaupt erst die Darstellung möglich

puh...sch**** schule da kommt man immer auf so rebellische gedanken.

[Aiun]

zum Beitrag zuvor:

ich habe nichts dagegen wenn etwas in Schichten geteilt wird, aber ich glaube wir übertreiben etwas, es an X stellen in Y schichten zu teilen.

zweites:

einem Kollege ist vorhin aufgefallen:

Ab wann ist denn eine Tabelle erlaubt ?

die Felder eines Formulars sollen in Tabellenform angezeigt werden. Zur barrierefreiheit

das ganze vielleicht mit divs ?

nun besteht jede "Zeile" aus einem Titel und einem Eingabefeld.

Jedes Titel-Feld soll gleich breit und jedes Feld der input-Spalte gleich breit sein.

das ganze in % angaben vom verfügbaren Platz.

somit landen wir wieder bei dem Problem, das mit Divs die beziehung zwischen den Feldern verloren geht (alle Titelfelder gleich breit) und hier geht es eben darum "keine" feste breite benutzen zu müssen. sondern z.B. so breit wie nötig, aber so schmal wie möglich.

[geloescht_JesterDay]

Deine Erläuterung zu den genannten Punkten werte ich eher 'für' Tabellen.

[...]

Wie ich bereits zuvor angemerkt habe, HTML "funktioniert" nur, weil festgelegt ist, wie ein Element zu behandeln / zu zeichnen ist.

[...]

Frage:

Ignoriert ein Screenreader versteckte Divs ? ... ansonsten ist dieser Punkt für mich nebensächlich, denn dann schreibe ich "wirklich" in den HTML Code nur rein, was rein soll.

Nein, die sind aber nciht als Wertung für Tabellen als Layoutmittel zu verstehen.

HTML ist festgelegt, um einen Text auszuzeichnen, also indem du bestimmten Textabschnitten über Tags eine besondere Bedeutung gibst. Das hat aber mit der Darstellung ansich erstmal nichts zu tun. Eine Überschrift ist eine Überschrift und hat eine besondere Bedeutung für den Text, dabei ist es vollkommen egal, ob die jetzt 2 oder 3 mal so groß ist, wie der Rest und auch ob sie rot, grün oder blau dargestellt wird. Um die Darstellung kümmert sich allein der Browser, und um dem Browser deine besonderen Wünsche mitzuteilen, wie er etwas darstellen soll, lieferst du die CSS-Datei mit.

Und im HTML-Standard ist eben auch festgelegt, dass Layout-Informationen nichts im Text zu suchen haben und in CSS ausgelagert gehören. HTML "funktioniert" aber nunmal nur, wenn sich alle daran halten und nicht aus Bequemlichkeit auf Dinge zurückgreifen, die nie für das gedacht waren, wofür sie genutzt werden.

Und natürlich ignoriert ein ScreenReader versteckte Divs. Es gibt ja gerade dafür spezielle CSS Auszeichnungen:

<link rel="stylesheet" type="text/css" href="/css/braille.css" media="braille" ...

für die Ausgabe in "Blindenschrift"

Aber ansonsten "muss" ich einen gewissen darstellungsstandard definieren, damit HTML überhaupt funktioniert. und das ist nunmal <a> ist ein Link ("ich kann draufklicken") <li> ist eine Liste ("und wird als liste dargestellt")

... und <table> ist nunmal eine Tabelle und kein Layout Element ("Ich zeige damit tabelarische Daten an").

zweites:

einem Kollege ist vorhin aufgefallen:

Ab wann ist denn eine Tabelle erlaubt ?

die Felder eines Formulars sollen in Tabellenform angezeigt werden. Zur barrierefreiheit

das ganze vielleicht mit divs ?

nun besteht jede "Zeile" aus einem Titel und einem Eingabefeld.

Jedes Titel-Feld soll gleich breit und jedes Feld der input-Spalte gleich breit sein.

das ganze in % angaben vom verfügbaren Platz.

somit landen wir wieder bei dem Problem, das mit Divs die beziehung zwischen den Feldern verloren geht (alle Titelfelder gleich breit) und hier geht es eben darum "keine" feste breite benutzen zu müssen. sondern z.B. so breit wie nötig, aber so schmal wie möglich.

Eine Tabelle ist dann erlaubt, wenn es darum geht, eine Tabelle darzustellen, ist doch ansich einleuchtend

label { width: 4.5em;

	float: left;

	text-align: right;

	margin: 0 0.5em 10px 0;

	clear: both;

	color:#091D83; }


input { margin-bottom: 5px; }


...


<label for="Feld1">Feld1:</label>

<input type="text" id="Feld1" name="Feld1" />

Das is aus einer Seite von mir und tut genau das, was du willst.

Dazu brauchst du nichtmal ein Div. Du reduzierst CSS vielzusehr auf deine Erfahrung mit Tabellen. Es geht dabei nicht nur darum, alles in irgendwelche Divs zu packen und die dann anzuordnen wie du das mit Tabellen und Tabellenzellen machst. Klar kommt es auch manchmal auf die Anordnung von Divs an, aber CSS sind nicht nur Divs.

Ach ja... wie schonmal gesagt, errreichst du nur mit dieser Konstruktion eine wirkliche Zusammengehörigkeit von Label und Textfeld. Ein Klick auf den Text "Feld1:" befördert den Cursor nämlich ins Textfeld.

Ich fand es anfangs auch sehr schwer und manchmal umständlich etwas ohne Tabellen und nur mit CSS zu machen, aber es geht. Auch wenn es manchmal länger dauert, bis man es hinbekommen hat. Das ist aber nur anfangs so und je mehr man damit macht, desto leichter geht es einem von der Hand.

Du legst einfach ein Raster über den Bildschrim und da klebst du Bausteine drauf, die dann deine Tabellen und Zellen werden. Wenn du sowas mit CSS machen willst, musst du nicht in Zellen denken, sondern in Boxen. Und jeder Inhalt deiner Seite ist schonmal in einer Box (egal ob mit Div drumrum oder nicht - angefangen mit den Body Tag, als höchste Parentbox).

EDIT:

Beim Input kannst du ober auch noch eine Breite mit angeben, also

input { margin-bottom: 5px; width: 15em; }

oder

input:text { margin-bottom: 5px; width: 15em; }

nur für den type="text"

[kills]

EDIT:

Beim Input kannst du ober auch noch eine Breite mit angeben, also

input { margin-bottom: 5px; width: 15em; }

oder

input:text { margin-bottom: 5px; width: 15em; }

nur für den type="text"

Es muss

input[text] { margin-bottom: 5px; width: 15em; }

heissen oder?

Ausserdem geht dieser CSS Selector im IE nicht...

Gruß,

Markus

[geloescht_JesterDay]

Es muss

input[text] { margin-bottom: 5px; width: 15em; }

heissen oder?

Ausserdem geht dieser CSS Selector im IE nicht...

Hab das nur aus dem Kopf gemacht (und wohl den "falschen" Punkt genommen ), aber AFAIK geht:

input.text

input.radio

input.checkbox

etc.

[Aiun]

<table>

<tr>

<td>Name</td>

<td><input></td>

</tr>

<tr>

<td>ganz langer Name</td>

<td><input3></td>

</tr>

<tr>

<td>Name2</td>

<td><input2></td>

</tr>

</table>

realisiere ich das mit Divs, sind die Felder der Spalte für namen unterschiedlich breit. Was aber wenn ich alle gleich breit, auf maximal nötiger breite haben will ? ich verstehe durchaus was du meinst. Aber es heißt nicht umsonst "Webdesign" Hab schon mehrfach Seiten von Designern bekommen, wo es darum geht es "so" aussehen zu lassen und nicht anders. Und das ist auch vollkommen in Ordnung. Nehmen wir mal das Beispiel auto, ich baue kein Auto weil ich per Auswechseln eines elementes ein ganz anderes Auto schaffen kann. Wenn ich einen Porsche baue, dann gehe ich nicht davon aus, das da auch ein zugang und platz für Rollstühle rein muss. Anders bei einem großraumer, da ist die gelegenheit (oder die Anforderung) das sowas geht. Posts wie hier im Forum per Tabelle anzuordnen ist völlig in Ordnung. Sobald CSS sowas wie

<table>

<tr><td rowspan="2">hohe Spalte</td>

<td>Feld A</td>

</tr>

<tr>

<td>Feld B</td>

</tr>

</table>

kann, oder ich 'relativ' zur Bildschirmgröße arbeiten kann bin ich bereit da mehr auf Divs umzusteigen.

Bis dahin, setze ich Divs ein, wo Aufwand und Ergebnis in einem brauchbaren gleichgewicht stehen. und das bedeutet nicht, krampfhaft auf Divs umzusteigen weil es irgendwo steht. Ich mache mir eher gedanken darüber wo es sinnvoll ist.

Wenn ich z.B. eine zentrale Datenquelle / ein serverseitiges Script habe, würde ich wohl eher für verschiedene Medien auch verschiedene HTML-Seiten erstellen. Da sie unabhängiger voneinander sind.

Was denn wenn ich palm-Benutzer besondere / andere formulare zeigen will ?

was wenn sie andere "bilder" haben sollen ? (soweit ich weis kann man den src von Img nicht durch div veändern)

ich generiere lieber HTML dynamisch, als den HTML code soweit aufzublähen das ich für alle Medien, alle Informationen zusammen liegen habe, damit ich sie in jeder form wiedergeben kann. Das erinnert mich zu sehr an PHP Coder die alles in eine Datei schreiben ^^

Ich versuche z.Z. ein Redesign einer meiner Seiten und werde da meine neuerworbenen CSS Kenntnisse umsetzen. Was mit sicherheit noch nicht dazu führt, das Tabellen aus dem Layout verschwinden oder so ^^

Werde wohl als nächste mal ein CSS bzgl. Drucken ausprobieren.

[geloescht_JesterDay]

<table>

<tr>

<td>Name</td>

<td><input></td>

</tr>

<tr>

<td>ganz langer Name</td>

<td><input3></td>

</tr>

<tr>

<td>Name2</td>

<td><input2></td>

</tr>

</table>

realisiere ich das mit Divs, sind die Felder der Spalte für namen unterschiedlich breit. Was aber wenn ich alle gleich breit, auf maximal nötiger breite haben will ? ich verstehe durchaus was du meinst. Aber es heißt nicht umsonst "Webdesign"

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">

	<!--

	label { width: 9em;

	  float: left;

	  text-align: right;

	  margin: 0 0.5em 10px 0;

	  clear: both;

	  color:#091D83; }

	input { margin-bottom: 1em; }

	//-->

  </style>

  </head>

  <body>

  <label for="input1">Name</label>

	<input type="text" id="input1" /><br />

  <label for="input2">ganz langer Name</label>

	<input type="text" id="input2" /><br />

  <label for="input3">Name2</label>

	<input type="text" id="input3" /><br />  

  </body>

</html>

Wenn du bei Tabellen alles in 1 Spalte packst, sieht es auch nicht so aus wie du willst. Du musst eben immer das richtige tun, dann klappt es auch mit dem Nachbarn

Und Webdesign... entschuldige, aber ich finde die bezeichnung Webdesigner nicht unbedingt als etwas, worauf ich stolz sein würde. Das liegt daran, was bei manchen "Webdesignern" an HTML rauskommt, fürchterlich. Gepusht wurde das ja auch vom Arbeitsamt, als jeder den sie nicht vermitteln konnten zum "Webdesigner" fortgebildet wurde. Will damit keinen beleidigen (ich kenne sogar jemand, der das mitgemacht hat und der jetzt selbstständig ist, als "Webdesigner". Allerdings kenne ich keine Seiten von ihm...), aber bei HTML (Webdesign) ist es eben nciht egal was man macht, Hauptsache das was rauskommt sieht aus wie ich es will.

Um mal bei deinem autovergleich zu bleiben: Es gibt bestimmt genug Leute, die ihr Auto in der eigenen Garage am liebsten irgendwie verändern oder umbauen würden, damit es dann "genauso aussieht". Dennoch dürfen oder können sie das nicht, weil es auch für Autos gewisse Regeln gibt, was man tun darf mit denen und was nicht. Bei HTML streitest du das aber hier wehement ab. alles was du tun willt ist gut und richtig, Hauptsache, es kommt irgendwas raus. Und dabei spielt es keine Rolle, ob deine Seite auch für zugänglich ist (wie in deinem Beispiel ein POrsche für Rollstuhlfahrer). Auch ein Porschedesigner muss sich an Vorgaben vom TÜV halten, auch wenn er vielleicht ursprünglich was ganz anderes im Kopf hatte. Nur weil etwas "designt" wird, heisst das nicht, es gibt keine Regeln. Und Tabellen als Layout ist eben keine Regel bzw. es ist indirekt (nicht implizit, wenn man mal von der BITV oder Accessebility Regeln absieht) verboten. Es wurde nur von allen genutzt, aber das macht es genausowenig richtig, wie es Disclaimer auf der Webseite sind

IMHO ist das fehlen der Unterstützung von display:inline-block im Moment eines der größten Mankos bei der CSS Umsetzung (nur Opera kann das mittlerweile). Bei den anderen (also IE und FF, die anderen weiss ich nciht wirklich) gibt es nur Inline oder Block. Inline heisst, ganz normal im Text und damit sind Breiten-, Höhen und ähnliche angaben dort nicht erlaubt (bzw. werden ignoriert) und Block heisst, ein Blockelement, mit Zeilenumbruch davor und danach. Da sind aber Größenangaben u.ä. zugelassen.

Inline-Block ist die Kombination von den beiden, also ein Block im Text.

Ich bin der Meinung, damit wären ein Großteil der (Design-)Probleme, die man irgendwie anders umgehen musst bis jetzt, gelöst.

Angeblich soll inline-block ja offiziell im CSS3 Standard kommen, aber komischerweise kenn ich das schon länger (http://www.css4you.de z.B.) und und dinge, wie abgerundete Ecken, die noch nciht offizieller Bestandteil von CSS sind, sind da extra behandelt. Naja... hoffen wir auf die Zukunft.

Bis dahin gibt es dennoch weniges, was der Designer nicht ohne Tabellen hinbekommt, nur ist das evtl. mit mehr Arbeit verbunden (vorallem erstmal das umgewöhnen auf CSS) oder ein gewisses Anpassen des Designs. Es gibt ja auch wenige Designer, die andere Dinge so designen, wie vor 40 Jahren z.B. (von manchen wenigen "Retros" mal abgesehen. Die sind aber auch nur oberflächlich wie früher.)

[geloescht_JesterDay]

Sobald CSS sowas wie

<table>

<tr><td rowspan="2">hohe Spalte</td>

<td>Feld A</td>

</tr>

<tr>

<td>Feld B</td>

</tr>

</table>

kann, oder ich 'relativ' zur Bildschirmgröße arbeiten kann bin ich bereit da mehr auf Divs umzusteigen.

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">

	<!--

	.leftbox { width: 9em;

	float: left;

	text-align: right;

	margin: 0 0.5em 10px 0;

	clear: both; }

	//-->

  </style>

  </head>

  <body>

<div class="leftbox">hohe Spalte<br />mit viel Text<br />und auch noch mehr</div>

<div>Feld A<br />Feld B</div>

  </body>

</html>

Herzlichen Glückwunsch zum Umstieg

Und relativ zur Bildschirmgröße arbeitest du allesnfals mit Hilfe von Javascript Relativ zum Body arbietest du mit %-Angaben.