cant get my iframe to float with centered page...

dvsConcept 0 Light Poster

17 Years Ago

i built this page with photoshop and fireworks for the buttons now my layout is a .png file (index.png)

i want my iframe to change depending on what button is click but the page index page itself never changes (simple enough) but when i click and drag my browser window smaller and larger the layout moves but the iframe doesn't can someone please help....

<!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>
<title>index.png</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Fri Apr 10 19:36:46 GMT-0700 (Pacific Daylight Time) 2009-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>

<style>
body{
    background-color:#333333;
	margin:0 auto;
	text-align: center;
	min-width: 400px;

}
#wrapper {
	width: 800px;
	margin: 0 auto;
	text-align: left;
}


</style>

</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('index_r2_c2_f2.png','index_r2_c2_f4.png','index_r2_c2_f3.png','index_r4_c2_f2.png','index_r4_c2_f4.png','index_r4_c2_f3.png','index_r6_c2_f2.png','index_r6_c2_f4.png','index_r6_c2_f3.png','index_r8_c2_f2.png','index_r8_c2_f4.png','index_r8_c2_f3.png','index_r10_c2_f2.png','index_r10_c2_f4.png','index_r10_c2_f3.png','index_r12_c2_f2.png','index_r12_c2_f4.png','index_r12_c2_f3.png','index_r14_c2_f2.png','index_r14_c2_f4.png','index_r14_c2_f3.png','index_r16_c2_f2.png','index_r16_c2_f4.png','index_r16_c2_f3.png','index_r18_c2_f2.png','index_r18_c2_f4.png','index_r18_c2_f3.png','index_r20_c3_f2.png'),;">
<div id="wrapper">
<table border="0" cellpadding="0" cellspacing="0" width="800">
<!-- fwtable fwsrc="CAS_finalLayout.png" fwpage="Page 1" fwbase="index.png" fwstyle="Dreamweaver" fwdocid = "667322157" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="78" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="14" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="69" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="17" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="622" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="5"><img name="index_r1_c1" src="index_r1_c1.png" width="800" height="116" border="0" id="index_r1_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="116" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="20"><img name="index_r2_c1" src="index_r2_c1.png" width="78" height="684" border="0" id="index_r2_c1" alt="" /></td>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r2_c2','index_r2_c2_f2.png','index_r2_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r2_c2','index_r2_c2_f3.png',1);"><img name="index_r2_c2" src="index_r2_c2.png" width="100" height="25" border="0" id="index_r2_c2" alt="" /></a></td>
   <td rowspan="20"><img name="index_r2_c5" src="index_r2_c5.png" width="622" height="684" border="0" id="index_r2_c5" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r3_c2" src="index_r3_c2.png" width="100" height="15" border="0" id="index_r3_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="15" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r4_c2','index_r4_c2_f2.png','index_r4_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r4_c2','index_r4_c2_f3.png',1);"><img name="index_r4_c2" src="index_r4_c2.png" width="100" height="25" border="0" id="index_r4_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r5_c2" src="index_r5_c2.png" width="100" height="14" border="0" id="index_r5_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="14" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r6_c2','index_r6_c2_f2.png','index_r6_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r6_c2','index_r6_c2_f3.png',1);"><img name="index_r6_c2" src="index_r6_c2.png" width="100" height="25" border="0" id="index_r6_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r7_c2" src="index_r7_c2.png" width="100" height="15" border="0" id="index_r7_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="15" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r8_c2','index_r8_c2_f2.png','index_r8_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r8_c2','index_r8_c2_f3.png',1);"><img name="index_r8_c2" src="index_r8_c2.png" width="100" height="25" border="0" id="index_r8_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r9_c2" src="index_r9_c2.png" width="100" height="14" border="0" id="index_r9_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="14" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r10_c2','index_r10_c2_f2.png','index_r10_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r10_c2','index_r10_c2_f3.png',1);"><img name="index_r10_c2" src="index_r10_c2.png" width="100" height="25" border="0" id="index_r10_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r11_c2" src="index_r11_c2.png" width="100" height="15" border="0" id="index_r11_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="15" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r12_c2','index_r12_c2_f2.png','index_r12_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r12_c2','index_r12_c2_f3.png',1);"><img name="index_r12_c2" src="index_r12_c2.png" width="100" height="25" border="0" id="index_r12_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r13_c2" src="index_r13_c2.png" width="100" height="14" border="0" id="index_r13_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="14" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r14_c2','index_r14_c2_f2.png','index_r14_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r14_c2','index_r14_c2_f3.png',1);"><img name="index_r14_c2" src="index_r14_c2.png" width="100" height="25" border="0" id="index_r14_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r15_c2" src="index_r15_c2.png" width="100" height="15" border="0" id="index_r15_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="15" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r16_c2','index_r16_c2_f2.png','index_r16_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r16_c2','index_r16_c2_f3.png',1);"><img name="index_r16_c2" src="index_r16_c2.png" width="100" height="25" border="0" id="index_r16_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r17_c2" src="index_r17_c2.png" width="100" height="15" border="0" id="index_r17_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="15" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','index_r18_c2','index_r18_c2_f2.png','index_r18_c2_f4.png',1);" onclick="MM_nbGroup('down','navbar1','index_r18_c2','index_r18_c2_f3.png',1);"><img name="index_r18_c2" src="index_r18_c2.png" width="100" height="25" border="0" id="index_r18_c2" alt="" /></a></td>
   <td><img src="spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img name="index_r19_c2" src="index_r19_c2.png" width="100" height="171" border="0" id="index_r19_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="171" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="index_r20_c2" src="index_r20_c2.png" width="14" height="171" border="0" id="index_r20_c2" alt="" /></td>
   <td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r20_c3','','index_r20_c3_f2.png',1);"><img name="index_r20_c3" src="index_r20_c3.png" width="69" height="87" border="0" id="index_r20_c3" alt="" /></a></td>
   <td rowspan="2"><img name="index_r20_c4" src="index_r20_c4.png" width="17" height="171" border="0" id="index_r20_c4" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="87" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r21_c3" src="index_r21_c3.png" width="69" height="84" border="0" id="index_r21_c3" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="84" border="0" alt="" /></td>
  </tr>
