Runde Ecken

[Icy]

Hallo, ich stehe momentan vor einem kleinen problem bzw. eigtl. vor zwei.
Vorweg: Es geht um folgende Seite: klick

Ich habe für eine neue Page einen Kasten definiert. Dieser Kasten soll abgerundete Ecken habe. Also habe ich mir jeweils vier runde Ecken gemacht, jeweils für eine Ecke des Kastens. Jetzt stehe ich vor zwei Problemen:

1. Ich habe in CSS vier Mal "background" definiert:

#main {
	background: white url(img/edge-br.png) no-repeat bottom right;
	background: white url(img/edge-bl.png) no-repeat bottom left;
	background: white url(img/edge-tr.png) no-repeat top right;
	background: white url(img/edge-tl.png) no-repeat top left;
}

Jedoch wird nur die als letztes definierte Ecke angezweigt, also die oben links.

2. Ich habe der gesamten Seite ein Hintergrundbild gegeben (graue Streifen) und dem oben genannten Kasten die Hintergrundfarbe weiß.
Wenn ich nun dem Kasten eine Ecke zuweise mit transparentem Hintergrund, dann wird natürlich der Hintergrund angezeigt, der darunter liegt (also die weiße Hintergrundfarbe). Das soll natürlich nicht so sein, denn ich will ja dass die grauen Streifen angezeigt werden.
Wie kann ich das verwirklichen?

Danke schonmal für jede Antwort! :-)

MfG Icy

 

[Dark D.]

Gib 4 DIVs, die du in den Ecken postierst, als Hintergund jeweils ein Eckbild.

 

[Icy]

Geht das denn nicht irgendwie einfacher? Sonst muss ich mein komplettes Layout wieder umschreiben :/

MfG Icy

 

[Dark D.]

Du kannst die Bilder auch direkt in den Quelltext schreiben und sie dann mit CSS positionieren.

 

[Frank]

einfach an Anfang oder ans Ende :

<img src="img/edge-br.png" alt="" style="position:absolute;bottom:0;right:0" />
<img src="img/edge-bl.png" alt="" style="position:absolute;bottom:0;left:0" />
<img src="img/edge-tr.png" alt="" style="position:absolute;top:0;right:0" />
<img src="img/edge-tl.png" alt="" style="position:absolute;top:0;left:0" />

 

[Icy]

Ah danke =)
Jetzt habe ich nur noch das Problem, das hinter der Ecke weiterhin die weiße Fläche ist :/

zur Seite

MfG Icy

 

[znay]

Hier eine nette Auflistung von Techniken, die dafür genutzt werden können: CSS Rounded Corners 'Roundup' | Smiley Cat Web Design

Solche Lösungen sind semantisch gesehen häufig besser geeignet als die Lösung mit IMG-Tags, da reine Designelemente ja nicht in den Code sollen.