asked on

Make Iframe work with position relative using clip:rect

Hi, I am trying to figure out how to do an iframe of just a portion of a page (in this example the news highlight of yahoo). I got this to work with position:absolute, but I cannot seem to get this to work with position:relative. What happens is the portion of the target page that I am clipping shows up on the left side.

I would like to use this on a page that is centered, so position:absolute is not an option. Ideally I would like to put a float tag around all of this and treat the iframe like an image. I tried to do a float and also a table (putting the iframe in the center col of the table). I can't seem to carry over what I have done in my code example to anything position:relative.

Any ideas on where I should go with this?

I am not using the Yahoo page in my actual page, I am just using this as an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<DIV STYLE="position: absolute; left: -50px; top: -100px; clip:rect(165px 595px 415px 160px);">
  <iframe width="595" height="415" src="http://yahoo.com" scrolling="no"></iframe>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

xberry

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tresmanos

ASKER

Thanks, that helps a lot! I knew it had to be something simple that I just wasn't seeing.

Very nice!!!

tresmanos

ASKER

I know I just gave you the points, what you told me helps, but I have another question. I changed up your code a bit and found that the iframe sits on top of the text. Do you know if it's possible to have the text wrap around the iframe?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
 
<div>something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left 
 
	<div style="width: 400px; position: relative; float: right;">
		<div style="position: absolute; left: -250px; top: -350px; clip:rect(165px 595px 415px 160px);">      
			<iframe width="595" height="415" src="http://yahoo.com" scrolling="no"></iframe>
		</div>
	</div>
 
</div>
 
</body>
</html>

Open in new window

tresmanos

ASKER

I'll actually open a new question since this one is already closed.

xberry

Glad i could help

>>> I knew it had to be something simple that I just wasn't seeing.

I would be glad if I would reckognize the simple things in life all the time, but ... ;-))
Anyway, nice you did appreciate that too, because there certainly more complicated solutions
out there ... welcome ;-)