thedeal56
asked on
Z-Index Trouble
Check out this site:
http://www3.murfreesborotn.gov/newsite/index2.html
This is a really rough draft of a site, so keep in mind some things won't look exactly right.
Eventually, I am looking to add a css drop-down (mouse-over show/mouse-out hide) menu to this site. Currently, I have the beginnings of this menu under the bottom-most "Murfreesboro" image. You can't see it, because it's under another div on the page. I have tried messing with my z-index, but I can't move the hidden div in front of the image. I am attaching a screen shot that will show the hidden div. Let me know if this doesn't make sense, and I will attempt to explain myself better.
http://www3.murfreesborotn.gov/newsite/index2.html
This is a really rough draft of a site, so keep in mind some things won't look exactly right.
Eventually, I am looking to add a css drop-down (mouse-over show/mouse-out hide) menu to this site. Currently, I have the beginnings of this menu under the bottom-most "Murfreesboro" image. You can't see it, because it's under another div on the page. I have tried messing with my z-index, but I can't move the hidden div in front of the image. I am attaching a screen shot that will show the hidden div. Let me know if this doesn't make sense, and I will attempt to explain myself better.
Paul MacDonald
Maybe I'm missing something, but I don't see any z-order or CSS class information in the div tag at all.
ASKER
there's actually nothing in that particular div tag. I left it blank because my efforts didn't produce the desired results
Try:
...
<div class="murf" style="background: blue; height: 100px; z-index: 100" >
<img alt="Name" src="images/logo/bluemurf.
<div style="background: red; z-index: 999;" >
test
</div>
</div>
...
Set the height as appropriate
...
<div class="murf" style="background: blue; height: 100px; z-index: 100" >
<img alt="Name" src="images/logo/bluemurf.
<div style="background: red; z-index: 999;" >
test
</div>
</div>
...
Set the height as appropriate
ASKER
I made the changes to the page. you can refresh it to see the results. The div is still behind the main image.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ah, I am seeing a result with that position change. I will mess it more later on tonight
You will want to make sure it works in IE7 too because IE7 handles z-index differently.