Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Besondere Rahmen mit CSS

Die meisten werden denken "Border, kenn ich doch". Aber man kann viel mehr damit machen als nur border="1" ins Image Tag eingeben. Und davon handelt dieser Workshop, nämlich von Möglichkeiten (und Grenzen) des Border Tags in CSS.

Beispiel 1

Dein Browser:

dashed dotted solid double groove ridge inset outset

Wie man deutlich sehen kann, haben die Browser eigene Vorstellungen davon, wie ein Rand aussehen soll.

Internet Explorer 6.0:

Internet Explorer 6.0

Firefox 1.0:

Firefox 1.0

Die Angabe "border-style" bestimmt das Aussehen des Randes: Möglich sind ( in der obigen Reihenfolge): dashed, dotted, solid, double, groove, ridge, inset, outset.
Es ist möglich, diese Angaben für jede der vier Seiten einzeln zu machen, z.B. border-top-style, border-bottom-style, border-left-style, border-right-style.

Der Internet Explorer bis einschließlich Version 5.0 interpretiert dotted und dashed nicht. Alte Browser wie der Netscape 4.x ignorieren border-style komplett und bringen alles durcheinander.

Beispiel 2

Dein Browser:

dasheddottedsoliddoublegrooveridgeinsetoutset

Was ist hier passiert: Nichts weiter als Border um Border. Eine CSS Angabe in einem anderen HTML Tag nimmt die neue Style Angabe auf:
<div style="border-color:black; border-style:double; border-width:10px; width:500px; ">
Und das kann man so oft wiederholen, wie man will.
Aber wie alle Internet Explorer User jetzt sehen, der Microsoft Browser macht Probleme, wenn die Breite nicht extra angegeben wird. Er versteht "display:table-cell;" nicht, übernimmt also die Styles aus dem übergeordneten div-Container. Allerdings mit einer eigenen Klasse, die Breite und Höhe dann extra regelt, klappt das auch im Internet Explorer wie hier zu sehen ist.

Beispiel 3

Dein Browser:

dashed dotted solid double groove ridge inset outset

Das Spiel kann man immer weiter treiben und noch einen Rahmen um den Rahmen um den Rahmen legen.

Border kann man in jedes HTML Tag einfügen, somit kann man auch ganze Textpassagen oder Überschriften markieren.

Noch mal zusammengefasst:
border-style beschreibt das Aussehen des Rahmen.
border-width bezeichnet die Dicke des Rahmens (in cm, mm, pt, px, %)
border-color bezeichnet die Farbe.
Alle Angaben können einzeln durch -top, -bottom, -left, -right ergänzt werden.

Der Abstand vom Rahmen zum Bild oder Text wird mit "padding" eingestellt. Auch padding kann man für jede Seite ( wie bei border) einzeln einstellen.