Webstatt.org - Community seit 2006 - 2012 (2024?)

Ecken eines DIVs mit variabler Abmessung abrunden

user-210
10.04.2009 18: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 zwinkern
Sie haben soeben die Position Ihres Mauszeigers auf dem Monitor verändert. Bitte starten sie Windows neu damit die Änderungen wirksam werden.
Avatar user-180
11.04.2009 09: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
may the force be with you. but mostly with me.
user-210
16.04.2009 12: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.
Sie haben soeben die Position Ihres Mauszeigers auf dem Monitor verändert. Bitte starten sie Windows neu damit die Änderungen wirksam werden.
user-203
16.04.2009 13:00
Bei den Links vom user-180 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.
Denkt dran, Kinder auf dem Rücksitz verursachen Unfälle, Unfälle auf dem Rücksitz verursachen Kinder.