Wie der Rahmen mit Dekorativem ergänzt wird.

Nun kann man auch noch einige Dinge ergänzen - etwa links einen dekorativen Knubbel mit relative-, fixed- oder absolute-Positionierung, ebenso das Menü. Der kleine Symmetriebruch im Layout, der dadurch hervorgerufen wird, lockert die Seite deutlich auf - Ästhetik beruht ja zu einem guten Teil auf überraschenden Symmetrien und unerwarteten Symmetriebrüchen.
Besonders mit dem Menü wird aus der kleinen Übung fast schon eine brauchbare Seite. Andere dekorative Sachen sind die hauchdünnen Rahmen um Überschrift und Absätze und die Wiederkehr des Knubbel-Symbols als Hintergrundbild und als Listensymbol. Wiederholungen von Motiven und Abläufen haben sich schon in Märchen und bei der Singerei als ästhetisch bewährt.
Im Stilvorlagenmenü kann auch Stil b ausgewählt werden, alternativ im Menü, in dem sind drei dekorative Knubbel und links und rechts unten und links oben mit Relativpositionierung angeordnet sind. Um nicht benötigten Platz zu kompensieren, wird der Inhaltsbereich mit negativem margin nach oben verschoben.

Hier erweist es sich als günstig, daß zuvor nichts positioniert werden mußte, das erleichtert das Spielchen ganz enorm. Bei der fixed-Positionierung ist daran zu denken, daß der Inhalt keinesfalls so groß werden darf, daß er über den Anzeigebereich hinausragt.

Das große Hintergrundbild und jene kleinere Ausgabe im Knubbel besteht aus zwei gleichseitigen Polygonen. Diese habe ich ursprünglich mit einem kleinen PHP-Skript als Vektorgraphik SVG erzeugt. Da aber derzeit (Januar 2008) die meisten Darstellungsprogramme noch nicht mit SVG als CSS-Hintergrundgraphik umgehen können (Ausnahme: Opera 9.50 (alpha/beta)), habe ich das einstweilen nach PNG konvertiert und als Pixelgraphik eingebunden. Als SVG hätte man sonst besonders die kleinen Knubbel-Polygone gegeneinander rotieren lassen können, um den Nutzer etwas aufzuheitern. Nun, vielleicht sind die anderen Programme in ein bis zwei Jahren so weit ...
Mit SVG sind solche Polygone wirklich sehr einfach zu erstellen und selbst der Füllalgorithmus 'even-odd' kann einfach als Attribut angegeben werden. Nahezu genauso einfach wäre eine Animation - Drehung, Skalierung, Positionsänderung mit SVG, was natürlich ohnehin nur Spielerei ist, die vom eigentlichen Inhalt der Seite ablenkt, so daß wir wohlmöglich ganz froh sein können, daß das heute noch nicht durchgehend als CSS-Hintergrundbild funktioniert. In den meisten Fällen täte ich jedenfalls davon abraten, animierte Hintergrundgraphik zu verwenden. Das dekorative Anliegen paßt da wenig zur menschlichen Psychologie, die Bewegtem besondere Aufmerksamkeit schenkt, die dem Inhalt gelten sollte, nicht der Dekoration.

Zum Abschluß werden dann noch die Korrekturen für den microsoft-internet-explorer 6 (msie) ermittelt, um dessen Anzeigefehler so weit zu kompensieren, daß auch dessen Nutzer noch was Passables zu sehen bekommen. Die CSS-Angabe lagern wir ohnehin in eine CSS-Datei aus und hinter dem link-Element für diese packen wir einfach noch mit den microsoft 'conditional comments' ein weiteres link-Element exklusiv für den msie, welcher auf eine CSS-Datei verweist, in dem all die Korrekturen und Vereinfachungen sind, die der msie so braucht, damit seine Nutzer nicht doch noch endgültig dem Wahnsinn verfallen:
Teiltransparenz kann der msie natürlich nicht, position: fixed ebensowenig, da muß dann vereinfacht werden. Da ich heute einen guten Tag habe, habe ich das falsch angezeigte Knubbelbild auch mal ausnahmsweise nicht gestrichen sondern das grobe Sollbild mit dem Opera simuliert und vom Bildschirm kopiert. Da guckst du! Fast eine korrekte Opera-Anzeige nun auch beim msie ;o) Wie gut, daß wir Konqueror, Mozilla und Opera haben, wo wir einfach die korrekte Anzeige kopieren können und dem msie unterschieben. So bleiben ihm nur kleinere Farbfehler übrig - und die wollen wir ihm ja nun gönnen.

  • Rahmen 0
  • Rahmen 1
  • Rahmen 2
  • Rahmen 3
  • Stil b
  • mehr...