Ebenen mit gerundeten Ecken

[Marki87]

Hallo zusammen!

Mich plagt ein grundsätzliches Problem beim Aufbau meiner ersten Website.
Nachdem sich der dynamische Teil langsam dem Ende zuneigt, wollte ich mich nochmal dem Design zuwenden, denn dies hatte ich zuvor mit simplen Ebenen auf einfarbigem Hintergrund erzeugt.
Nun ist meine frage, ob man diesen Ebenen gerundete Ecken verpassen kann (dies scheint ja bei vielen Websites zum Standard zu gehören) und wie das in Dreamweaver funktioniert.

Wenn ihr mir aber grundsätzlich von der Verwendung von Ebenen (zwecks Browserkompatibilität, Zentrierung, etc.) abraten würdet, wäre ich für Alternativvorschläge sehr dankbar!

[Mich@el]

Hi Marki87,
runde Ecken? Bitteschön!

Grüße
Michael

[Marki87]

Danke für den Link!
Ich muss also mir einfach den Quelltext anzeigen lassen und das dann bei mir reinkopieren (oder stelle ich gerade eine sehr peinliche Frage??)

[Mich@el]

Nee, nicht peinlich!
Genauso geht´s.

[Marki87]

Könntest du mir dann noch sagen, was ich aus dem Head-Teil übernehmen muss? Denn ich will ja meine vorhandenen Ebenen überarbeiten, und keine neuen erstellen.
Vielen Dank!

[Mich@el]

Von diesem Beispiel ist das der CSS Code:

PHP-Code:

<style type="text/css">

.curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}
</style> 


und das dazugehörige HTML:

PHP-Code:

<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div> 


Grüße
Michael