Tabellenfreies CSS-Layout

[Ingo Turski]

Hi,
ich denke, Du siehst das zu schwarz. Sicher kann man nicht *alle* Layouts mit einem starren HTML-Gerüst umsetzen, aber doch ziemlich viele und ziemlich unterschiedliche.

Läßt sich aber relativ einfach "beweisen":

Folgende Struktur:
<div id="text">Blahblah....</div>
<div id="image"><img src...></div>

Abgesehen von der hier nun wirklich unangemessenen Auszeichnng ist dieser "Beweis" denkbar schlecht gewählt. Aber weiter unten hast Du ja diesen 'Beweis' bereits selbst entkräftet:

Was die Reihenfolge angeht: Da sind die Anforderungen deiner Designs entscheidend. Da treten dann aber auch die Probleme auf, die ich ohen schon erwähnte: Wenn du ein Bild im ersten Textabsatz links floaten lassen willst, dann mußt du das Bild zwingend als allererstes _in_ diesem Textabsatz kommen lassen, oder direkt _davor_.

Und:

Ergo bedeutet das: Du kannst nicht _alles_ formatieren, wenn die HTML-Struktur nicht danach ist. Was im HTML zuerst kommt, und was danach, hat auch beim Einsatz von CSS wichtigen Einfluß.

richtig. Nur kann man so vorausschauend planen und die Elemente in eine Reihenfolge setzen, die den meisten gängigen Layoutwünschen entgegenkommt. Genau hier steckt die eigentliche Aufgabe, um so etwas umzusetzen.

Die Texte vom Zengarden sind ja alle buchstabengenau festgelegt. Aber hast du schon mal eine Webseite mit CMS gesehen, bei der die Überschriften allesamt aus einem vorher festgelegten, einmal designten Fundus entnommen wurden? Also braucht man Hintergrundbilder gar nicht erst zu versuchen (außer man generiert sie dynamisch), sondern muß HTML-Text verwenden.

Dieses HTML ist doch absolut nichtssagende DIV/SPAN-Suppe. Ohne CSS kann ein Browser da keine unterscheidungskräftigen Formatierungen draus machen, und Suchmaschinen freuen sich auch nicht.

Zugegeben. Aber ich würde dennoch sagen, daß gerade eine vernünftige und dem Inhalt angemessene HTML-Auszeichnung die Grundlage für eine Vielfalt an Layouts bietet. Natürlich nicht in dem Umfang wie bei Zengarden - muß es aber auch nicht.

Designs mit Float sind vermutlich genau die Designs, die du gerade NICHT mit nur einer HTML-Struktur realisieren kannst.

Wieso? Gerade diese Technik eignet sich am besten dazu - und auch dazu, unterschiedliche Inhalte flexibel genug darzustellen.

Wohl kannst du das zwischen Überschrift und Textblock platzierte Bild absolut, relativ oder sonstwie positionieren. Und du kannst der Überschrift und dem Textblock auch links entsprechend viel Margin geben und das Bild etwas weiter hochsetzen, um einen so ähnlich aussehenden Effekt zu erzielen, wie ich oben schrieb: Bild auch neben der Überschrift. Aber das Resultat ist nicht dasselbe.

Zwar ein wirklich kompliziert konstruierter und in der Realität eher selten vorkommender Fall, aber selbst der wäre ohne Eingriff ins HTML realisierbar: unter der (üblichen) Voraussetzung, daß die Überschrift sich oben befindet, kann man sie absolut postionieren und das Bild dann ebenfalls. Der Rest kann dann über margin auf Abstand gehalten und im Textfluß verbleiben.

erstens macht es die Sache wirklich ziemlich kompliziert, weil man beim Erstellen des HTML eigentlich alle Unwägbarkeiten von CSS, der mangelhaften Browserunterstützung und der diversen Notwendigkeiten der einzelnen Designs berücksichtigen muß.

Wieso? Lediglich die Reihenfolge der Elemente wäre zu beachten Und was haben die Unwägbarkeiten von CSS und deren mangelhafte Browserunterstützung mit dem HTML zu tun? Ich habe bisher jedes CSS-Problem über CSS-Anpassungen und ggfls. -Hacks gelöst, aber mußte doch die HTML-Auszeichnung deswegen nicht ändern.

Und zweitens: Womit anfangen? Das CSS erfordert existierendes HTML. Das HTML aber so anzupassen, dass es mit allen Designs funktioniert, erfordert existierdendes CSS.

Das sehe ich nicht so. Natürlich fange ich mit dem Inhalt an. Überlege mir, welche HTML-Elemente angebracht sind. Hierbei berücksichtige ich (inzwischen schon fast automatisch) die Reihenfolge für eine spätere CSS-Formatierung. Das CSS kommt zum Schluß.
Wie sollte denn ein wirklich sinnvoller HTML-Code zustande kommen, wenn ich diesen anhand des CSS und nicht des Inhaltes erstelle?

Das eigentliche Problem sehe ich daher nicht im Zusammenspiel von HTML und CSS, sondern vielmehr darin, ob ein universeller HTML-Code tatsächlich die später möglichen Inhalte aufnehmen kann und adäquat auszeichnet. Nur ist das wieder ein Schritt weiter - der hier noch garnicht angesprochen wurde und für das reine Layoutproblem eigentlich nicht relevant ist.

freundliche Grüße
Ingo