Box mit runden Ecken mit DIVs

[Rainer]

Hi!

Ich werd noch verrückt, ich will mich jetzt auch mal den "CSS-Layouts" versuchen und die "bösen" Tabellen-Layouts hinter mich lassen. Aber ich häng scho bei so einfachen Sachen...

Ich kenn die "Box mit runden Ecken"-Lösung von Selfhtml (http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/), aber mal ehrlich: da hab ich zwar schönen und wenig Code, dafür aber vier dicke Bilder. Das stört mich, weil eigentlich brauch ich ja nur die vier kleinen Ecken, spart Ladezeit und Traffic.

Also will ichs wie mit ner Tabelle lösen, jedoch funktionierts weder im FF noch IE. Der FF ignoriert den linken und rechten Rand und zieht den Border unten ganz durch. Beim IE sieht das ganze fast richtig aus, nur dass der irgendwo Abstände herkriegt, obwohl ich margin und padding auf 0 hab.

Ich peil das ganze ned wirklich, wär super wenn mir jemand helfen könnt.

Der Code:

<style type="text/css">
div.box_top-left { background: url("gfx/box_top-left.gif") top left no-repeat; width: 11px; height: 11px; float: left;}
div.box_top-right { background: url("gfx/box_top-right.gif") top right no-repeat; width: 11px; height: 11px; float: right;}
div.box_bottom-left { background: url("gfx/box_bottom-left.gif") bottom left no-repeat; width: 11px; height: 11px; float: left;}
div.box_bottom-right { background: url("gfx/box_bottom-right.gif") bottom right no-repeat; width: 11px; height: 11px; float: right;}
div.box_top { border-top: 1px solid #000000; background-color: #e4e4e4; height: 11px;}
div.box_left { border-left: 1px solid #000000; background-color: #e4e4e4; width: 11px; float: left; }
div.box_bottom { border-bottom: 1px solid #000000; background-color: #e4e4e4; height: 11px;}
div.box_right { border-right: 1px solid #000000; background-color: #e4e4e4; width: 11px; float: right;}
div.box_content { background-color: #e4e4e4; padding: 5px;}
#test div {margin: 0; padding: 0;}
</style>

<div id="test" style="width: 500px; margin-left: 50px">
<div class="box_top-left"></div><div class="box_top-right"></div><div class="box_top"></div>
<div class="box_left"></div><div class="box_right"></div><div class="box_content">
Hier ist der wundersch&ouml;ne Inhalt dieser Box!
</div>
<div class="box_bottom-left"></div><div class="box_bottom-right"></div><div class="box_bottom"></div>
</div>

merci!
Greets
Rainer

[Joachim]

Hi,

Ich kenn die "Box mit runden Ecken"-Lösung von Selfhtml (http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/), aber mal ehrlich: da hab ich zwar schönen und wenig Code, dafür aber vier dicke Bilder. Das stört mich, weil eigentlich brauch ich ja nur die vier kleinen Ecken, spart Ladezeit und Traffic.

Warum weniger manchmal mehr ist liest Du hier http://learningtheworld.eu/2007/performance/
Runde Ecken Rezept gibts hier http://www.alistapart.com/articles/slidingdoors/

Gruesse, Joachim

[Rainer]

Hi!

Danke! Sind ja echt interessante Links, nur teilweise etwas zu hoch für mich ;)

greets
Rainer

[Gernot Back]

Hallo Rainer,

Ich kenn die "Box mit runden Ecken"-Lösung von Selfhtml (http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/), aber mal ehrlich: da hab ich zwar schönen und wenig Code, dafür aber vier dicke Bilder. Das stört mich, weil eigentlich brauch ich ja nur die vier kleinen Ecken, spart Ladezeit und Traffic»» merci!

Dann mach es doch statt mit vier ineinander verschachtelten DIV-Elementen, die jeweils eine Ecke und eine Kante gemeinsam zeigen, mit acht ineinander verschachtelten Elementen, die jeweil entweder Kante oder Ecke zeigen:

Zuerst verschachtelst du die Elemente mit den Kanten (jeweils ganz kleine Bilder mit repeat-x bzw. repeat-y wiederholt  (je nachdem) und dann kommen zum Schuss die Ecken dran mit no-repeat. Schlanker geht's nimmer, auch nicht mit Tabellen.

Gruß Gernot

[Rainer]

Hi!

Das hab ich doch versucht, siehe Quellcode und Link, aber weder IE noch FF stellen das richtig dar. Die repeats sollten eigentlich egal sein, weil ich die DIVs genauso groß wie die ecke sind mach.

Peil ned wo der Fehler ist.

Merci!
Greets
Rainer

Hallo Rainer,
Dann mach es doch statt mit vier ineinander verschachtelten DIV-Elementen, die jeweils eine Ecke und eine Kante gemeinsam zeigen, mit acht ineinander verschachtelten Elementen, die jeweil entweder Kante oder Ecke zeigen:

Zuerst verschachtelst du die Elemente mit den Kanten (jeweils ganz kleine Bilder mit repeat-x bzw. repeat-y wiederholt  (je nachdem) und dann kommen zum Schuss die Ecken dran mit no-repeat. Schlanker geht's nimmer, auch nicht mit Tabellen.

Gruß Gernot

[Gernot Back]

Hallo Rainer,

Das hab ich doch versucht, siehe Quellcode und Link, aber weder IE noch FF stellen das richtig dar. Die repeats sollten eigentlich egal sein, weil ich die DIVs genauso groß wie die ecke sind mach.

Das ist ja dann eben gerade falsch. Denn der eigentliche Inhalt der DIVs soll ja auch noch Platz haben, nicht nur der eigentlich unwichtige Design-Schnickschnack.

Gruß Gernot