Help - Search - Members - Calendar
Full Version: Iframe Help Requested
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Akira
Ok let me start by giving a brief detailed explanation of my problem I've come across.I have a 19 inch screen for my pc,I also run a ps3 on the internet.The problem I've run into I have never seen before now with any iframe though it is a problem none the less and I can not get it to correctly function.On my screen when I create the iframe itself and give it the parameters necessary I show it as lining up exactly on function as to where it should be in the page.However when a friend of mine loads it on his 22 inch screen the iframe is bouncing off to the left and falling well out of place.Another friend is loaded it and it bounced off to the right when I attempted to fix it for the 22 inch screen.What I am trying to find out is why on a different size screen is it not staying in the position it is assigned to stay in.If anyone can help me it would greatly be appreciative and greatly respected.Even if it is just a way to auto center the iframe so it loads on any screen and any browser automatically falling into the proper proportions of where it should be.The first code is the index page.The second is the AsY Iframe image hotlinked top left.The third set of code is the main content iframe.Sorry if this seems a difficult problem to anyone,any help would be great.

Akira

Page link = http://asytest.comze.com/

Code
-index-

<!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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #FFF;
}
body {
background-color: #000;
background-image: url(sitebg.png);
background-position: top center;
background-repeat: no-repeat;
}
-->
</style></head>


<body>
<iframe name="Home" src="home.html" frameborder="0" allowtransparency="true" width="220" height="68" marginheight="0" marginwidth="0"style="position:absolute;top:16px;left:280px;"></iframe>
<iframe name="content" src="home2.html" frameborder="0" allowtransparency="true" width="858" height="796" marginheight="0" marginwidth="0"style="position:absolute;top:102px;left:280px;"></iframe>

</body>
</html>

________________________________________________________________________________
____________

-asylogo-


<!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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #FFF;
}
body {
background-color: #000;

}
-->
</style></head>

<body>
<img src="AsYLogo.png" width="220" height="68" border="0" align="top" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="2,0,220,72" href="home2.html" target="content" />
</map>
</body>
</html>

________________________________________________________________________________
____________

-content-



<!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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #FFF;
}
body {
background-color: #000;
background-image: url(content.png);
}
-->
</style></head>

<body>
</body>
</html>


Darin McGrew
Can you post the URL (address) of an actual document that demonstrates the problem? The URL you posted shows just an image.
pandy
Source was there yesterday. unsure.gif
Akira
QUOTE(pandy @ Mar 16 2009, 11:52 AM) *

Source was there yesterday. unsure.gif

apologies,think ive found a fix for it currently reason only the image is there.was working at work and found a javascript that should fix it.meant to post it while at work but forgot too.thank you though:)
Akira
Ok from what I've tried it is still a failure on my part.I tried using a Java code which did not align it according to the users viewing resolution.I also tried running a div that would base it self on the screen size however I still ran into the same issue.The overall goal is to have the actual image appear as one image.with a huge iframe in the center where numerous iframes will be included depending the page clicked on.Right now the image is doing what it did the first time.I will leave it as be for an example of the issue I am having.On my screen it loads fine in one window,on another it loads where it is highly out of place depending on his resolution I am assuming.I am of course not the best with javascript or html but I do what I can.Here is the url where it appears out of place.

http://asytest.comze.com/

The coding is listed below.As it is I have two simple pages currently.I know theres a Javacode to load it according to resolution size or its what I was told at least however I suck with js so am trying to align it according to html if possible.I tried using the divs as said before with a percent value and that didn't work either.It's the current set I am running below.Any help would be greatly appreciated.

Index-

<!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>Untitled Document</title>
</head>
<style type="text/css">
<!--
body,td,th {
color: #FFF;
}
body {
background-color: #000;
background-image: url(sitebg.png);
background-position: center top ;
background-repeat: no-repeat;
}
-->
</style>

<body>
<div style="position:absolute; top:21%; left: 2%; width: 870px;"><iframe src="home2.html" width="858" height="796" frameborder="no"></iframe></div>
</body>
</html>




Home2

<!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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #FFF;
}
body {
background-color: #000;
background-image: url(content.png);
}
-->
</style></head>

<body>
</body>
</html>


Im not sure as I dont know html that well but could I use a div in the second page perhaps to auto target it in the index file on any resolution?Sorry if that sounded dumb as said not the best here.
Darin McGrew
Can you post the URL (address) of an actual document that demonstrates the problem? The URL you posted shows just an image.
pandy
Not anymore. biggrin.gif

May I ask what the purpose of the iframes is? Why don't you just take http://asytest.comze.com/home2.html and put the logo you had in the other iframe earlier at the top of it? As I see it the iframes have no purpose.

I'd like to help, but I can't see the problem you describe. Possibly because my resolution is kind of pesky.
Akira
Pandy the purpose in the iframes are so when I actually click on a hotspot up top.Instead of the entire page refreshing only that main content area will refresh and upload the new content to fall into that area.Basically what I am seeking is a way to auto align everything on all Resolutions automatically.Iframes included.I understand what your saying pandy and if I could do it that way and the leader of this clan be happy I would lol but how he wants it is difficult to get it exact.Though I am working currently trying different ways myself because as said java and i dont get along well.A general description is this and I will include an image link to show you.The main section is gonna be the content.Which will have the games iframe,so it will auto load on home page,the ads,the mission statement and then the video section.Now the entire section of that in this image link to follow is what is gonna be loading into center each time a link is clicked with dif content iframes to fill it in.But heres what it is doing on a friend of mines screen currently,and on mine it is showing as being on the left a little bit overlapping though not by far.Heres the image link and I hope this helped better understand the purpose the iframes pandy.

http://i243.photobucket.com/albums/ff123/a...ome/example.jpg

Akira
that image is of course minus the asy logo which i have removed currently as the logo is being rendered by the designer of it.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.