nicht angemeldet
Tabellenfreies CSS-Layout
Hallo Forum,
ich erarbeite gerade ein Konzept für ein CMS bei dem die Ausgabe des Frontends als tabellenfreies HTML erfolgen soll. Das Design selbst soll dann über CSS gesteuert werden. Jeder CMS-Kunde soll einen in der Struktur vollkommen identischen HTML-Output erhalten.
Die Hauptanforderung an die Struktur ist daher, dass damit "jedes" Design umsetzbar ist. An einem konkreten Beispiel möchte ich mein Problem dabei erläutern und hoffe auf einige hilfreiche Tipps durch Euch.
Nehmen wir also mal einen immer wiederkehrenden Block mit einem Image (I), einem Titeltext (T) und einem Beschreibungstext (B). Diesen Block kann ich theoretisch auf beliebige Art und Weise strukturieren, zum Beispiel:
a.)
+--------+------------+
| IIIIII | TTTTTTTTTT |
| IIIIII | |
| IIIIII | BBBBBBBBBB |
| IIIIII | BBBBBBBBBB |
| IIIIII | BBBBBBBBBB |
| IIIIII | BBBBBBBBBB |
+--------+------------+
b.)
+------------+--------+
| TTTTTTTTTT | IIIIII |
| | IIIIII |
| BBBBBBBBBB | IIIIII |
| BBBBBBBBBB | IIIIII |
| BBBBBBBBBB | IIIIII |
| BBBBBBBBBB | IIIIII |
+------------+--------+
c.)
+---------------------+
| TTTTTTTTTTTTTTTTTTT |
| |
| IIIIII BBBBBBBBBBBB |
| IIIIII BBBBBBBBBBBB |
| IIIIII BBBBBBBBBBBB |
| IIIIII BBBBBBBBBBBB |
| BBBBBBBBBBBB |
| BBBBBBBBBBBBBBBBBBB |
| BBBBBBBBBBBBBBBBBBB |
+---------------------+
d- unendlich) ...
Die Frage ist nun, wie ich den HTML-Output strukturiere, damit Image (I), Titeltext (T) und Beschreibungstext (B) in jeder beliebigen Darstellungsform angezeigt werden können. Nochmal, ganz wichtig: der HTML-Output selbst sollte für alle CMS-Kunden mit ihren verschiedenen Layouts immer gleich bleiben!
So?
A.)
<div class="block">
<img class="image" src="...">
<span class="titeltext">...</span>
<span class="beschreibungstext">...</span>
</div>
Oder so?
B.)
<div class="block">
<span class="titeltext">...</span>
<img class="image" src="...">
<span class="beschreibungstext">...</span>
</div>
Oder so?
C.)
<div class="block">
<span class="titeltext">...</span>
<span class="image"><img src="..."></span>
<span class="beschreibungstext">...</span>
</div>
Gibt es überhaupt den Königsweg? Oder kann ich sowieso nur innerhalb eines bestimmten Rahmens "beliebige" Layouts mit einer fixen HTML-Struktur ermöglichen? Mit welchen Mitteln kann ich es so flexibel wie möglich machen?
Bin für jeden Ratschlag dankbar, wünsche ein schönes Wochenende,
Anders
-
Hallo Anders,
---
ich erarbeite gerade ein Konzept für ein CMS bei dem die Ausgabe des Frontends als tabellenfreies HTML erfolgen soll. Das Design selbst soll dann über CSS gesteuert werden. Jeder CMS-Kunde soll einen in der Struktur vollkommen identischen HTML-Output erhalten.
Die Hauptanforderung an die Struktur ist daher, dass damit "jedes" Design umsetzbar ist. An einem konkreten Beispiel möchte ich mein Problem dabei erläutern und hoffe auf einige hilfreiche Tipps durch Euch.
---
Genau so etwas habe ich schon programmiert, auf meiner Seite einfach mal den Styleswitcher benutzen oder die Referenzen unter Info anschauen.
http://www.papoo.de
Das Design ist mit Hilfe von CSS absolut!! flexibel.
Viele Grüße,
Carsten
-
Hallo Carsten,
Genau so etwas habe ich schon programmiert, auf meiner Seite einfach mal den Styleswitcher benutzen oder die Referenzen unter Info anschauen.
http://www.papoo.de
Das Design ist mit Hilfe von CSS absolut!! flexibel.
danke, ich gucke es mir gleich mal an!
Schönes Wochenende schonmal, Anders
-
-
Moin!
Die Frage ist nun, wie ich den HTML-Output strukturiere, damit Image (I), Titeltext (T) und Beschreibungstext (B) in jeder beliebigen Darstellungsform angezeigt werden können. Nochmal, ganz wichtig: der HTML-Output selbst sollte für alle CMS-Kunden mit ihren verschiedenen Layouts immer gleich bleiben!
Das geht nicht!
Ok, bei deinem Beispiel hier mit nur drei Elementen geht es vielleicht doch irgendwie. Aber das bezweifle ich doch sehr.
Klar, es gibt so lustige Spielseiten wie http://www.csszengarden.com, auf denen mit ein-und-demselben HTML-Text tausende von Designs realisiert werden. Aber diese Designs ordnen sich ja allesamt der Prämisse unter, am HTML-Text nichts verändern zu dürfen. Ich bin sicher, dass es ungefähr tausendmal mehr Designs gibt, die sich mit diesem HTML-Text gerade NICHT umsetzen lassen.
Abgesehen davon:
<div class="block">
<img class="image" src="...">
<span class="titeltext">...</span>
<span class="beschreibungstext">...</span>
</div>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. Benutze doch ordentliche HTML-Tags: Überschriften kommen in <h1> bis <h6>, Textblöcke in <p> und so weiter.
Gibt es überhaupt den Königsweg? Oder kann ich sowieso nur innerhalb eines bestimmten Rahmens "beliebige" Layouts mit einer fixen HTML-Struktur ermöglichen? Mit welchen Mitteln kann ich es so flexibel wie möglich machen?
Templates benutzen!
Der Benutzer gibt seine Inhalte als abstrakte Elemente ein: Bild, Überschrift, Text. Diese Elemente werden in ein HTML-Template eingesetzt, welches an den für das grafische Erscheinungsbild der Seite notwendigen Stellen Platzhalter besitzt, um diese Elemente aufzunehmen, und enthält ansonsten nur die richtige HTML-Struktur.
- Sven Rautenberg
-
Hallo Sven,
Das geht nicht!
hm, das höre ich ja nicht so gerne ;)
Klar, es gibt so lustige Spielseiten wie http://www.csszengarden.com, auf denen mit ein-und-demselben HTML-Text tausende von Designs realisiert werden. Aber diese Designs ordnen sich ja allesamt der Prämisse unter, am HTML-Text nichts verändern zu dürfen. Ich bin sicher, dass es ungefähr tausendmal mehr Designs gibt, die sich mit diesem HTML-Text gerade NICHT umsetzen lassen.
Ok, das ist ja schonmal eine Aussage, es geht also nicht vollkommen universal. Das Konzept von csszengarden ist aber genau das, was mir vorschwebt - ich bin sogar erst über csszengarden auf die Idee gekommen. Sagen wir mal so: ich muss nicht wirklich JEDES Design damit umsetzen können, aber so viele wie irgend möglich!
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. Benutze doch ordentliche HTML-Tags: Überschriften kommen in <h1> bis <h6>, Textblöcke in <p> und so weiter.
Die CSS fehlen natürlich, habe ich der Übersicht halber nicht dazu geschrieben. Mit den h1-h6 und den "p"s leuchtet auch ein, nur: ist das schon ausreichend um möglichst flexibel viele Designs damit umzusetzen? Gibt es weiter nichts zu beachten, als dass Texte in "p"s kommen, Titel in h1-h6, Images gar nicht umfasst werden? Was ist mit der Reihenfolge, in der ich Elemente zu einander anordnen sollte? Folgt die einfach nur dem Textfluss, also Titel vor Subtitel, Subtitel vor Text? Wo setzt man sinnvollerweise das Bild (img-Tag) hin, wenn es einmal ein Design geben soll, bei dem das Bild links neben den Block kommt und ein Design bei dem das Bild vom Text links umflossen wird?
Templates benutzen!
Der Benutzer gibt seine Inhalte als abstrakte Elemente ein: Bild, Überschrift, Text. Diese Elemente werden in ein HTML-Template eingesetzt, welches an den für das grafische Erscheinungsbild der Seite notwendigen Stellen Platzhalter besitzt, um diese Elemente aufzunehmen, und enthält ansonsten nur die richtige HTML-Struktur.
Ja, aber das löst mein Problem nicht, leider. Es geht eben genau darum, dass nur noch CSS nötig sein darf um den fixen HTML-Output des CMS zu layouten. So sind die Vorgaben und daran muss ich mich leider halten!
Vielen Dank aber schonmal für Deine Denkanstösse :)
Anders-
Hi,
Sagen wir mal so: ich muss nicht wirklich JEDES Design damit umsetzen können, aber so viele wie irgend möglich!
ich habe da eine gute Nachricht für Dich: zumindest die von Dir skizzierten Layouts lassen sich völlig ohne überflüssige Elemente wie in Zengarden und mit ganz einfach und logisch (um nicht zu sagen semantisch;-) aufgebautem HTML umsetzen. Sieh Dir mal http://www.1ngo.de/web/css-layout.html an. Hier könnte ich auch leicht Deine anderen Layouts und natürlich auch Header über Hintergrundgrafiken für H1 mit CSS realisieren.
Was ist mit der Reihenfolge, in der ich Elemente zu einander anordnen sollte? Folgt die einfach nur dem Textfluss, also Titel vor Subtitel, Subtitel vor Text?
Hier ist zu beachten, daß Elemente, die später gefloatet werden sollen, wie z.B. ein Menü, zuerst stehen sollen. Ansonsten wäre dieser Weg versperrt und es bliebe nur die absolute Positionierung mit ihren Nachteilen.
Wo setzt man sinnvollerweise das Bild (img-Tag) hin, wenn es einmal ein Design geben soll, bei dem das Bild links neben den Block kommt und ein Design bei dem das Bild vom Text links umflossen wird?
Wie ich sagte: zuerst. Denn es soll gefloatet werden.
freundliche Grüße
Ingo-
Hallo Ingo,
vielen Dank für den Hinweis aud Deine Site. Was mir jetzt klar geworden ist, ist dass es keinen Sinn macht, z.B. Text in Spans zu packen, vielmehr sollte ich diese semantisch sinnvoll in Paragraphen oder HX-Tags einbauen, die ich dann entsprechend per CSS formatiere. Auch den Apsekt der richtigen Reihefolge von Elementen um diese floaten zu können leuchtet ein, danke. Eine Frage aber noch: in dem Beispiel auf Deiner Site nutzt Du zum einen und <br />. Rein theoretisch: sollte man das nicht kosequenterweise auch per CSS machen?
Danke Dir und Grüsse, Anders
-
Hallo.
Eine Frage aber noch: in dem Beispiel auf Deiner Site nutzt Du zum einen und <br />. Rein theoretisch: sollte man das nicht kosequenterweise auch per CSS machen?
Ja, das liegt an der oftmaligen Diskrepanz von Theorie und Praxis.
MfG, at-
Ja, das liegt an der oftmaligen Diskrepanz von Theorie und Praxis.
Das führt mich ja zu der spitzen Frage: wo ziehe ich die Grenze? <br> und sind heute noch ok, morgen nutze ich wieder Tabellen!?
Grüsse, Anders-
Hallo.
Das führt mich ja zu der spitzen Frage: wo ziehe ich die Grenze? <br> und sind heute noch ok, morgen nutze ich wieder Tabellen!?
Diese Entscheidung liegt stets beim Autoren der Seite. <br> hat ja auch durchaus noch seine Existenzberechtigung, etwa bei Gedichten und mit habe ich etwa bei der Abtrennung von Vorwahl und Telefonnummer auch keine Bedenken. Das mag aber jeder individuell entscheiden. Bei mir wirken die Konstruktionen oft sehr stark strukturiert und listen-orientiert, orientieren sich aber stets am Inhalt, so das sich häufig sehr große Unterschiede zwischen nach außen recht ähnlich wirkenden Seiten ergeben. Andere versuchen hingegen eine möglichst flexible Struktur zu entwickeln, um diese immer wieder verwenden zu können und sich nicht selbst darin zu verheddern. Das empfinde ich auch als durchaus legitimen Ansatz, könnte so aber nicht arbeiten. Wenn du allerdings auf Templates setzt, bist du von vornherein auf einfachere Strukturen eingeengt, wenn du nicht eine Menge oft überflüssiger Abfragen oder versteckter Null-Inhalte mitschleppen willst. Gute Templates sind eine Kunst, an die ich mich in absehbarer Zeit wohl nicht herantrauen werde.
MfG, at-
Hallo
Diese Entscheidung liegt stets beim Autoren der Seite. <br> hat ja auch durchaus noch seine Existenzberechtigung, etwa bei Gedichten
Ok, das Beispiel leuchtet ein.
und mit habe ich etwa bei der Abtrennung von Vorwahl und Telefonnummer auch keine Bedenken.
dito.
Danke für die Mithilfe, ich beginne das Prinzip so langsam zu begreifen, hoffentlich verinnerliche ich es mit der Zeit :)
Tschüss, Anders
-
-
-
-
Hi,
Eine Frage aber noch: in dem Beispiel auf Deiner Site nutzt Du zum einen und <br />. Rein theoretisch: sollte man das nicht kosequenterweise auch per CSS machen?
was die geschützen Leerzeichen betrifft: hier trifft at's Aussage zu - ist ein kleines Zugeständnis an den IE 5.0, der ein padding nicht umsetzen würde.
Was die <br />s betrifft: Ich gebe zu, daß in der Konstruktion
<p>Neuer Textabsatz...<br />neue Zeile...<br /><br />Leerzeile im Absatz.</p>
statt den doppelten <br />s auch ein neuer Absatz gesetzt werden könnte, allerdings halte ich eine Leerzeile _in_ einem Absatz manchmal durchaus für angebracht. Und zwar dann, wenn diese Leerzeile nur der Übersichtlichkeit wegen eingefügt ist und es sich trotzdem um eine zusammenhängende Textpassage handelt. Dies hat auch einen rein praktischen Effekt: Durch Dreifachklick (jedenfalls im IE) kann ein Absatz markiert werden.freundliche Grüße
Ingo-
Hallo Ingo,
danke, das beantwortet meine Frage! Mal sehen, wie ich nach der ganzen Theorie in der Praxis vorankomme, bis Mittwoch muss meine erste Tabellenfreie Website stehen :)
Schönes Wochenende wünsche ich noch,
Anders
-
-
-
-
Moin!
Das geht nicht!
hm, das höre ich ja nicht so gerne ;)
Läßt sich aber relativ einfach "beweisen":
Folgende Struktur:
<div id="text">Blahblah....</div>
<div id="image"><img src...></div>So, und nun versuche mal, diese beiden Elemente nur mit CSS so anzuordnen, dass das Bild links oben in der Ecke des Textcontents floatet, also nach dem Ende des Bildes wieder die Gesamtbreite einnimmt. Viel Spaß dabei - und absolut unmöglich.
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ß.
Ok, das ist ja schonmal eine Aussage, es geht also nicht vollkommen universal. Das Konzept von csszengarden ist aber genau das, was mir vorschwebt - ich bin sogar erst über csszengarden auf die Idee gekommen. Sagen wir mal so: ich muss nicht wirklich JEDES Design damit umsetzen können, aber so viele wie irgend möglich!
Natürlich ist es möglich, eine Auswahl von X Designs zu erstellen, und auf die Gesamtheit aller Designs eine HTML-Struktur und verschiedene CSS zu erstellen, die in Kombination dann alle Designs bilden.
Aber sowas halte ich für durchaus sehr aufwendig. Dein Beispiel mit den drei oder vier Beispielen war da ja noch vergleichweise einfach gestrickt. Und die Lösung ist genauso simpel wie einleuchtend: Nimm das HTML, was die Anforderungen erfüllt und deine Designs erlaubt.
Der CSSZengarden hat einen vollkommen anderen Ausgangspunkt. Hier hat jemand die Idee gehabt, die kreative Gemeinde mit der Aufgabe herauszufordern, aus einer festen HTML-Datei möglichst unterschiedliche Designs herauszukitzeln. Sowas kannst du als Ansatz natürlich auch wählen, das bedeutet dann, dass du zuerst mal dein HTML festlegst und dann überlegst, was damit CSS-mäßig so gehen könnte. Aber viele der CSSZengarden-Tricks, die notwendigerweise angewandt werden mußten, um die vielen coolen Designs hinzukriegen, sind doch ziemlich Fern der Praxis und Realität. Natürlich ist es kein Problem, Überschriften als Hintergrundbild mit tollen Schriftarten einzubinden. 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. Benutze doch ordentliche HTML-Tags: Überschriften kommen in <h1> bis <h6>, Textblöcke in <p> und so weiter.
Die CSS fehlen natürlich, habe ich der Übersicht halber nicht dazu geschrieben. Mit den h1-h6 und den "p"s leuchtet auch ein, nur: ist das schon ausreichend um möglichst flexibel viele Designs damit umzusetzen?
Du kannst auch alles nur mit DIV und SPAN machen. Wenn du hinreichend viele Klassen und IDs vergibst, wird es dir mit Sicherheit möglich sein, aufgrund der entsprechenden Selektoren jedes einzelne Element auch ganz individuell ansprechen zu können - darauf kommt es zumindest beim Zengarden elementar an: Kontrolle über jedes einzelne Element.
Das bedeutet aber, dass die Erstellung des HTML-Gerüstes nicht mehr ganz so einfach ist, und es außerdem größer und umfangreicher werden muß, weil du ja Klassen und IDs für _alle_ CSS-Styles reinschreiben mußt, und vielleicht auch noch Elemente, die zu Formatierungszwecken für einzelne CSS benötigt werden, für andere aber nicht.
Was H1&P angeht: Ich halte es einfach für eine Selbstverständlichkeit, dass man die existierenden HTML-Elemente auch alle entsprechend ihrer Semantik benutzt, wenn man sie so benutzen kann. Es ist aus CSS-Sicht absolut unerheblich, ob du <DIV class="head"> formatierst, oder <h1> - aber aus HTML-Sicht hat das zweite auch ohen CSS die Information "Hallo, ich bin die wichtigste Überschrift hier". Suchmaschinen mögen das.
Gibt es weiter nichts zu beachten, als dass Texte in "p"s kommen, Titel in h1-h6, Images gar nicht umfasst werden? Was ist mit der Reihenfolge, in der ich Elemente zu einander anordnen sollte? Folgt die einfach nur dem Textfluss, also Titel vor Subtitel, Subtitel vor Text? Wo setzt man sinnvollerweise das Bild (img-Tag) hin, wenn es einmal ein Design geben soll, bei dem das Bild links neben den Block kommt und ein Design bei dem das Bild vom Text links umflossen wird?
Du _mußt_ gar nichts beachten. Aber es ist nun einmal sinnvoll, wenn Fließtext in <p> steht - dafür ist das P ja schließlich da. Außerdem kannst du dir die Zeilenwechsel mit <br> schenken, und außerdem den Absatzabstand besser regulieren.
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_.
Dadurch, dass das Bild aber direkt _vor_ dem Textblock kommen muß, steht es zwingend _nach_ der davor stehenden Überschrift. Damit ist es aber vollkommen ausgeschlossen, dass du als Alternative das Bild auch links neben der Überschrift floaten lassen kannst.
Designs mit Float sind vermutlich genau die Designs, die du gerade NICHT mit nur einer HTML-Struktur realisieren kannst. 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.
Ja, aber das löst mein Problem nicht, leider. Es geht eben genau darum, dass nur noch CSS nötig sein darf um den fixen HTML-Output des CMS zu layouten. So sind die Vorgaben und daran muss ich mich leider halten!
Dann sind die Vorgaben Scheiße. Jedes normale CMS ist in der Lage, mit unterschiedlichen Templates zu arbeiten. Die meisten CMS haben es sogar noch nicht begriffen, dass es tatsächlich schon sowas wie CSS gibt, und unterstützen es nur mieserabel.
Ich behaupte ja nicht, dass es absolut unmöglich ist, eine definierte Anzahl von Designs mit einer identischen HTML-Struktur zu erstellen. Aber 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ß. Und zweitens: Womit anfangen? Das CSS erfordert existierendes HTML. Das HTML aber so anzupassen, dass es mit allen Designs funktioniert, erfordert existierdendes CSS. Und zu allem Überfluss kann jede unbedachte Änderung im HTML ein oder mehrere CSS-Stylesheets wirkungslos machen oder deren Erscheinungsbild zerstören.
Ich würde mich - in aller Bescheidenheit - durchaus als Könner auf dem Gebiet HTML und CSS bezeichnen. Aber ich würde vor _so_ einer Aufgabe wahrlich zurückschrecken. Wie gesagt, bin ich der festen Überzeugung, dass es die eierlegende Wollmilchsau in HTML für beliebige CSS-gesteuerte Designs nicht gibt. Eine solche Aufgabe ist in meinen Augen unlösbar. Allein definierte Designs über eine einheitliche Struktur zu realisieren ist schon komplex genug.
Hat man das einmal geschafft, wäre als Ausblick analog des Zengardens nur anzudenken, basierend auf der festen Struktur mit CSS die möglichen Grenzen auszuloten und so weitere Designs "am lebenden Objekt" zu entwickeln. Dabei wirst du wahrscheinlich ganz automatisch Dinge vermeiden müssen, die schlicht nicht gehen. Genau so wird's beim Zengarden nämlich auch laufen.
- Sven Rautenberg
-
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 -
Hallo.
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.
Typo3 zum Beispiel generiert die auf Wunsch dynamisch, und das auch gar nicht schlecht.
MfG, at -
Hallo Sven,
ich danke Dir vielmals für die sehr interessanten Ausführungen, ich habe jetzt einiges verstanden. Weiters habe ich folgende Diskussionen im Web gefunden, die sich um das selbe Thema drehen und auch nochmal einige der von Dir angesprochenen Aspekte ansprechen:
http://www.stopdesign.com/log/2003/10/14/separated.html
http://www.meyerweb.com/eric/thoughts/200310.html#t200310015
"Structure may be able to break up with style, but style still needs and depends on structure in a big, big way."
Grüsse, Anders
-
-
-
-
Hallo.
Die sich aus den zu Einsatz kommenden techniken ergeben Schwierigkeiten eines solchen Ansatzes haben auch ihr gutes: Sie zeigen auf, dass ein gutes Layout die Struktur eines Dokumentes unterstützen sollte und das eben nicht jedes Layout dafür geeignet ist.
MfG, at