Container problemlos mit runden Ecken auszustatten wird erst mit CSS 3 kommen. Im Firefox kann man heute schon mit die Anweisung -moz-border-radius einer Box abgerundete Ecken verpassen.
Browserübergreifend geht das heute nur mit Grafiken, etwas CSS und je nach Anforderung mit zusätzlichen Boxen.
Im einfachsten Fall brauchen wir zwei Grafiken und kein zusätzliches Element. Diese Box wächst dann nur vertikal, was in vielen Fällen sicher ausreicht.
Hier findest du die rundeecken1_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: rundeecken1_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::
Die obere Grafik wird der Box zugewiesen und die untere Grafik drücken wir dem Textabsatz aufs Auge.
Bitte CSS ergänzen:
#container {background:#b2f8a8 url(rund_oben.png) no-repeat left top;}
#container p {background:transparent url(rund_unten.png) no-repeat left bottom;padding:0 15px 15px 15px;}
So schauts im Browser aus:
Das wars schon!
Wenn ihr mehr erwartet habt muss ich euch leider enttäuschen. Es funktioniert problemlos mit allen gängigen Browsern.
Ihr müßt nur aufpassen wenn die Box mehr als einen Textabsatz hat. Dann bekommt der letzte Textabsatz in der Box einfach eine Klasse mit der Hintergrundgrafik zugewiesen.
Pingback: Runde Ecken 2
Pingback: Runde Ecken 3