12.04.2008
Divs mit abgerundeten Ecken
Das CSS-basierte Layout geht grundsätzlich von rechteckigen Div's (Container, Boxen) aus. Mitunter wird zu Gestaltungszwecken aber auch gerne ein Div mit "abgerundeten Ecken" verwendet. Zwar können einige Browser mit den Angaben moz-border-radius oder khtml-border-radius abgerundete Ecken bereits darstellen; der Internetexplorer jedoch zum Beispiel noch nicht. Außerdem sollen diese Eigenschaften erst mit der CSS-3-Version offizieller Standard werden.
Um dennoch ein browsereinheitliches Layout zu ermöglichen, kann man mit gängigen CSS-Angaben bereits jetzt abgerundete Ecken so darstellen, dass sie von jedem Browser angezeigt werden.
Wir bedienen uns dazu zweier Grafiken, welche die oberen und unteren Ecken darstellen und die mit einem Grafikprogramm vorher angefertigt wurden. Bedingung bei dieser Anleitung ist, dass der Div eine feste Breite hat. Dementsprechend wird unter Berücksichtigung von Padding-Werten die Breite der Grafiken gewählt. Die Farbe wird nach eigenem Geschmack passend zum Gesamtlayout gewählt.
Im Beispiel kommen folgende Grafiken mit einer Breite von 300px, einer Höhe von 15px und dem Farbcode #ffbf00 zum Einsatz, die man sich mit einem Grafikprogramm wie Ulead Photo Impact X3
top.gif
bottom.gif
Top- und Bottom-Gif weisen wir jeweils einer Klasse als Hintergrundgrafik zu. Daraus resultieren folgende CSS-Angaben:
.top
{
background: url(top.gif);
width: 300px;
height: 15px;
}
.bottom
{
background: url(bottom.gif);
width: 300px;
height: 15px;
}
Dazwischen wird eine Box mit der gleichen Hintergundfarbe der Grafiken angeordnet. Da wir ihr noch einen linken und rechten Paddingwert von je 10px zuweisen, darf ihre Breite lediglich 280px sein, damit man nach dem Boxmodell wieder insgesamt auf die Gesamtbreite von 300px (entsprechend den Grafiken) kommt.
.box
{
width: 280px;
background: #ffbf00;
padding: 0 10px;
}
Im HTML-Teil fügen wir unsere Box-Bestandteile wie folgt zusammen:
<div class="top"></div>
<div class="box">
<h3 style="margin-top: 0;">Box mit abgerundeten Ecken</h3>
<p>
Mit Hilfe zweier Hintergrundgrafiken kann man auch bei einem CSS-basierten Layout Boxen mit abgerundeten Ecken darstellen.
</p>
<p style="margin-bottom: 0;">
Erforderlich ist eine top- und bottom-Grafik mit den abgerundeten Ecken sowie eine identische Hintergrundfarbe für die Box.
</p>
</div>
<div class="bottom"></div>
Wichtig:
Überschriften (<h>) und Absätze (<p>) haben standardmäßig bestimmte top- und bottom-Abstände. In manchen Browsern führt dies zu Lücken zwischen den Grafiken und dem Inhalt, sofern nicht der Universalselektor mit
* {margin: 0} definiert ist. Wer diese Definition verwendet, hat dann jedoch standardmäßig keine Abstände mehr bei den Überschriften oder zwischen den Absätzen.
Hier wurde deshalb auf diese Universal-Selektorangabe verzichtet und stattdessen dem ersten Element <h3> margin-top: 0; sowie dem letzten Absatz ein margin-bottom: 0; zugewiesen, siehe "fett"-dargestellte Angaben im HTML-Teil. Selbstverständlich kann man dem ersten und letzten Element der Box auch gesonderte Klassen zuweisen.
Das Ergebnis sieht nun so aus:
Box mit abgerundeten Ecken
Mit Hilfe zweier Hintergrundgrafiken kann man auch bei einem CSS-basierten Layout Boxen mit abgerundeten Ecken darstellen.
Erforderlich ist eine top- und bottom-Grafik mit den abgerundeten Ecken sowie eine identische Hintergrundfarbe für die Box.