CSS Layout mit abgerundeten Ecken
 

hi,
ich möchte ein layout erstellen mit css + xhtml:
so soll es aussehen:
http://dimension.xserv-media.de/layout2_ohne.jpg

ich weiss auch schon ungefähr wie ich es angehe mit elementumfluss usw float...
nur hab ich ja da abgerundete ecken - geht mit css nicht (ausser mozilla proprietäre eigenschaften moz-round-corner oder so ähnlich?, aber kommt ja mit css 3) ... also gehts nehm ich mal an - wie bei tabellenlayouts - mit eckgrafiken

nur nehm ich an macht man das bei schönen "sauberen" css layouts nicht so dass man die einfach mit img-tag einfügt in die seite, die grafiken stehen im css, nur wie? als bg bild: background-image:url(...)
außerdem sollen ja nur die ecken bilder sein, weil sonst zu groß

und bzgl. positionieren weiss ich auch nicht genau, muss ich dann in jedem aberundeten rechteck wieder 4divs machen die genau so hoch sind wie die eckgrafiken, oder wie macht man das am sinnvollsten? (wie hat das mozilla.org gelöst, macromedia.com)

danke,
dimension

Du glaubst gar nicht, wie viele Leute sich damit schon beschäftigt haben.

oh sry, normal such ich immer zuerst...
dabei hätt ich mir denken können dass auch schon andere leute vor mir (gibts sowas?) auf die idee von nicht-eckigen ... "runden! ecken" gekommen sind :lol:

dimension

Es geht sogar ganz ohne Grafiken.

Entweder mit Javascript: http://pro.html.it/esempio/nifty/
Da es sich um reine Verschönerungsaktionen handelt, finde ich Javascript dafür durchaus o.k. - zumal das HTML-Markup dabei schön schlank und übersichtlich bleibt und keine unnötigen <div>s eingesetzt werden müssen. Wer Javascript ausgestellt hat, muß dann halt mit eckigen Ecken leben. Wohl verschmerzbar.

Stu Nicholls hat natürlich wieder rumgetüftelt und löst es rein per CSS - von schlankem Markup kann aber leider nicht die Rede sein - hier werden lauter unsemantische [b]s ineinandergeschachtelt (das Ergebnis ist aber wie immer höchst beeindruckend): http://www.stunicholls.myby.co.uk/boxes/krazy.html
http://www.stunicholls.myby.co.uk/boxes/snazzy.html