Zwei Artikel zu Boxen mit abgerundeten Ecken habe ich bereits verfasst:
Runde Ecken 1 und Runde Ecken 2.
Im dritten Artikel wird die Box mit runden Ecken am Ende voll flexibel sein, d.h. sie hält einer Schriftvergrößerung von sechs Stufen stand.
Hier findest du die rundeecken3_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: rundeecken3_grafik.htm
Bitte denkt daran, den Hintergrund der Ecken nicht transparent zu machen, sondern in der Farbe des Hintergrundes vom Container, wo die Grafik drinhockt!
Zur Verdeutlichung habe ich die vier Grafiken mal in einem Tableau zusammengefasst:
In diesem Fall sind es vier Grafiken, d.h. wir benötigen leider zusätzliche Elemente.
Deshalb schauen wir uns erstmal den Quelltext an:
<div class="container"><div class="container_innen"><div class="container_ganzinnen"><h2>Box mit runden Ecken</h2><p>Diese Box ist..........usw.</p></div></div></div>
Zwei weitere Elemente sind hinzugekommen:
div.container_innen und div.container_ganzinnen.
Die Maßeinheiten habe ich konsequent in em abgeändert, damit die Box auch bei Textvergrößerung in alle Richtungen gleichmäßig mitwächst.
Bitte CSS ergänzen:
.container {background:#b2f8a8 url(rund3_untenlinks.gif) no-repeat left bottom;}
.container .container_innen {background: url(rund3_untenrechts.gif) no-repeat right bottom;}
.container .container_ganzinnen {background: url(rund3_obenlinks.gif) no-repeat left top;}
.container h2 {background: url(rund3_obenrechts.gif) no-repeat right top;padding-top:0.3em;}
.container p {padding: 0.5em;}
Ergebnis im Browser:
Ist ja fast zu einfach. Was kann denn dabei schiefgehen?
Einiges!
In diesem Beispiel habe ich padding erst definiert nachdem ich die Grafiken eingebunden habe.
Mit margin würde ich es genauso machen.
Ganz schnell sind nämlich statt vier runden Ecken z.B. nur eine oder drei da. Dann geht das wilde Rumgefuchtel mit verschiedenen paddings/margins los, die man vielleicht ja schon definiert hatte, bevor man die Grafiken eingebunden hat.
Deshalb bin ich da erstmal vorsichtig, setze alle paddings und margins für die Box auf null und ergänze dann die Abstände mit ständiger Zwischenkontrolle im Browser vorsichtig.
Außerdem verwechselt man beim Einbinden der Grafiken z.B. schnell mal left bottom mit right bottom oder left top mit left bottom, usw..
Ein wenig muss man auch schauen welche Grafik man welchem Element zuteilt, damit es nicht zu unliebsamen Überraschungen kommt.
Wie immer sehr hilfreich bei der Fehlersuche ist das Firefox Addon Firebug, hier ein deutsches Tutorial dazu.
Was mir an dieser Methode überhaupt nicht gefällt, ist diese Div-Suppe, die das Markup unschön aufbläht.
Ich würde der äußeren Box noch eine maximale Breite zuweisen, die sich an der größten Hintergrundgrafik orientiert. Dann kann es auch im dümmsten Fall nicht zerbröseln.
Hi David,
jep, volle Zustimmung.
Deshalb mache ich runde Ecken nur auf besonderen Wunsch.
Aber viele versuchen sich dran und sind vielleicht ganz froh mal sowas nachbauen zu können.
Je nachdem wieviel Runde-Ecken-Boxen man hat, kann der Aufwand erheblich sein.
Man könnte in dem Fall überlegen ob man nicht mit einer einfachen -moz-border-radius -Anweisung den FF-Usern die runden Ecken zeigt.
Der Aufwand wäre nicht groß und wenigstens ein Teil der Besucher bekäme das zu sehen.
Pingback: Formular-Div mit runden Ecken - XHTMLforum
Pingback: runde ecken-variable H
Pingback: Anonymous
Pingback: Box mit runden Ecken, Bild richtig Positionieren - XHTMLforum
Pingback: obere linke- und untere linke Ecke werden nicht angezeigt - XHTMLforum
Diese Information ist sehr nützlich für mich. Ich werde versuchen, diese deffinatelly. Ich fand eines der besten Verbindung. Versuchen Sie, diese grafiken