</table>



  <iframe id="content2" src="home.html" allowtransparency="yes" style="width:508px; height:607px; float:right; left:511px; top:112px; right:100px; position:absolute;"></iframe>

</div>



</body>
</html>

1 Contributor
0 Replies
77 Views

Dani AI

Generated 10 Months Ago

s page shows the usual cause: the iframe is absolutely positioned against the page (or the nearest positioned ancestor), not the centered wrapper, so it stays at a fixed distance from the window edge while the wrapper recenters. The inline style also mixes float:right with position:absolute, which is redundant because a positioned element is removed from the normal flow and the float is effectively ignored. The result looks like the iframe is "detached" when the browser is resized.

A practical fix is to make the centered container a positioned ancestor and then position the iframe inside it (or remove absolute positioning and let the iframe float within the container). For example, make the wrapper the positioning context and place the iframe absolutely relative to that context:

#wrapper {
  position: relative;
  width: 800px; /* keep the existing centered width */
  margin: 0 auto;
}

#content2 {
  position: absolute;
  top: 110px;    /* adjust to match the layout */
  right: 20px;   /* sticks the iframe to the wrapper's right edge */
  /* remove float and inline absolute left values */
}

If a responsive layout is desired, prefer percentage widths or max-width and avoid pixel-only offsets. Use browser dev tools to inspect the computed position and offsetParent for the iframe to confirm which ancestor it is anchored to. Further reading on how CSS positioning and float interact is available on MDN: position (CSS) and float (CSS).

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.