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.
Dein Browser:
Wie man deutlich sehen kann, haben die Browser eigene Vorstellungen davon, wie ein Rand aussehen soll.
Wenn die Smileys überall verteilt sind, oder nicht angezeigt werden, ist der Browser zu alt.
Internet Explorer 6.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.
Wie man hier deutlich sehen kann, sitzen die Grafiken irgendwo in der Datei, und nicht da, wo sie hingehören - nämlich hinter "Dein Browser".
Dein Browser:
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.
Dein Browser:
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.
