Das Drama beginnt, wenn eigene Graphiken als Rahmen verwendet
werden sollen. Das sieht CSS 2 an sich nicht vor, man müßte
dazu auf CSS 3 warten - aber wer möchte das schon? Also muß
der XHTML-Quelltext mit einigen leeren div-Elementen verunziert werden, um
genug funktionslose Elemente vorrätig zu haben, um Hintergrundbilder
richtig anzuordnen. Je nach Methode kommt es auch darauf an, wo die
div-Elemente stehen und wie sie ineinander verschachtelt sind.
Der einfachste Plan besteht darin, die leeren div-Elemente unmittelbar
direkt in das body-Element zu packen und erstmal den ganzen
Hintergrundkram zu positionieren und dann
den eigentlichen Inhalt mittig hinein zu platzieren.
Den schön platzierten Rahmen erkaufen wir
uns mit durchgehender Anwendung von
position: absolute.
Nun - nichts gibt es für umsonst. Zur
Strafe müssen wir den Inhaltsbereich mit
overflow: auto davor bewahren, aus dem
Rahmen zu fallen. Ist mehr Inhalt da, als der
Rahmen fassen kann, gibt es für den
Inhaltbereich Rollbalken.
Der Rahmen wurde ursprünglich als einfaches
SVG-Rechteck mit endlicher stroke-width und Teiltransparenz
sowohl für fill als auch für stroke erstellt.
Weil Darstellungsprogramme für CSS noch nicht mit
SVG klar kommen, wenn
diese per CSS eingebunden werden,
wurde das dann in brauchbarer Größe nach
PNG konvertiert und mit dem Gimp in die relevanten
Stücke zerlegt - die vier Ecken, die vier Seiten und
jeweils noch kleine Pixel fü die beiden Seiten-Farben
und die mittige Füllfarbe. Diese Pixel können
dann im weiteren Layout beliebig eingesetzt werden.
Durch Festlegen der Hintergrundfarbe für das
Element body bekommt man so durch die Teiltransparenz
interesante Farbeffekte auch des Rahmens und anderer
Elemente.