Solved

Make Iframe work with position relative using clip:rect

Posted on 2009-05-06
5
3,522 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:tresmanos
  • 3
  • 2
5 Comments
 
LVL 14

Accepted Solution

by:
xberry earned 500 total points
ID: 24323019
Well, I think the trick is that you first create a parent div with relative positioning and then a child div
that you can use in order to position absolute in relation to the parents postion:

If you try the modified example below you'll see that you can position your iframe in center div:

<!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>
<div>
<Div style="width: 200px; float: left;">something left</Div>
<div style="width: 600px; position: relative; float: left;">
<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>
</div>
</body>
</html>
0
 

Author Closing Comment

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

Very nice!!!
0
 

Author Comment

by:tresmanos
ID: 24327828
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

0
 

Author Comment

by:tresmanos
ID: 24327996
I'll actually open a new question since this one is already closed.  
0
 
LVL 14

Expert Comment

by:xberry
ID: 24328024
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 ;-)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hovering effect 9 46
responsive divs setup - what am I doing wrong 2 60
Bootstrap more than 12 columns in row 3 36
css help with menu spacing 10 30
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now