Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de

Cascading Style Sheets, level 2

7.Kunstvolle Rahmen

Nicht nur Kunstwerke kommen erst mit einem schmückenden Rahmen richtig zur Geltung. Auch Texte, Grafiken, Tabellen und andere Elemente auf WWW-Seiten erhalten damit den nötigen Pep.
Egal, ob Sie einen hauchdünnen Strichrahmen wünschen oder einen fetten 3D-Effekt, egal, ob nur oben, nur rechts oder rundherum, CSS lässt Ihren gestalterischen Wünschen breiten Raum.
Doch nicht nur der Rahmen hebt das Werk hervor, auch auf den richtigen Innenabstand kommt es an. Klebt der Inhalt direkt an den Rahmenrändern, wirkt das Gesamtwerk nur noch halb so professionell. Darum kennt CSS auch spezielle Angaben hierfür.

Allerdings erweisen sich Netscape und Internet Explorer wieder einmal als Streithähne. Beide haben unterschiedliche Auffassungen, wie eine "Box", also ein Rahmen um ein absatzerzeugendes Element, zu interpretieren ist. Während der Internet Explorer in jedem Fall die gesamte Breite des Anzeigefensters, beziehungsweise die durch andere Style-Angaben erlaubte Breite, zur Anzeige der Box nutzt, dehnt Netscape die Box nur über die Breite des Inhaltes aus. Wollen Sie stets die gleiche Darstellung erzeugen, müssen Sie Netscape die Style Sheet-Angabe margin:0px; mitgeben. Dann dehnt auch Netscape 4 die Box über die gesamte Breite des Anzeigefensters.

 
Rahmen und Innenabstände Beispiel
border-top-width: Rahmendicke oben body { border-top-width:5mm; border-top-style:groove; }
border-bottom-width: Rahmendicke unten <p style="border-bottom-width:2pt; border-bottom-style:solid;">Text</p>
border-left-width: Rahmendicke links blockquote { border-left-width:1cm; border-left-style:inset; }
border-right-width: Rahmendicke rechts <p style="border-right-width:thin; border-right-style:outset;quot;>Text</p>
border-width: Rahmendicke
(zusammengesetzte Angabe)		 img.spezial { border-width:2cm;border-style:groove; }
border-color: Rahmenfarbe <div style="border-width:1cm; border-style:solid; border-color:#99CCFF;">Text</div>
border-style: Rahmentyp
none = kein Rahmen (beziehungsweise unsichtbar)
dotted = gepunktet
dashed = gestrichelt
solid = durchgezogen
double = doppelt durchgezogen
groove = 3D-Effekt
ridge = 3D-Effekt
inset = 3D-Effekt
outset   = 3D-Effekt
.Achtung { border-style:double; border-width:1cm; }
padding-top: Innenabstand oben td { padding-top:3mm; }
padding-bottom: Innenabstand unten <p style="border-bottom:thick groove silver; padding-bottom:10px;">Text</p>
padding-left: Innenabstand links p.wichtig { border-left:medium double blue; padding-left:12mm; }
padding-right: Innenabstand rechts <h1 style="border-right-style:solid; border-right-width:3mm;padding-right:9mm;">Text</h1>
padding: Innenabstand (zusammengesetzte Angabe) body { border: 1.5cm groove #FFDDFF; padding:1cm; }


Dergleichen Ungereimtheiten werden Ihnen beim Umgang mit CSS leider häufiger begegnen. Nur Ausprobieren und Erfahrung helfen dabei weiter - oder eines Tages eine neue Browser-Generationen, die CSS endlich vollständig unterstützt.

bezahlte Bannerwerbung:
 www.nutzwerk.com

Valid CSS! diesen Button dürfen Sie auf Ihre Website einfügen, wenn sie die Prüfung des CSS- Validators http://jigsaw.w3.org/css-validator/validator-uri.html bestanden hat.
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde