...

View Full Version : How do I correctly position this ?



jeddi
02-14-2012, 11: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:



<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 (http://mobi6.net/wp/test-your-website/)

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, 11: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, 02: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, 06: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, 06: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum