rahmen, runde ecken (+transparenz)

[kuno]

Hallo! :-)

Ich habe folgendes Problem:

Ich möchte gerne einen Rahmen mit runden Ecken verwirklichen.
Hierzu verwende ich bislang das folgende Prinzip:
http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken

Nun ist es jedoch so, dass der Hintergrund variable Farben hat.
Eigentlich müssten Die Ecken also eine transparente Hintergrundfarbe haben.
Ihr ahnt vermutlich schon die Problematik:
Da dieses Prinzip auf Schichten beruht, schimmern die unteren Ebenen aufgrund der Transparenten darstellung immer durch.

Soll heißen: Die für die Ecke verwendeten Grafiken dürfen nicht transparent sein.

Nun weiss ich leider auch nicht weiter.

[Patrick Andrieu]

Hallo kuno!

Ich möchte gerne einen Rahmen mit runden Ecken verwirklichen.
Hierzu verwende ich bislang das folgende Prinzip:
runde Ecken
Da dieses Prinzip auf Schichten beruht, schimmern die unteren Ebenen aufgrund der Transparenten darstellung immer durch.

Problem erkannt...

Soll heißen: Die für die Ecke verwendeten Grafiken dürfen nicht transparent sein.

Problem gebannt: Detlef G. zeigt mit dem vergilbten Papier mit angebranntem Rand ein entsprechendes Beispiel!

Viele Grüße aus Frankfurt/Main,
Patrick

[Kuno]

Ich sehe noch keinen Zusammenhang zu den runden Ecken.

[Patrick Andrieu]

Hallo Kuno!

Ich sehe noch keinen Zusammenhang

Dann spielen wir "ich sehe was, was Du nicht siehst..." :)

Wenn Du die Graphiken ersetzt, die den verkohlten Rand darstellen, durch solche mit abgerundeten Ecken?

Hier ist das von Dir geschilderte Problem sichtbar (Ecke links oben).

Hier - zumindest oben - nicht mehr. Unten hatte ich für meine Eiboxen eh keine runden Ecken vorgesehen und hatte, als der Thread noch aktuell war, auch nicht weiter damit experimentiert - weil die im Thread gestellten, "eibox-spezifischen" Probleme dank Detlefs Hilfe gelöst worden waren.

Viele Grüße aus Frankfurt/Main,
Patrick

[Kuno]

Dein Beispiel unterscheidet sich nicht von meiner Methode. Wenn du in deinem Ei-Beispiel unten auch runde Rahmen machst wirst du sehen, dass du genau dieselben Probleme haben wirst.

[Steel]

Hi,

Du sollst ja auch die entsprechenden Teile relativ verschieben. Was nciht uebereinanderliegt wird auch nicht uebereinadner dargestellt.

Falls das aus irgendwelchen Gruenden bei Dir nicht zutrifft, kannst Du gern etwas Code posten.

[Kuno]

Wenn ihr euch seinen Quelltext angesehen habt werdet ihr sehen, dass der Linke Hintergrund relativ hoch ist. Wenn ich nun eine Box mit einer Höhe von nur 50 Pixel haben möchte, muss ich die linke untere Ecke ÜBER DEN HINTERGRUND legen. Anders geht es nicht.
Er wird letztendlich dasselbe Problem haben.

[Engin]

Hi,

Dein Beispiel unterscheidet sich nicht von meiner Methode. Wenn du in deinem Ei-Beispiel unten auch runde Rahmen machst wirst du sehen, dass du genau dieselben Probleme haben wirst.

Warum, du ergänzt die divs, wie sie für die Rundungen Oben gegeben sind auf untere, Fertig.

Das würd vielleicht in richtung Div-Suppe gehen,
solange du jedoch damit leben kannst.

Ich Persöhnlich finde es auch sehr bedauerlich, das so eine kleinigkeit wie Runde Ecken nur so schwer realisierbar sind, soll
sich aber mit CSS 3 ändern.

Was allerdings mit CSS 14.5 auf uns zukommt,
wird alles andere in den Schatten stellen.  ;-)

Grüße,
Engin
 GYRO

[Detlef G.]

Hallo Kuno

Ich sehe noch keinen Zusammenhang zu den runden Ecken.

Das Papier hat zwar keine runden Ecken, es ist eben angebranntes Papier.
Das Grundprinzip dürfte allerdings für nahezu beliebig geformte Ränder oder/und Ecken geeignet sein.

Damit du siehst, wie es mit runden Ecken funktioniert: Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund.

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef,

Damit du siehst, wie es mit runden Ecken funktioniert: Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund.

Damit auch im IE7 kein Hintergrundrelikt eines Vorfahrenselementes hinter der linken oberen Ecke erscheint, scheint es erforderlich zu sein, dem die Weite der Box bestimmenden Element etwas anderes als overflow:visible zu geben, also zum Beispiel

  
#new {  
 width:80%;  
 overflow:hidden;  
}  

Gruß Gernot