How do I correctly position this ?

jeddi · 02-14-2012, 10:52 AM

Hi,

How does the iframe positioning work ?

I have a cell phone simulation script and when I made
some changes to the left-hand-side text, the iframe on the
right hand side went out of align with the holder image.

This is my script:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nokia Mobile Emulator</title>
<meta name="keywords" content="Nokia simulator, Nokia emulator, Nokia mobile website">
<meta name="description" content="See how your website looks in a Nokia">
<meta name="robots" content="index,follow">
</head>
<body>
<script type="text/javascript">
/* Old script, still used, but adapted with Cookie creation */	
var ray={
changeIframe:function(inp,iframeEl)
	{
		this.returnID(iframeEl).setAttribute('src',this.returnID(inp).value);
		createCookie('QuentinURL',this.returnID(inp).value,30);
	},
returnID:function(el)
	{
		return document.getElementById(el);
	}
} 
</script>
<div align="center">
	<table border="0" width="700" id="table2" cellspacing="0">
		<tr>
			<td>
			<p><b><br>
			Welcome to our Testing Page.
			<br><br>
			On this page you can see how <br>
			any website looks on a variety<br>
			of mobile devices.<br>
			<br><br>
			The Nokia.
			<br><br>
			Enter the website URL below.
			<br><br>
			<input type='text' id='userinput' value='http://aspaceplace.mobi6.net/' size="30" name="T1" />
			<br><br>
			<button onclick="ray.changeIframe('userinput','myframe');">Test Now!</button>
			<br><br>
			<br><br>
			Now try ...
			<br><br>
			<a href="index.htm">Iphone</a>
			<br><br>
			<a href="blackberry.htm">Blackberry</a>
			<br><br>
			<a href="android.htm">Android</a><br>
			</font></b>
			</p>
			</td>
			<td width="360" height="639" background="nokia.jpg">
			<p align="center">
			<iframe id="myframe" width="275" height="216" src="http://aspaceplace.mobi6.net/">
			Your browser does not support inline frames or is currently configured not to display inline frames.
			</iframe>
			</p>
			</td>
			</tr>
		</table>
	</div>

<script type="text/javascript" src="geturl.js"></script>
</body>
</html>

My Web Page is this one: The Phone Simulater

The first page ( The Iphone. ) is OK

But - When you click on Small Droid or
the Nokia both are badly mis-aligned.

How can I correct this ?

Thanks.

.

Co1dFusion · 02-15-2012, 10:43 AM

You can specify the width of the iframe using the height and width artibutes. I always put it inside a div that is excatly the same size, because it allows better positioning.

If you put the iframe inside a fixed div not a table, then you could use javascript to change the source of the iframe.

Donkey · 02-16-2012, 01:04 AM

My site on your iphone simulator looked cr@p. On my iphone it looks great. I think you may have a problem.

BTW It is spelt "simulator"

jeddi · 02-16-2012, 05:01 PM

Hi,

Thanks for the reply,

But the dimensions (width & height ) are not my problem,
It is the positioning ( top & left or something like that ) that I can not see how to do.

Are you saying that I need to scrap the table and use divs in order to correct the positioning ?

Is there no way to adjust position with the code I have ( table ) ?

Thanks.

- What is the website url that you checked ??

.

Donkey · 02-16-2012, 05:06 PM

There is a link to it beneath my sig.

In your simulator everything overlaps on a real iphone it just becomes smaller in proportion.