asked on

Iframe Positioning To Act Like An Image

Hi, I had asked a related question on this here: https://www.experts-exchange.com/questions/24387187/Make-Iframe-work-with-position-relative-using-clip-rect.html?anchorAnswerId=24327996#a24327996 but closed it and wanted to follow-up with another question.

I am wondering if it's possible to treat this iframe snippet like an image to have text wrap around it or to be able to embed it into a table. I'll give code samples for both CSS and Table layouts that I've been playing with.

The CSS example is straight forward, the iframe is on top of the text and doesn't wrap.

In the table, it works fine if the window is large enough, but if you re-size the window to where scroll bars show up, the iframe covers up the text again.

This may or may not be possible, just seeking some expert advice or a second opinion. Thanks!

CSS 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>Iframe CSS Example</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>

<!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>Iframe Table Example</title>
</head>
<body>
<table width="95%" border="0" cellspacing="0" cellpadding="3" align="center" width="900">
	<tr>
		<td width="150">Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left </td>
		<td width="600">
			<div style="width: 400px; position: relative; float: right;">
				<div style="position: absolute; left: -250px; top: -375px; clip:rect(165px 595px 415px 160px);">      
					<iframe width="595" height="415" src="http://yahoo.com" scrolling="no"></iframe>
				</div>
			</div>
		</td>
		<td width="150">Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right </td>
	</tr>
	<tr>
		<td>Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left </td>
		<td>Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid </td>
		<td>Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right </td>
	</tr>
</table>
 
</body>
</html>

Open in new window

xberry

>>I am wondering if it's possible to treat this iframe snippet like an image to have text wrap around it or to be able to >>embed it into a table. I'll give code samples for both CSS and Table layouts that I've been playing with.

Of course, however, unless you use your tables as datasheets ... please refrain from using them in html for
layout purpose .. it really is ugly and outdated.

Basically you can use your iframe anywhere in the layout with the help of div-block-elements.
The basic rule to keep in mind however is: div-elements always need a dimension, i.e
either height or width, possible in percentages, too.

I'll try your concept on my computer later and see if i can work it out right for you. hold on.

xberry

So, try the code below. The text wraps one time left, one time right.
This should be ok for you, simply transfer to your own needs.
If you minimize the browser window, you'll see that text wraps around fluid, while
iframe stays stable ;-))

<!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>Iframe CSS Example</title>
<style type="text/css">
	#example { width: 100%; }
	
	iframe {
		width: 595px;
		height: 415px;
	}
 
	#example1 { 
		float: left;
		margin-right: 10px;
	}
	#example2 { 
		float: right;
		margin-left: 10px;
	}
</style>
</head>
<body>
	<div id="example">
		<iframe src="http://yahoo.com" scrolling="no" id="example1">Alternate content</iframe>
		<p>
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		</p>
		<br style="clear: left;"></br>
		<p>Some text between. Some text between. Some text between. Some text between. 
		Some text between. Some text between. Some text between. Some text between. 
		Some text between. Some text between. Some text between. Some text between. </p>
		<iframe src="http://yahoo.com" scrolling="no" id="example2">Alternate content</iframe>
		<p>
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		</p>
		<br style="clear: right;"></br>
	</div>
</body>
</html>

Open in new window

tresmanos

ASKER

I think the sticking point here is where I wanted to just use the "feature" section of the yahoo page and not start at the 0,0 x,y coordinates of the iframe target.

I am a novice with CSS, so the only way I could accomplish this was to use negative values in my positioning. I don't know if there is any other way or that it's even possible to do this.

Not sure if your a MAC person, but what gave me the idea to try to do this in web pages is the MAC dashboard where you can take a portion of a web page and put it on the dashbord as a "widget" by doing the "File - Open in Dashboard" while in Safari. I thought if I could do this on a web page, that would be an awesome capability to have in my back pocket.

ASKER CERTIFIED SOLUTION

xberry

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

tresmanos

ASKER

Thanks for all your help, I'll look into this more. Appreciate your time