In meinem letzten Artikel Runde Ecken 1 habe ich die einfachste Form einer relativ flexiblen Box mit abgerundeten Ecken erklärt.
Die nächste Stufe ist eine teilflexible Box mit Rahmen.
Hier findest du die rundeecken2_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: rundeecken2_grafik.htm.
Du brauchst die Grafiken nicht mal selber zu erstellen, das kannst du auch online mit wenigen Klicks auf RoundedCornr.
Bitte denkt daran, den Hintergrund der Ecken nicht transparent zu machen, sondern in der Farbe des Hintergrundes vom Container, wo die Grafik drinhockt!
Die Grafiken schauen so aus::
Zwei Grafiken sind in diesem Fall leider nicht ausreichend, da sich beim Vergrößern der Rahmen nicht automatisch verlängert. Das geht nur wenn die mittlere Grafik mit repeat-y eingebunden wird.
Die gute Nachricht ist, das wir immer noch kein zusätzliches Element brauchen.
Die Box bekommt die mittlere Grafik, die h2-Überschrift die obere Grafik und der Textabsatz die untere Grafik.
Bitte CSS ergänzen:
#container {background:#b2f8a8 url(rund2_mitte.gif) repeat-y left top;}
#container h2 {background:url(rund2_oben.gif) no-repeat left top;}
#container p {background:url(rund2_unten.gif) no-repeat left bottom;padding:0 12px 12px 12px;}
Im Browser schaut es so aus:
Das wars schon!
Vielleicht fragt ihr euch, warum die Ecken oben auch rund sind. Schließlich haben wir der Box die mittlere Grafik gegeben und die hat oben keine runden Ecken.
Ganz einfach, die h2-Überschrift steht im Quelltext nach dem Eröffnungs-Tag der Box, d.h. die Hintergrundgrafik der Überschrift überdeckt deshalb die Hintergrundgrafik der Box.
Wenn euch nicht so klar ist warum das so schaut euch mal diesen Artikel an.
Pingback: Runde Ecken 3
Pingback: Anonymous
Pingback: runde ecken-variable H
Pingback: Anonymous
Pingback: Mitwachsende Container: 4 Boxen - XHTMLforum