I'm trying to overlap 6 images (gifs of playing cards) using relative positioning. The images are brought in from a Java servlet via binary stream.
The closest I've come to my desired result has involved increasing the relative positioning adjustment of each successive card image, e.g.:
- Code: Select all
<tr align="center">
<td> </td>
<td id="playerDisplay">
<img src="image?imageId=s1" />
<img src="image?imageId=s2" style="position: relative; left: -55px"/>
<img src="image?imageId=s3" style="position: relative; left: -110px"/>
<img src="image?imageId=s4" style="position: relative; left: -165px"/>
<img src="image?imageId=s5" style="position: relative; left: -220px"/>
<img src="image?imageId=s6" style="position: relative; left: -275px"/>
</td>
<td> </td>
</tr>
(This is just a hard-coded sample used for illustration. In practice, the image elements will be created via DOM/Javascript and the relative offset values will be Javascript vars, if an approach similar to this is used after my problem is solved)
Anyway, the above HTML creates the series of overlapped images that I want, but the group of images isn't centered, it's shifted to the left. The amount of the shift is the same as if the images were not being overlapped. In other words, the left border of image number 1 is always in the same place in the browser, whether I use relative positioning or not; so without relative positioning, the tableau of six non-overlapped card images is centered perfectly; but when relative positioning is included as above, the tableau of six overlapped images is shifted too far to the left. I'd like the tableau of six overlapped images to be centered within whatever table/tr/td/div/enclosing html tags I wind up using.
After some searching, I think the correct use of nested <div> tags, with the proper combo of absolute and relative positioning will give me the result I'm after, but I haven't been able to figure out the exact answer.
Thanks in advance for your help!
