#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0

    css relative positioning


    I am trying to create two images that overlap and their entire containing box must be a certain size.
    Here is an example of what I am going for:
    http://www.78666.com/desired.gif

    Here is the page I am playing around with:
    http://www.78666.com/test.html

    The problem is that while I need these two graphics to be positioned as in the above sample .gif, the table containing them needs to be only as wide as it is in the sample. On my test page, the right hand table cell is leaving space for the orange box, and I do not want it to. In the end the table will be resizeable, and no matter what its size, the orange box needs to be anchored in the upper left corner of the table, and the red shape needs to be anchored in the upper right corner, no matter what kind of overlap this creates.

    Any suggestions?
  2. #2
  3. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    18
    Rep Power
    0
    If you just want the offset, but want it to be static, then you can use:

    Code:
    <html>
    <head>
    <style type="text/css">
    .left {position:relative;
            top:0px;
            left:-79px;
            z-index:2;
    	}
    .right {position:relative;
            top:-99px;
    	}
    </style>
    </head>
    
    <body>
    <div align="center">
    	<table width="500" border="1">
    		<tr>
    			<td valign="top" width="100%">
    				&nbsp;
    			</td>
    			<td>
    				<img class="left" src="left.gif">
    				<img class="right" src="right.gif">
    			</td>
    		</tr>
    	</table>
    </div>
    </body>
    </html>
    If you need it to be dynamic, that's more difficult. It can be done with dynamic style properties, however:

    Code:
    <html>
    <head>
    <style type="text/css">
    .left {position:relative;
            top:0px;
            left:expression(0-eval(document.getElementById('cell1').clientWidth));
            z-index:2;
    	}
    .right {position:relative;
            top:-99px;
    	}
    </style>
    </head>
    
    <body>
    <div align="center">
    	<table width="600" border="1">
    		<tr>
    			<td valign="top" id="cell1">
    				&nbsp;
    			</td>
    			<td width="1%">
    				<img class="left" src="left.gif">
    				<img class="right" src="right.gif">
    			</td>
    		</tr>
    	</table>
    </div>
    </body>
    </html>
    Note that the second method is only supported by IE 4.0+ More info can be found here MSDN - "Be More Dynamic"
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0
    thanks for the idea. the only problem is i need the orange box "anchored" to the upper left of the table. (ie. the upper left of the first td rather than the second.)
  6. #4
  7. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    18
    Rep Power
    0
    The second method will do that, then. Even though it's in the second TD element, it's position will appear to be attached to the upper-left of the first TD element.

    TD elements will expand to fit everything in them, by default. You can get around this by using the "overflow" and "table-layout" properties, but I don't recall a combination that will get you what you are looking for and still keep the image in the first TD.

    Best of luck!
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0
    Thanks.
    I am so sorry, I got too excited to try the first way and I missed the second.
    This looks like it will get the job done well.
    Thanks again.

IMN logo majestic logo threadwatch logo seochat tools logo