[kolja82]

Nabend Forum

Ich würde gerne einen DIV-Layer mit Kontur und abgerundeten Ecken darstellen.

Mein Problem ist jetzt, das die Kontur (border) über die "Runde-Ecken-Bilder" läuft.
Ich muss also mit den Hintergrundbilder in den Vordergrund!

Habe es schon mit der Z-Ebene versucht, aber leider ohne erfolg...

Hat von euch einer ne Idee ?

Grüße vn Kolja

[MG90]

hast du jede ecke als einzelnes div? oder wie hast du es gelöst? zeig am besten mal den code.

[heiko_rs]

Die übliche Vorgehensweise ist nicht leere Elemente für die Ecken, sondern Verschachtelung nach diesem Prinzip: http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken

Die border kannst Du trotzdem integrieren, musst aber ggf. etwas tricksen. Für konkrete Tipps poste mal einen Link oder eine Grafik des fertigen Designs.

[kolja82]

Nabend

Danke für die Beiden Antworten und den sehr interessanten Link!
Leider wird dort eine andere Situation behandelt, die Seite ist aber Klasse.

Ich versuche mal den Code zu Posten:

gelbe Box mit grünem Rahmen:

[heiko_rs]

Wirf die leeren Elemente raus und verschachtele 3 divs:

[kolja82]

Hallo Heiko

Danke für die Codezeilen!
Ich habe das mal an einer Box getestet und für gut befunden!
Nur muss ich halt immer den html Code ändern,
und da es sehr viele von den Boxen gibt, ist das ne große Menge Arbeit.

Kann ichdas ganze nicht irgendwie nur in der CSS machen ?

Grüße von Kolja

[heiko_rs]

Da das Ganze vert. & horiz. skalierbar sein und sicher auch browserübergreifend funktionieren soll, wirst Du um Markup-Änderungen nicht herumkommen. Die hättest Du aber eh vornehmen müssen, auch mit Deiner ursprünglichen span-Lösung.

[sahnemuh]

Mach's per border-radius (css3) und nimm für ie<9 dieses script. Der Rest kriegt halt keine Rundungen. Damit hast du schätzungsweise 95% der Seitenbetrachter befriedigt. Leuten mit Browsern von Anno-Dazumal werden die eckigen Flächen zu schätzen wissen und haben nichts besseres verdient