Solved

Iframe Positioning To Act Like An Image

Posted on 2009-05-07
5
661 Views
Last Modified: 2012-05-06
Hi, I had asked a related question on this here: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24387187.html#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

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

Expert Comment

by:xberry
ID: 24328115
>>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.
0
 
LVL 14

Expert Comment

by:xberry
ID: 24328458
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

0
 

Author Comment

by:tresmanos
ID: 24328569
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.  
0
 
LVL 14

Accepted Solution

by:
xberry earned 500 total points
ID: 24329910
Ok, I understand what you would like to achieve, but this would require the combination
of what we solved in the last issue (parent div relative and child absolute positioning)
with floating that positioned element and ... this as far as I can see...  and I have actually
tried lots and done hours research on this too - ... is not really working out, sorry.

One last hope though: Since the last issue could be solved very easily now this one
seems only possible with a very complicated code implementation in javascript.
When browsing on the net I found some indications such like on this site
http://www.dyn-web.com/tutorials/iframes/

Only - I am myself not a hero in the javascript and thus recommend you to put this question
into the zone of javascript or AJAX and maybe additionally to HTML or web applications.
Short: I see that with CSS we came to a dead end here.
0
 

Author Closing Comment

by:tresmanos
ID: 31579105
Thanks for all your help, I'll look into this more.  Appreciate your time
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add box and text color changing for everything 1 44
CSS: Making Pure CSS read more boxes thinner 5 44
Responsive Font Size 6 45
Obsolete font tag need to convert to CSS 3 32
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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 …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

713 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