#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2000
    Posts
    84
    Rep Power
    14

    CSS image positioning issue


    I need to have numerous images overlap exactly on top of one another at the upper left corner of a frame cell.

    When I use absolute positioning, the image is not where it is supposed to be in relation to the table cell.

    Relative works, but I cannot seem to overlay the images, as adding images via relative layers just acts as if the images are not in layers at all (i.e. they take up the same space that they would in a normal flowing page)

    Is there any way I can make the images be placed relative to the corner of the table cell?

    I'm somewhat new to layers, so any help would be greatly appreciated.

    Here is example code


    <TABLE WIDTH=500 HEIGHT=500 BORDER=0>
    <TR>
    <TD width=300 height=100>

    Need image1 to go in this cell, as well as image2, image3, and image4. All need to overlap perfectly in relation to the constraints of this table cell.

    Here is the code I use in the cell for the first 2 layers which just flow one under the other- yet I need them to overlap.

    <div id="Layer1" style="position:relative; width:518px; height:322px; z-index:1; visibility: visible;"><img src="images/Map2.gif" usemap="#Map" border=0></div>
    <div id="Layer2" style="position:relative; width:518px; height:322px; z-index:2; visibility: hidden;"><img src="images/iloverlay.gif" usemap="#Map" border=0></div>

    </TD>
    <TD></TD>
    </TR>
    <TR>
    <TD></TD>
    <TD></TD>
    </TR>
    <table>
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Relative positioned elements are in the flow, whille absolute positioned elements are not. For some very good explanations, read the articles at /*PIE*/. A minimum test case of what you're describing;
    Code:
    <table>
      <tr>
        <td>
          <img src="somepic1.jpg" style="position: absolute;"
          height="100px" width="300px"  />
          <img src="somepic2.jpg" style="position: absolute"
          height="100px" width="300px" />
        </td>
      </tr>
    </table>
    You can control which pic is on top/visible by manipulating the z-index or display: none/block. If you use visibility: hidden/visible, you will still have z-index concerns.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo