Hallo!
Unter http://62.146.42.45/csstest.html habe ich eine Testseite erstellt, bei der ich mit Hilfe eines DIVs und einer darin enthaltenen Tabelle ein bestimmtes Layout erreiche, nämlich einen farbigen Bereich der außen herum noch einen Rand hat, allerdings mit einem gewissen Abstand.
Eigentlich finde ich es sehr unschön, dass ich für das Layout eine Tabelle verwenden musste. Viel lieber würde ich mit zwei geschachtelten DIVs arbeiten. Allerdings ist es mir nicht gelungen, dieses Layout mit zwei geschachtelten DIVs nachzubauen.
Mein Problem ist, dass das innere DIV nie exakt das äußere DIV ausfüllt. Während die Größenangabe "width: 100%; height: 100%" für die Tabelle das gewünschte Ergebnis erzielt, reicht ein DIV, das mit den gleichen Eigenschaften formatiert wird, rechts und unten über das äußere DIV hinaus (http://62.146.42.45/csstest2.html). Das ist gemäß CSS-Spezifikation sogar korrekt, da eine Breite von 100% bedeutet, dass das innere DIV genau die gleiche Breite hat wie das äußere, wobei *danach* noch die Ränder drauf gerechnet werden. Aber wie kann ich dann das gewünschte Ergebnis erreichen?
Natürlich könnte ich dem inneren DIV explizit eine Größe zuweisen. Da ich aber mehrere solcher Elemente mit unterschiedlichen Größen auf meiner Seite habe, ist diese Lösung unschön. Mit relativen Werten < 100% zu probieren ist auch nicht wirklich sinnvoll, da ich damit keine exakten Abstände bekomme. Schließlich würde mir als Workaround einfallen, die Ränder mit Grafiken zu gestalten (http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm). Das mag für das hier vorliegende Problem ein Ausweg sein, ich kann mir aber leicht andere Situationen vorstellen, wo das nicht hilft. Daher bleibt die Frage, ob es eine allgemein gültige Lösung für das Problem gibt.
Im Forum und in den Tipps habe ich nichts gefunden, daher hoffe ich, dass mir hier vielleicht jemand helfen kann. Vielen Dank schon mal im Voraus!
Christian
nicht angemeldet
Gunnar Bittersmann