Forum Moderators: open

Message Too Old, No Replies

Putting images on top of eachother

Problem with div-tag

         

Surre

1:55 pm on Nov 7, 2005 (gmt 0)

10+ Year Member



I want to put images on top of eachother. And to do this I create serveral div-tags with different z-index and use relative positioning. So far so good. But what happens is that the images somehow takes more and more room. This results in that the tabel-cell in which all the images resides grows and grows and get enormous. To clearify- the tabel-cell will grow even if all the images are perfectly align on top of each other.

For every image I use something like this:

<div height=20 style='position:relative;left:10;top:-100;z-index:2;'>
<img border=0 src='testimg.gif'></div>

Do you know what is wrong?

Robin_reala

2:32 pm on Nov 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You want to be using absolute positioning. Declare the table cell to be position:relative, and your divs to be position:absolute (absolute to the nearest positioned container). Then set top and left of each image to be 0 and 0 (or whatever values you need).

Surre

6:08 pm on Nov 8, 2005 (gmt 0)

10+ Year Member



Do you mean to declare the table relative? Or how do you mean declare a cell relative? The cell is already positioned, isn't it?

And how does this have anything to do with this extra spaces I get, where do they come from?

I'll be glad to try your way but I am not sure how to do it. Could you give a short example code?

Thanks!