Dieses Bild hat einen feinen Holzrahmen.
|
|
|
|
|
|
|
|
|
Das gleiche Bild mit einem breiteren Rahmen und einem "Passepartout":
|
|
|
|
|
|
|
|
|
Die Bilder sind jeweils in der mittleren Zelle einer 3x3-Tabelle.
Die Tabellenzellen am Rand und in den Ecken enthalten als eigentlichen Inhalt
(Vordergrund) durchsichtige Platzhalter-Bilder, die die Breite des Rahmens bestimmen.
Als Hintergrund-Grafiken enthalten sie die Bilder mit den Rahmen-Teilen.
Das ganze ist mit Cascading Style Sheets (CSS Level 1.0) gelöst und funktioniert problemlos in Netscape ab 6.0, MS Internet Explorer 5.5 und Opera ab 5.0, wahrscheinlich auch in MS Internet Explorer ab 4.0.
In Netscape 4.x sind die Ecken oben rechts und unten links falsch, weil Netscape 4.x die Hintergrundbilder nicht positioniert und diese hier grösser sind als die Rahmenbreite.
Im zweiten Beispiel wurde der "Passepartout" (weisser Abstand um
das Bild) mit dem CSS-Befehl "padding" gemacht.
Netscape 4.x macht nur oben, links und rechts einen weissen Rand, unten liegt
das Bild direkt dem Holzrahmen an.
Um sicher zu sein, dass das Bild auch in Netscape 4.x auf allen vier Seiten
einen gleich dicken Rand hat, müsste man den horizontalen und vertikalen
Bildabstand angeben und dafür die "padding"-Angaben
in CSS für die Tabellenzelle auf Null setzen.
<td>
<img src="..." ... vspace="25" hspace="25">
</td>
vspace und hspace sind aber "altmodische"
HTML 3.2-Attribute, die man eigentlich vermeiden sollte.
Beim folgenden Beispiel hat es auch in Netscape 4.x einen symmetrischen weissen Abstand rund um das Bild:
|
|
|
|
|
|
|
|
|
|
|
|
Dafür fehlt in Opera 5.12 und 6.02 der weisse Rand oben und unten; in Opera 5.12 ist das Bild zudem nicht einmal horizontal zentriert.
Alle Seiten mit Holz-Rahmen:
Übersicht: Alle Seiten mit Rahmen
Bild: Ferdinand Hodler. Bildquelle: visipix.com
Thomas Lüthi, luthi@my-mail.ch, 16.06.2002