css relative positioning

Dev Shed Forums Sponsor:

October 15th, 2003, 08:09 PM

jmobius

Junior Member

Join Date: Oct 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation 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:
URL

Here is the page I am playing around with:
URL

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?

October 15th, 2003, 09:22 PM

dlhdesign

Junior Member

Join Date: Oct 2003

Posts: 18

Time spent in forums: < 1 sec
Reputation 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"

October 15th, 2003, 09:28 PM

jmobius

Junior Member

Join Date: Oct 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation 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.)

October 15th, 2003, 09:32 PM

dlhdesign

Junior Member

Join Date: Oct 2003

Posts: 18

Time spent in forums: < 1 sec
Reputation 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!

October 15th, 2003, 09:46 PM

jmobius

Junior Member

Join Date: Oct 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation 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.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: