CSS 2.1 ::Tutorials
Rahmen einmal anders
Immer wieder kommt der Wunsch auf, Elemente mit einem anderen Rahmenmuster zu umgeben als denen, die durch CSS 2.1 bereits möglich sind. Dieses Tutorial soll einen Weg aufzeigen, wie das machbar ist. Wer es eilig hat und nicht alles durchlesen will, kann gleich zu den beiden Beispielen A und B gehen und sich den Code dort direkt ansehen.
Um so einen Effekt zu erzielen, haben wir verschiedene Möglichkeiten. Wir könnten z. B. Grafiken plazieren, um die Rahmen zu simulieren. Das hat aber den Nachteil, dass durch die vorgegebene Größe die Flexibilität fehlt, d. h. wir hätten sozusagen ein Einweg-Konstrukt entworfen, das sich nicht an unterschiedliche Gegebenheiten anpassen lässt.
Zur Anpassung an unterschiedliche Höhen und Breiten bietet sich die Kurzschrift-Eigenschaft background aber geradezu an. Wir müssen nur ein wenig tricksen, denn so ein Hintergrund kann an einem Element nur an einer Seite angebracht werden. Wenn also auf dieser Seite weiterhin von Hintergrundgrafiken die Rede ist, dann sind das nur die, mit denen der Rahmen simuliert wird.
Zunächst greifen wir auf ein umfassendes Element DIV zurück, mit dem wir die Elemente einfassen, die innerhalb des Rahmens stehen sollen. Alles, was wir jetzt entwickeln, spielt sich innerhalb dieses DIV ab. Meistens ist so ein DIV sowieso schon vorhanden, sodass sich dadurch keine zusätzliche Verschachtelung ergibt. Für den Fall, dass es doch einmal nötig wird, ein zusätzliches DIV einzubauen, sollten dessen margin, border, padding auf 0 gesetzt werden. Dieses DIV dient nur als Strukturelement.
Als vorbereitende Maßnahme positionieren wir es relativ, denn dann ist es das Bezugselement für die absolute Positionierung der Nachkommenelemente.
Rahmen oben und unten
Die absolute Positionierung wenden wir direkt für die Rahmenteile oben und unten an, indem wir jeweils ein DIV oben und unten positionieren. Diese DIV sollten so hoch sein wie unsere Hintergrundgrafik (in Pixeln) und genauso breit wie das umfassende Element (das bedeutet: width: 100%;). Zusätzlich vergrößern wir das padding des umfassenden Elementes oben und unten um die Höhe der Hintergrundgrafik.
Für die Positionierung der background-Grafik reicht ein einfaches top bzw. bottom. Sie wird dadurch seitlich nach der Mitte ausgerichtet. Die Wiederholung nach rechts und links legen wir mittels repeat-x fest.
Dadurch, dass wir diesen beiden DIV dieselbe Höhe geben wie die Hintergrundgrafik, wären eigentlich Angaben zur Positionierung und Wiederholung überflüssig. Wir tun es hier dennoch, um sicherzugehen, dass alles unseren Vorstellungen entsprechend ausgelegt wird, auch wenn der eine oder andere Browser die eine oder andere Eingenschaft nicht gaaanz so korrekt interpretiert.
Probehalber unterlegen wir nun einmal beide DIVs mit einer Hintergrundfarbe (bisher haben wir transparent), um zu sehen, welche Höhen sie denn nun wirklich annehmen. Und wir stellen fest, dass IE/Win ungeachtet unserer height-Deklaration an einer Mindesthöhe von 1em für das Element festhält. Wir helfen uns, indem wir die Schriftgröße für die beiden DIV auf 1 Pixel festlegen. Das ist zwar nicht besonders elegant, aber es erfüllt den Zweck.
IE/Win stellt uns vor ein weiteres Problem. Das mit bottom positionierte Element wird nicht immer dargestellt. Aber auch hier gibt es Abhilfe: wir gliedern dieses DIV wieder in den normalen Elementfluß ein. Wenn es das letzte Element innerhalb des umgebenden DIV ist, dann wird es auch ganz unten dargestellt.
Rahmen rechts
Dieselbe Methode können wir nicht für die Rahmen links und rechts anwenden, da die Deklaration height:100%; nicht von allen Browsern so ausgeführt wird, wie wir es gerne hätten. Es gibt aber eine andere Möglichkeit.
Für den Rahmen rechts verwenden wir den Hintergrund des umfassenden Elements. Analog zur oben beschriebenen Methode positionieren wir die Hintergrund-Grafik per background-position: right; am rechten Rand in der Mitte und für die Wiederholungen nach oben und unten legen wir repeat-y fest.
Rahmen links
Nun können wir an demselben Element aber nur einen Hintergrund anbringen. Deshalb sind wir gezwungen, für den linken Rahmenteil auf die Nachkommenelemente auszuweichen. Wie gehabt, bestimmen wir auch hier repeat-y, positionieren aber den Ursprung der Grafik mit left. Hier müssen wir jetzt darauf achten, dass wir die Abstände der Nachfahrenelemente untereinander oder zum linken Rand nicht durch margin, sondern durch padding deklarieren. Anderenfalls haben wir links Lücken im Rahmen bzw. der Rahmen hat Abstand vom Außenrand. Sollten wir auf margins angewiesen sein, lassen sich im Einzelfall auch negative Werte als Korrekturen anbringen.
Möglichkeiten
In diesem Tutorial wurde bisher angenommen, dass der Text der Nachkommenelemente linksbündig ausgerichtet ist. In dem Fall ist nicht sicher, dass der rechte Rand dieser Elemente auch wirklich bis zum rechten Rand des umfassenden DIV reicht. Deshalb wurde der rechte Rahmenteil als Hintergrund des umfassenden Elements deklariert.
Demzufolge müssen rechts und links vertauscht werden, wenn der Text rechtsbündig ist, d. h. der linke Teil des Rahmens wird dann als Hintergrund des umfassenden Elements deklariert, der Rahmen rechts als Hintergrund der Nachkommenelemente.
Im Beispiel A wird der Rahmen durch ein Diagonalkreuz zusammengesetzt.
Beispiel B stellt den Rahmen durch eine punktierte Linie dar. Mit diesem Trick wird border: 1px dotted; auch für IE/Win möglich.
Natürlich kann man auch für alle 4 Seiten unterschiedliche Grafiken verwenden, man muß dann aber auf die Anschlüsse in den Ecken achten. Möglicherweise verwendet man für einen Teil der Rahmen nichtdurchlässige GIFs, für den anderen Teilrahmen teiltransparente GIFs.
Der in diesem Tutorial gezeigte Aufbau verwirklicht in groben Zügen, was im CSS-3-Modul 'Borders' als border-image geplant ist, dort werden allerdings nur wenige Deklarationen an nur einem Element notwendig sein.
TOP
