Abgerundete Ecken und sich anpassende Rahmen, gar mit Schattenwurf, liegen voll im Trend. Vorgesehen sind sie erst mit der Einführung von CSS 3 und bis es soweit ist, sind immer noch ein paar Extra-Schritte nötig. Diese robuste, besonders flexible Variante setzt auf Hintergrundbilder und braucht kein JavaScript. So funkioniert’s:
Hintergrundbild und ein paar zusätzliche divs sind alles was wir brauchen. Das Hintergrundbild positionieren wir mit CSS und sorgen mit margins dafür, dass immer der passende Ausschnitt sichtbar wird. Die Rahmengröße passt sich auch ohne JavaScript flexibel an. Mit einem halbtransparenten Hintergrundbild im PNG-Format brauchen wir uns in standardkonfomen Browsern auch nicht mehr um den Schattenwurf mit verschiedenen Hintergrundfarben zu kümmern. Weniger standardorientierten Browsern servieren wir die abgespeckte Version ohne Schatten.
Flexibler Rahmen mit Schattenwurf und abgerundeter Ecke im standardkonformen Browser.
Live Demo im neuen Fenster: Rahmen flexibel mit abgerundeten Ecken
<body>
<div class="oben"><div></div></div>
<div class="links"><div class="rechts"><div
class="inhalt">
Lorem ipsum...
</div></div></div>
<div class="unten"><div></div></div>
<div id="foto">
<div class="oben"><div></div></div>
<div class="links"><div class="rechts"><div
class="inhalt">
<img src="image.jpg">
</div></div></div>
<div
class="unten"><div></div></div>
</div>
</body>
Ein paar semantisch nicht ganz korrekte divs sind nötig, in denen später das Hintergrundbild erscheint. <div class=“oben“><div></div></div><div class=“links“><div class=“rechts“><div class=“inhalt“> kommt vor den Inhalt, der gerahmt werden soll, </div></div></div><div class=“unten“><div></div></div> setzen wir dahinter.
In Dreamweaver lassen sich die Code-Schnipsel gut als Snippets anlegen, sonst helfen Copy und Paste oder Suchen und Ersetzen bei der Tipperei. Der Code-Block ist für jeden Rahmen auf der Seite identisch.
body { margin: 0; padding: 10px; }
.oben, .oben div, .unten, .unten div
{ background-image: url(box.png); background-repeat: no-repeat; }
.links, .rechts
{ background-image: url(rahmen.png); background-repeat: repeat-y; }
.inhalt { background: #fff; padding: 0 10px; color: #000; }
#foto { float: left; width: 140px; }
Wir geben einheitliche margins und padding vor und bauen die Hintergrundbilder box.png und rahmen.png ein. Dem .inhalt geben wir Hintergrund- und Schriftfarbe und rücken ihn mit padding etwas vom Rahmen weg.
Für das Mini-Layout oben geben wir der div#foto eine Größe (width: 140px;) und floaten nach links (float: left). Gezeichnet wird der Rahmen oben und unten als Ganzes von rechts nach links, wiederholt (gekachelt) werden nur die Seitenteile (background-repeat: repeat-y;).
Für Standardverweigerer schreiben wir die Alternativanweisungen in den head:
<!--[if lt IE 7]>
<style type="text/css">
.oben, .oben div, .unten, .unten div { background-image:url(box.gif); }
.links, .rechts { background-image:url(rahmen.gif); } .links, .inhalt {
height:1px; }
</style>
<![endif]-->
Mit Conditional Comments reichen wir rahmen.gif, box.gif und fehlerbehebende Spezialanweisungen an ältere Browser.
Der wichtigste Teil ist die Vermessung und Einpassung des Rahmens:
/* Oben: Rahmen und rechte Ecke */
.oben { height: 15px;
margin: 0 0 0 15px;
background-position: 100% 0; }
/* Oben: linke Ecke */
.oben div { height: 15px;
width: 15px; position:
relative; left: -15px;
background-position: 0 0; }
/* Unten: Rahmen und rechte Ecke */
.unten { height: 15px;
margin: 0 0 0 15px;
background-position: 100% 100%; }
/* Unten: linke Ecke */
.unten div { height: 15px;
width: 15px; position:
relative; left: -15px;
background-position: 0 100%; }
/* Linker Rahmen */
.links { padding: 0 0 0 5px;
background-position: 0 0; }
/* Rechter Rahmen */
.rechts { padding: 0 5px
0 0; background-position: 100% 0; }
Die extra eingefügten divs werden mit dem passenden Ausschnitt des Hintergrundbildes versehen. Auf den vergrößerten Screenshots des Hintergrundbildes zeigen die Farben, wo welcher Abstand in Pixeln gemessen und eingetragen wird:
Linke Ecke…
und rechte Ecke (Detail) mit Maßangaben in Pixeln.
Für die Seitenrahmen werden die Abschnitte rechts und links aus dem Bild kopiert und in ein eigenes Rahmenbild gesetzt – hier kommt es auf den richtigen Abstand des Rahmens von der Seite an.
In der Höhe passt sich der Rahmen beliebig an, horizontal ist er duch die Breite des Hintergrundbildes begrenzt, 1600px wie in den Beispielbildern sollten es schon sein. Wird der Rahmen größer, kommt es zu unschönem Kacheln. Die .gif-Versionen entsprechen den normalen Hintergrundbildern, nur ohne den halbtransparenten Schatten.
Wer selbst eigene Rahmen kreieren möchte, ist keinesfalls auf streng symmetrische Formen beschränkt. Für jede Ecke sind unterschiedliche Werte möglich:
Der Rahmen bleibt in Form, sogar beim Verändern des Browserfensters
Live Demo im neuen Fenster: Rahmen extra-flexibel
Beispiele im ZIP-Archiv zum Download
Getestete Browser: IE 5.5, 6.0, 7 Beta 3, Firefox, Mozilla, Opera ab 7.1, Netscape ab 7.2 ™
Credits: Roger Johansson
