Page 1 of 1
Reihenfolge der Anzeige von <div>
Posted: Wed May 27, 2009 6:17 am
by 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
Re: Reihenfolge der Anzeige von <div>
Posted: Wed May 27, 2009 6:22 am
by 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.
Re: Reihenfolge der Anzeige von <div>
Posted: Wed May 27, 2009 6:37 am
by 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
Re: Reihenfolge der Anzeige von <div>
Posted: Wed May 27, 2009 6:41 am
by 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...
Re: Reihenfolge der Anzeige von <div>
Posted: Wed May 27, 2009 8:36 am
by 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
Re: Reihenfolge der Anzeige von <div>
Posted: Wed May 27, 2009 9:41 am
by antibart
Die Position müsstest Du (eventuell) auch noch angeben.
EDIT: und der Divs ist nun auch ein anderer ...