Einleitung
Seit einiger Zeit benötige ich zum Umsetzen eines Designs in HTML eine Variante um möglichst flexible abgerundete Div-Container (nachfolgend: Container) zu erstellen.
Dabei bin ich auf viele verschiedene Möglichkeiten gestoßen und möchte die meiner Meinung nach (momentan) Beste vorstellen und beschreiben wie ich sie anwende.
Gleich zu Beginn schonmal die Vor- und Nachteile:
Vorteile
- Nur eine Grafik
- Sehr flexibel in Breite und Höhe (die Breite ist von der Größe der Grafik abhängig, dazu aber später mehr)
- Verhältnismäßig wenig HTML- und CSS-Code
- Kein Javascript
Nachteile
- Vorder- und Hintergrund muss einfarbig sein
Beschreibung
Grafik
Ich verwende eine Grafik mit den Maßen 2000px*16px. Dadurch habe ich die Möglichkeit, abgerundete Container mit einer Breite von 1000px zu erstellen. Warum “nur” 1000px, dazu jetzt mehr.
Hier die Grafik (Achtung: Nach rechts scrollen).
Die Grafik teilen wir uns gedanklich in zwei Bereich der Größe 1000px*16px.
Der linke Bereich stellt den größten Teil des Wunsch-Containers dar. Es fehlen nur die abgerundeten Ecken auf der rechten Seite.
Der rechte Bereich beinhaltet lediglich die abgerundeten Ecken am rechten Rand. Die restliche Fläche ist transparent.
Soviel vorerst zur Grafik.
Theorie
Bevor ich den HTML- und CSS-Code erkläre, vorerst die Theorie, was letztendlich passieren soll:
Wir erstellen einen Container mit einer Breite von 500px und variabler Höhe der als Grundlage für unseren späteren abgerundeten Container dient.
In diesem Container wird der benötigte HTML-Code für die abgerundeten Ecken eingebaut, der aus fünf Containern besteht.
Insgesamt haben wir also sechs Container, von denen der Erste den Zweiten, der Zweite den Dritten usw. einschließt.
Dadurch werden sechs Container der gleichen Größe aus HTML-Sicht “übereinander” gelegt.
Der unterste Container definiert die Größe des Wunsch-Containers.
Der zweite Container beinhaltet die obere linke, der Dritte die obere rechte, der Vierte die untere linke und der Fünfte die untere rechte abgerundete Ecke.
Im sechsen Container wird der Inhalt eingetragen.
HTML
Auf HTML-Seite ist es relativ einfach, jedoch ist die Reihenfolge wichtig:
<div class="container">
<div class="rounded-box tl">
<div class="rounded-box tr">
<div class="rounded-box bl">
<div class="rounded-box br">
<div class="rounded-box content">
Inhalt
</div>
</div>
</div>
</div>
</div>
</div>
CSS
Nun zum interessanten Teil:
div.container {
margin: 0;
padding: 0;
}
div.container div.rounded-box {
background-image:url(rounded-box.gif) top left no-repeat;
}
Um später nicht für alle vier Container (top left, top right, bottom left, bottom right) jeweils das Bild per background-image definieren zu müssen, definiere ich es einmalig in der CSS-Klasse “rounded-box”.
Ecke oben links (tl)
div.container div.rounded-box.tl {
background-position: left top;
}
Schritt #1 anzeigen
Das Hintergrundbild wird im Container am oberen linken Rand positioniert um die abgerundete Ecke anzeigen zu lassen.
Ecken oben rechts (tr)
Im nächsten Schritt wird die obere rechte Ecke hinzugefügt:
div.container div.rounded-box.tr {
background-position: right top;
}
Schritt #2 anzeigen
Dieser Container liegt direkt über dem tl-container. Die Positionierung des Hintergrundbilds ist diesmal so angelegt, dass die rechte obere Ecke angezeigt wird.
Hier kommt der transparente Bereich der Grafik zum Tragen. Wäre der Teil nicht transparent, würde die obere linke Ecke verdeckt werden.
Wie zu sehen ist, haben wird prinzipiell nur die Grafik an die Breite des ersten Containers angepasst. Es werden schon alle vier abgerundeten Ecken angezeigt.
Das Problem ist, dass sich die Grafik nicht an die Höhe des Inhalts anpasst.
Ecke unten links (bl)
Um nun die untere linke Ecke auch unterhalb des Textes zu positionieren, wird folgende CSS-Klasse genutzt:
div.container div.rounded-box.bl {
background-position: left bottom;
}
Schritt #3 anzeigen
Nun wird die Grafik ein zweites Mal angezeigt, dieses Mal jedoch an der unteren Kante und es fehlt die untere rechte abgerundete Ecke.
Ecke unten rechts (br)
div.container div.rounded-box.br {
background-position: right bottom;
}
Schritt #4 anzeigen
Wenn wir diese CSS-Klasse eingebaut haben, wird uns also die Grafik zwei Mal angezeigt:
Zum einen am oberen Rand und zum andere am unteren Rand des ersten Containers.
Das wichtige hierbei ist, dass wir an allen vier Ecken die abgerundete Grafik abgezeigt bekommen. Zwar entspricht das aktuelle Ergebnis noch nicht unserem Wunschergebnis, jedoch ist man dem Ziel schon deutlich näher.
Inhaltshintergrund
Im nächsten Schritt wird der fehlende Teil zwischen der oberen und unteren Kante mit der gewünschten Hintergrundfarbe befüllt:
div.container div.rounded-box.content {
background: #17a5c9;
}
Schritt #5 anzeigen
Wenn wir uns das Ergebnis nun aber anschauen, fehlen jegliche abgerundeten Ecken.
Der Grund dafür liegt in den Größen der Boxen. Es liegen sechs gleichgroße Div-Boxen übereinander. Wenn man sich das anhand gleich großer Folien auf einem Overheadprojektor vorstellt, versteht man auch das Ergebnis:
- Folie 1: Leer
- Folie 2: Oberer Bereich blau gefärbt inklusive einer abgerundeten Ecke mit weißem Hintergrund
- Folie 3: Der obere rechte Teil mit der abgerundeten Ecke
- Folie 4: Untere linke Ecke und bis zum rechten Rand blau
- Folie 5: Unterer rechter Bereich gefärbt (siehe Folie 3)
- Folie 6: Komplett blau gefärbt.
Um nun die abgerundeten Ecken wieder sichtbar zu machen, “schneiden” wir von Folie 6 oben und unten einen Teil ab. Die Höhe der abgeschnittenen Teile entspricht der Höhe einer abgerundeten Ecke. In diesem Fall also 5px.
Bezogen auf HTML bzw. CSS können wir nicht einfach einen Teil eines Containers abschneiden. Stattdessen bringen wir andere Boxen dazu, dass darauffolgende Container erst 5px unter ihnen anfangen dürfen.
Dazu nutzen wir die Eigenschaft padding.
Daraus ergibt sich letztendlich folgender CSS-Code:
div.container {
margin: 0;
padding: 0;
}
div.container div.rounded-box {
background:url(rounded-box.gif) top left no-repeat;
}
div.container div.rounded-box.tl {
background-position: left top;
}
div.container div.rounded-box.tr {
background-position: right top;
padding-top: 5px;
}
div.container div.rounded-box.bl {
background-position: left bottom;
}
div.container div.rounded-box.br {
padding-bottom: 5px;
background-position: right bottom;
}
div.container div.rounded-box.content {
background: #17a5c9;
padding: 0 5px;
}
Schritt #6 anzeigen
Nun werden auch wieder die abgerundeten Ecken angezeigt.
Damit der Text in der Box nicht am Rand “klebt”, habe ich noch einen rechten und linken Abstand definiert und das Ergebnis entspricht nun der Wunschvorstellung.
Diese Variante habe ich im IE6, IE7, Firefox, Opera und Safari getestet und sie funktioniert einwandfrei.
Demnächst werde ich einen auf diesem Artikel basierenden Beitrag schreiben, wie man mit dieser Methode Boxen mit einem Rahmen erstellt.
Mai 8, 2009 
4 Kommentare 
Was ist hier passiert?
