Click to See Complete Forum and Search --> : IFrames: Positioning


Four_of_Five
10-09-2003, 10:56 PM
How do I position multiple Iframes on a webpage??

Specifically, is it possible to wrap-around text around iframes? or even more specific, like surround an iframe that is centered on a page with text?:confused:

TiA for any replies!

Ichabod
10-09-2003, 11:35 PM
I'm not exactly sure about wrapping around the IFrame itself, but I do have a suggestion on accomplishing what you want :)

Take a transparent square made in any graphics program, and size it exactly how big you want your IFrame...now, put this all in Word and select "Wrap Around" and then export as an HTML file.

the Word HTML file will show the text around a blank square, but when you insert your IFrame over that square exactly, it
will look as though you wrapped your text around the IFrame.

Hope I was helpful!

If I need to explain further or maybe even help a bit let me know @ Rickb109@aol.com


Good luck :)

Rick

Four_of_Five
10-10-2003, 02:36 PM
Originally posted by Ichabod
I'm not exactly sure about wrapping around the IFrame itself, but I do have a suggestion on accomplishing what you want :)

Take a transparent square made in any graphics program, and size it exactly how big you want your IFrame...now, put this all in Word and select "Wrap Around" and then export as an HTML file.

the Word HTML file will show the text around a blank square, but when you insert your IFrame over that square exactly, it
will look as though you wrapped your text around the IFrame.

Hope I was helpful!

If I need to explain further or maybe even help a bit let me know @ Rickb109@aol.com


Good luck :)

Rick

Thanks Rick! I've discovered that "Word to HTML" trick a couple of months back (lousy coders like me do get lucky...and lazy :p ). Thanks for reminding me about it! Hmmm...you mean replace the "Wrapped" Image file with an <IFrame> tag right??Hmmmm...by golly, it might just work...and the even better part is...it's easily editable by anyone...I'll try it.


Thanks again!

Ichabod
10-10-2003, 03:57 PM
Glad I could help :)


Rick

lillu
10-18-2003, 06:57 AM
Just to clear up the question. Iframes do have the ability to wrap text around them using alignment left/right/middle or specifying float or vertical-align properties in CSS.

Here's an example:

<html>
<body>
<IFRAME SRC="filehtm" width="250" height="250" align="left">
Sorry your browser does not like IFRAMES
</IFRAME>
put alignment tags to wrap text around it
<br />
put alignment tags to wrap text around it
<br />
put alignment tags to wrap text around it
<br />
put alignment tags to wrap text around it
<br />
<br />
The ALIGN attribute specifies the alignment of the inline frame. The values top, middle, and bottom specify the frame's
position with respect to surrounding content on its left and right.
<br />
<br />
ALIGN=middle aligns the center of the frame with the current baseline. To center the frame horizontally on the page,
place the frame in a centered block, e.g.,
<br />
<br />
The other ALIGN values, left and right, specify a floating frame; the frame is placed at the left or right margin and
content flows around it.

Four_of_Five
10-18-2003, 02:54 PM
Hmmm...ok, the "Image to Iframe from Word to HTML" at first, seemed a pretty neat trick (especially for dumb-dumb like moi). And it did work, as far as wrapping text around left or right-aligned iframes in a webpage...however, it didnt really quite work out when I tried to have the an iframe aligned in the middle of a paragraph (or @ the center of a page surrounded by text) :(...at least not yet as an HTML file (it kinda looked very promising while still in Word format though). It prompted some sort of layout violation just before I previewed/saved it a as an html file....

I'm sure it can be done much "simpler" in CSS but unfortunately, Je suis toujours un enfant en bas âge quand il vient "CSS".
It would really help much better though if I do find a webpage that has the above effect. ;) an iframe surrounded by text.

lillu
10-19-2003, 07:41 AM
Here are the properties to play with, put them between <head> tags. Try only 1 style at a time or it will not work!
To position content around iframe I would recommend you using <div> tags and set its properties similarly in the <style> declarations.

<style>
iframe { vertical-align: sub; }
{ vertical-align : middle;}
{ vertical-align : super; }
{ vertical-align : top; }
{ float : left; }
{ float : right;}
{ float : none; }
</style>

jjl188
07-23-2010, 08:47 AM
Here are the properties to play with, put them between <head> tags. Try only 1 style at a time or it will not work!
To position content around iframe I would recommend you using <div> tags and set its properties similarly in the <style> declarations.

<style>
iframe { vertical-align: sub; }
{ vertical-align : middle;}
{ vertical-align : super; }
{ vertical-align : top; }
{ float : left; }
{ float : right;}
{ float : none; }
</style>

This is the best method however it can get even easier.

In your Iframe html, add a style inside of the code.

<iframe style="float:left; margin:10px;" width="425" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://thewebsite.com">This is an IFrame floated left, and paragraphs wrap around it.</iframe>

Enjoy