Willkommen in der Webstatt Zum Webstatt Blog und Stories
Julian am 10.04.09 20:28

Hallo Leute,

ich steh gerade mal wieder vor einem Problem mit CSS.

Ich habe ein DIV-Container mit variabler Breite und möchte die Ecken gerne abrunden. Habt ihr eine Idee wie man soetwas realisiert?
Bei statischen Abmessungen würde ich einfach ein Hintergrundbild mit passender Breite einfügen, was die abgerundeten Ecken zeigt.
Durch die variable Breite (und Höhe) geht das nicht und ich bräuchte 4 Bilder für alle 4 Ecken, wobei ich nicht weiß wie ich diese im DIV anordnen soll.

Geht da was mit background-repeat etc.?!

Hoffe meine Problematik kommt einigermaßen verständlich rüber ;)

netcup.de Warum gibt es hier Werbung?
fish fish am 11.04.09 11:51

ich glaube runde ecken ist eines der am meissten behandelten css-probleme. du musst den text in verschiedene divs verschachteln. das ist zwar dann semantisch oft fragwürdig, aber die einzige lösung für dieses problem.
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
da sollten einige tutorials auch für komplette skalierbarkeit drin sein, zb: http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken

Julian am 16.04.09 14:28

Dank dir für die Antwort und Tipps.

Ich habe in der Zwischenzeit auch eine weitere Lösung gefunden (mag beim ersten Link bestimmt auch dabei sein).

Hier mal die "Lösung":

.box {
position: relative;
}

div.box-top-left {
background: url(ecke_ol.jpg) no-repeat;
top: 0;
left: 0;
position: absolute;
width: 20px;
height: 20px;
display: block;
z-index: 1;
}

div.box-top-right {
background: url(ecke_or.jpg) no-repeat;
top: 0;
right: 0;
position: absolute;
width: 20px;
height: 20px;
display: block;
z-index: 1;
}

div.box-bottom-left {
background: url(ecke_ul.jpg) no-repeat;
bottom: 0;
left: 0;
position: absolute;
width: 20px;
height: 20px;
display: block;
z-index: 1;
}

div.box-bottom-right {
background: url(ecke_ur.jpg) no-repeat;
bottom: 0;
right: 0;
position: absolute;
width: 20px;
height: 20px;
display: block;
z-index: 1;
}

<div class="box">
<div class="box-top-left"></div>
<div class="box-top-right"></div>
{{CONTENT}}
<div class="box-bottom-left"></div>
<div class="box-bottom-right"></div>
</div>


Sicherlich nicht die schönste Variante, zumal ich so eine Box mehrfach einsetzen möchte. Das würde den Quellcode ziemlich aufblähen.

Aber ich werde vermutlich das Design nochmal überdenken.

Johannes am 16.04.09 15:00

Bei den Links vom fish gibt es Javascriptlösungen, die nach CSS-Klassen suchen und dann eben diesen Code für die Ecken hinzufügen.
Aus
<div class="box rundeecken">{{CONTENT}}</div>
würde dann halt dein
<div class="box">
<div class="box-top-left"></div>
<div class="box-top-right"></div>
{{CONTENT}}
<div class="box-bottom-left"></div>
<div class="box-bottom-right"></div>
</div>


Das räumt den Quellcode schon sehr auf. Nur wer kein Javascript (angeschaltet) hat, sieht dann halt keine Rundungen.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt