Forum Moderators: not2easy
I have an <UL> of thumbnail images in a div that is set to [overflow: auto] so that I can add more images at a later date. When a thumbnail is onmouseover'd, a larger image appears in a second div <div id="mainPic">. This works great, but I want to add some descriptive text underneath the mainPic div.
I thought about having stacked divs that were made visable linked to the onmouseover using the show/hide layer behaviour in DW8. I set up some divs, gave them all different Z-Index values and positioned them at 0,0 but they appear vertically under each other instead of on top of each other.
Any help would be most gratfully received, either to fix the code or a bit of out of the box thinking that approches the prob from a different perspective. So far to keep the client kinda happy, I've put a short piece of text in the title tag if the thumbnail.
Then set all the divs/elements to position:absolute;top:y;left:x where I think in your case both x and y are 0.
You do not need to set z-indexes, since only 1 will be displayed at a time anyways. Stacking order is also automatically calculated based off order of appearance too, so even then you wouldn't need to assign a z-index, just set them in the order you wanted them stacked (last element will appear on top)
That's all you wanted, right? A way to have all the descriptions go on top of eachother?
Strange that you said they didn't stack in the first place the way you did them. how, exactly, did you do them? (I have to assume you did position:relative)
[edited by: Xapti at 3:46 am (utc) on June 17, 2007]