XHTML SVG CSS PHP

Dr. O. Hoffmann

CSS-Layout

Originalität ist meistens nichts anderes als ein noch nicht entdecktes Plagiat.
Voltaire

Rahmen und CSS

Mir wurde vorgeschlagen, ich möchte doch mal erläutern, wie man mit CSS kompetent und flexibel Rahmen um Dokumente macht. Nun, an sich eine einfache Sache, solange die dafür in CSS vorgegebenen Rahmenstile verwendet werden. Nun können sich aber viele Leute damit nicht zufrieden geben und auch nicht mit der Aussicht, daß es in wenigen Jahren (?) mit CSS 3 reichlich neue Möglichkeiten geben wird, Rahmen zu gestalten, mit abgerundete Ecken und auch durch das Einbinden diverser Graphiken. Nun, wie macht man es aber mit CSS 2, ist da immer noch die Frage der Ungeduldigen.
Mit welchen Tricks man bei Boxen mit Inhalt dekorative Rahmen hinbekommt, ist ja bereits weit verbreitet im internet. Schlüsselworte dafür sind abgerundete Ecken, runde Ecken oder auch Rahmen mit abgerundete Ecken, round corners, rounded corners border und dergleichen. Die Aufgabenstellung hier liegt darin, für das gesamte Dokument einen Rahmen zu schaffen, der das Dokument flexibel umgibt. Da gibt es verschiedene Ansätze, die alle den Haken haben, daß im XHTML-Quelltext ansonsten leere div-Elemente verwendet werden, die mit Hintergrundgraphik verziert werden. Mit normaler Pixelgraphik solche Rahmen zu erstellen, ist nicht so schwierig. Damit es (mir) mehr Spaß macht, habe ich es einmal mit teiltransparenter Graphik versucht. Entsprechend lassen sich die vorgestellten Methoden natürlich auch auf positionierte Elemente übertragen, die ja ein neues, eigenes Koordinatensystem aufmachen.
Da es sich um eher um eine experimentelle Spielerei handelt, ist für eine korrekte Anzeige der Seiten also ein aktuelles Darstellungsprogramm wie Konqueror, Opera oder Mozilla/Gecko zu verwenden. Einzig bei der letzten Variante wurde Rücksicht auf den microsoft internet-explorer genommen und dessen Fehler so weit kompensiert, daß es eine passable Anzeige auch mit diesem Programm gibt. Das ist bei den anderen Varianten auch zumindest teilweise möglich, habe ich mir aber mal hier erspart.
Weg zum (abgerundeten) Rahmen, Dokumentrahmen mit CSS 2

Für den selbstgemachten Rahmen wurde ein einfaches teiltransparentes Rechteck mit SVG als Vorlage verwendet. Diese wurde in das Pixelgraphikformat PNG konvertiert und in Einzelstücke zerlegt:
Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage Rahmenvorlage
Diese Stücke werden dann mit leeren div-Elementen als CSS-Hintergrundgraphiken mittels CSS geeignet positioniert, so daß sich insgesamt wieder ein kompletter Rahmen ergibt, der sich den Abmessungen der Seite anpaßt.
Rahmenvorlage

Beim letzten Stil werden gleichseitige Polygone als dekorative Symbole eingesetzt. Diese wurden mit einem kleinen PHP-Skript im Format SVG erzeugt und dann in das Format PNG konvertiert. Zum Herumspielen ist hier ein kleines Skript, die Parameter in der URI beeinflussen das Aussehen des Polygons, einfach mal ausprobieren: Polygon-Generator.