Reihenfolge der Anzeige von <div>

[michi1979]

Hallo,
ich habe folgendes Problem:

Im Template definiere ich gleich zu Beginn des Bodys mehrere DIV's über welche verschiedene Bilder angezeigt werden:

Code: Select all

<div id="bild1" style="position:absolute; z-index:1; left: 10px; top:70px">
<img src="bild1.gif"></div>

<div id="bild2" style="position:absolute; z-index:2; left: 80px; top:350px">
<img src="bild2.gif"></div>

<div id="bild3" style="position:absolute; z-index:3; left: 20px; top:600px">
<img src="bild3.gif"></div>

Nun habe ich das Problem, dass wenn das Browserfenster kleiner gemacht wird, diese Bilder in den Navigationsbereich
gehen und diesen überdecken.

Habt ihr nen Tipp für mich ?
Mir wäre es am liebsten, wenn diese Bilder hinter der Navigation verschwinden wenn das Browserfenster kleiner gemacht wird.

Gruß,
Michi

[antibart]

... in dem Du das DIV mit der Navigation ebenfalls als Layer definierst und jenem im z-index den höchsten Wert zurordnest.

also zum Beispiel so:



#bild1 {position:absolute; z-index:1;}

#bild2{position:absolute; z-index:2;}

#navi {position:absolute; z-index:3;}

.. usw

Mit z-index bestimmst Du die Reihenfolge, in der die Layer übereinanderliegen. Wenn Du die Navigation nicht als Layer definierst, liegt sie natürlich ganz hinten.

[michi1979]

Hi,
danke für die Info.
Weiter unten im Template gibt es folgenden Punkt für die Navigation:

Code: Select all

<div id="menu_vert" z-index:4;>
         <h2 class="accessibility">Navigation</h2>
         {menu template='simple_navigation.tpl' collapse='1'}
</div>

Leider funktioniert es nicht. Die drei Bilder überdecken die Navigation nach wie vor.

Gruß,
Michi

[antibart]

Code: Select all

<div id="menu_vert" z-index:4;>
         <h2 class="accessibility">Navigation</h2>
         {menu template='simple_navigation.tpl' collapse='1'}
</div>

Wenn es da wirklich so steht und du dich nicht nur vertippt hast, ist das auch falsch: da fehlt ein style="z-index:4" und soweit ich weiß - das ist aber ohne Gewähr - bracht jeder layer die position:absolute...

[michi1979]

Habs jetzt mal so gemacht:

Code: Select all

<div id="leftsidebar" style="position:absolute; z-index:4;">

Mal schauen, ob es so passt

Gruß und vielen Dank,
Michi

[antibart]

Die Position müsstest Du (eventuell) auch noch angeben.

EDIT: und der Divs ist nun auch ein anderer ...