Ich habe ein Layout, bei dem sich der gesamte Seiteninhalt in einem Kasten mit abgerundeten Ecken befindet. Dies schließt den Titel der Seite usw. ein. Ich habe eine div
Element, das meinen Header-Inhalt enthält, ein div
die den Hauptinhalt der Seite enthält, und eine div
die die Fußzeile enthält. Mein Problem ist folgendes: Da der Rand meiner "Kopfzeile" div
nicht abgerundet ist, der große "Container" div
scheint oben nicht abgerundet zu sein. Ich habe nachgeforscht und festgestellt, dass dies einfach die "Kopfzeile" ist div
die sich über den "Container" legt div
. Ich habe hier ein Beispiel: http://jsfiddle.net/V98h7/ .
Ich habe versucht, den Rand der "Kopfzeile" abzurunden. div
in gleichem Maße, was jedoch zu einem kleinen Defekt am Rand führt (er erhält einen eigenen Rand, den "Kopf". div
die Hintergrundfarbe). Aus Verzweiflung habe ich auch versucht, den Z-Index des Containers auf eine große Zahl. Das hat nichts gebracht.
Ich bin der Meinung, dass es eine einfache Lösung für dieses Problem geben sollte. Ich möchte keine Javascript-Lösung. Ich würde CSS bevorzugen, aber LESS ist auch in Ordnung.