nicht angemeldet
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