Solved

Iframe Positioning To Act Like An Image

Posted on 2009-05-07
5
654 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
Comment Utility
>>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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for all your help, I'll look into this more.  Appreciate your time
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

763 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

7 Experts available now in Live!

Get 1:1 Help Now