[CSS] runde Ecken, z-index?

[remcidy-paddy]

Hallo, bin gerade etwas am basteln.
Habe meinen Content Bereich mit runden Ecken versehen:
klick

Problem:
Alle Ecken außer untenlinks werden falsch dargestellt.
Die Ecken sind transparent; daher scheint das darunterliegende Bild durch.
Wie kann ich das umgehen?
Habe die Ecken daher transparent gemacht, damit sie auch gut aussehen, sollte ein Hintergrundbild genutzt werden. (Wenn es nur eine Farbe ist wie derzeit, könnte ich die transparenten Bereiche einfach in Hintergrundfarbe einfärben)

Kann mir da jemand helfen?
Danke.

 

[ITserVice]

ich würde mich mit den grafiken ein bisschen anders organisieren.

nimm eine grafik (mit den runden kanten rechts und links) für oben, und eine für unten.
villeicht funktioniert das ganze eher so:

<div id="rundekanten" style="z-index: 1;">
<img src="".... >
<div id="content" stlye="hier mit repeat-y die zwei seitlichen ränder; z-index: 2; width: 100%; height: 100%">
</div>
<img src=""....>
</div>

ist jetzt nur mal grob geschätzt ^^

viel erfolg, wenn dus nicht schaffst, pm an mich bitte. bin am iphone unterwegs ^^

 

[Lost Episode]

hi,
mach's doch so wie in deinem link in der linken unteren ecke ,auf 8 uhr. Da geht's doch...

verzeih, bin n noob in solchen sachen , konnt's mir aber nich verkneifen meinen senf dazu zu geben..

(hicks... seit 15 uhr feierabend...lol)

 

[ITserVice]

unten links funktioniert es, weil er die grafiken so aufgeteilt hat. ^^

lg

 

[remcidy-paddy]

unten links funktioniert es, weil er die grafiken so aufgeteilt hat. ^^

lg

Richtig, das ist der Punkt.

Zur ersten Antwort:
Ich würde es gerne so machen, damit es auch in der Breite frei skalierbar bleibt.
(Wobei das nicht funktioniert, seitdem ich dem body eine Breite von 950px verliehen habe, aber das wäre erst meine 2. Frage)

 

[ITserVice]

Also du kannst es ja auf beide Seiten skalierbar machen. So wie ich es
nach unten gestreckt habe, geht es doch in ir breite auch.

Einfach Ecke für Ecke in grafiken aufteilen und mit den Attributen Left, right platzieren.

Lg

 

[remcidy-paddy]

Also du kannst es ja ...

Aber so ist es doch momentan, oder nicht?

 

[ITserVice]

nein, derzeit nicht.
du musst wie gesagt die ecken einzeln aufteilen in grafiken.

 

[Darii]

Ich würde es eher mit einem

. rundebox {
    border: .5ex solid gold;
    -moz-border-radius: 1em;
    -webkit-border-radius 1em;
    -opera-border-radius 1em; /* funktioniert soweit ich weiß (noch) nicht, aber um für die Zukunft gerüstet zu sein */
    border-radius: 1em; /* für die Zukunft, wenn border-radius so eingebaut wird */
}

versuchen und den restlichen Kram einfach rausschmeißen. Im IE funktioniert das zwar nicht, aber das ist nur ein kleiner Schönheitsfehler, so lange die Seite benutzbar bleibt, ist das imo ok.

 

[remcidy-paddy]

Richtig. Im IE funktioniert das nicht.
Das ist mri aber wichtig, da der IE einer der am häufigsten genutzten Browser ist.
Genau daher möchte ich die Ecken nicht mit moz-border erstellen.

Bin noch nicht weiter als vorher. xD

 

[ITserVice]

von moz-border hab ich nie gesprochen.

nochmal:
teile deine grafiken (so wie du sie derzeit hast) auf (eine linke ecke, eine rechte ecke, eine linksunten, eine rechtsunten, eine für horizontal oben, eine für horizontal unten, eine für vertikal links und eine für vertikal rechts).

dann "baust" du dir das ganze mit den <div>'s zusammen. für die vertikalen und horizontalen linien verwende einen <div> wo du das ganze als hintergrund setzt und mit dem attribut repeat-x bzw. repeat-y in die richtung wiederholst, die du brauchst (je nach horizontal und vertikal)...

jedes template für irgend ein CMS macht es so (z.B.: bei manchen e107 standard templates).

Lg itserv