Guten Tag,
ich arbeite zurzeit an einem Entwurf für eine neue Homepage und habe vor, eine Grafik mit Hilfe von "z-index" in den Hintergrund zu setzen. Dazu habe ich mir überlegt, einen div-Layer mit einem "z-index" von "6" um den Contentbereich zu legen und ebenfalls einen div-Layer mit dem "z-index" von "1" um die Grafik zu legen, die hinter dem Contentbereich angezeigt werden soll. Firefox hat aber scheinbar ein Problem mit dieser Lösung. Ich weiß nun leider nicht mehr weiter, wie man das Problem beheben kann.
Hat jemand von euch vielleicht eine Idee?
Ich habe zum besseren Verständnis eine Grafik angehängt:
Die Grafik, die hinter dem Contentbereich und hinter dem "Copyright" angezeigt werden soll, ist praktisch die transparente "Mauer" mit dem weißen Kreis. Ebenfalls habe ich zum Debuggen einen Border um alle div-Layer gesetzt.
Die Wahl des "z-index" von "6" kommt daher zu stande, weil das Menü ebenfalls überlappt dargestellt werden soll und ich dafür schon die Werte von "2-5" verwendet habe.
Die zurzeit verwendeten CSS-Eigenschaft sind:
Der HTML-Code mit den Div-Layer für die "wichtigen" Bereich lautet:
Ich danke euch schonmal im Voraus für die Hilfe
ich arbeite zurzeit an einem Entwurf für eine neue Homepage und habe vor, eine Grafik mit Hilfe von "z-index" in den Hintergrund zu setzen. Dazu habe ich mir überlegt, einen div-Layer mit einem "z-index" von "6" um den Contentbereich zu legen und ebenfalls einen div-Layer mit dem "z-index" von "1" um die Grafik zu legen, die hinter dem Contentbereich angezeigt werden soll. Firefox hat aber scheinbar ein Problem mit dieser Lösung. Ich weiß nun leider nicht mehr weiter, wie man das Problem beheben kann.
Hat jemand von euch vielleicht eine Idee?
Ich habe zum besseren Verständnis eine Grafik angehängt:
Die Grafik, die hinter dem Contentbereich und hinter dem "Copyright" angezeigt werden soll, ist praktisch die transparente "Mauer" mit dem weißen Kreis. Ebenfalls habe ich zum Debuggen einen Border um alle div-Layer gesetzt.
Die Wahl des "z-index" von "6" kommt daher zu stande, weil das Menü ebenfalls überlappt dargestellt werden soll und ich dafür schon die Werte von "2-5" verwendet habe.
Die zurzeit verwendeten CSS-Eigenschaft sind:
Code:
#main
{
z-index: 6;
border: 1px #000 solid;
}
[...]
#bg_bottom
{
position: absolute;
left: 20%;
top: 60%;
width: 762px;
height: 323px;
z-index: 1;
border: 1px #000 solid;
}
Der HTML-Code mit den Div-Layer für die "wichtigen" Bereich lautet:
HTML:
[...]
<div id="main">
[...] // Der Contentbereich (der weiße Bereich mit "Bild der Woche", "Latest" und "Event Reviews")
</div>
[...]
<div id="bg_bottom"><img src="./images/bg_bottom.png" width="764" height="324"></div>
[...]
Ich danke euch schonmal im Voraus für die Hilfe
Zuletzt bearbeitet: