 |
| CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS). |
Welcome to the p2p.wrox.com Forums.
You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
|
|
|
|
June 6th, 2007, 08:47 AM
|
|
Registered User
|
|
Join Date: Jun 2007
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Iframe help needed
I'm trying to position an iframe on top of an image. I use Macromedia Fireworks to create the image, and have been designing pages so that the iframe goes on top of the image for ages now. However, for some reason, it's not working with this layout! I've used the same code, nothing has changed. The iframe always ends up at either the top or bottom of the image. Help is much appreciated, I've been playing with this for hours, it's very frustrating!
The other thing is, I'd like to be able to center the layout and have the iframe in the center (the white space of the layout) and not have it move around when the window re-sizes. How does this work?
Thank you!
http://extendedjazz.horse-heroes.net/foxwoodeeventing
For easy viewing, here's the HTML with the iframe in bold:
Quote:
quote: <!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>::Foxwoode Eventing:: Middleburg, Virginia</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<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_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>
</head>
<body bgcolor="#000000" onload="MM_preloadImages('index_r2_c2_f2.jpg','ind ex_r3_c4_f2.jpg','index_r3_c6_f2.jpg','index_r3_c8 _f2.jpg','index_r3_c10_f2.jpg');">
<table border="0" cellpadding="0" cellspacing="0" width="700">
<tr>
<td><img src="spacer.gif" width="14" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="15" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="186" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="154" 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="125" 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="92" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="28" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="index_r1_c1" src="index_r1_c1.jpg" width="700" height="477" border="0" id="index_r1_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="477" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img name="index_r2_c1" src="index_r2_c1.jpg" width="14" height="23" border="0" id="index_r2_c1" alt="" /></td>
<td rowspan="2"><a href="iframe.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r2_c2','','index_ r2_c2_f2.jpg',1);"><img name="index_r2_c2" src="index_r2_c2.jpg" width="42" height="15" border="0" id="index_r2_c2" alt="" /></a></td>
<td colspan="9"><img name="index_r2_c3" src="index_r2_c3.jpg" width="644" height="2" border="0" id="index_r2_c3" alt="" /></td>
<td><img src="spacer.gif" width="1" height="2" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img name="index_r3_c3" src="index_r3_c3.jpg" width="15" height="21" border="0" id="index_r3_c3" alt="" /></td>
<td rowspan="2"><a href="fet.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c4','','index_ r3_c4_f2.jpg',1);"><img name="index_r3_c4" src="index_r3_c4.jpg" width="186" height="15" border="0" id="index_r3_c4" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c5" src="index_r3_c5.jpg" width="13" height="21" border="0" id="index_r3_c5" alt="" /></td>
<td rowspan="2"><a href="comp.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c6','','index_ r3_c6_f2.jpg',1);"><img name="index_r3_c6" src="index_r3_c6.jpg" width="154" height="15" border="0" id="index_r3_c6" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c7" src="index_r3_c7.jpg" width="14" height="21" border="0" id="index_r3_c7" alt="" /></td>
<td rowspan="2"><a href="training.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c8','','index_ r3_c8_f2.jpg',1);"><img name="index_r3_c8" src="index_r3_c8.jpg" width="125" height="15" border="0" id="index_r3_c8" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c9" src="index_r3_c9.jpg" width="17" height="21" border="0" id="index_r3_c9" alt="" /></td>
<td><a href="horsetrials.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c10','','index _r3_c10_f2.jpg',1);"><img name="index_r3_c10" src="index_r3_c10.jpg" width="92" height="13" border="0" id="index_r3_c10" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c11" src="index_r3_c11.jpg" width="28" height="21" border="0" id="index_r3_c11" alt="" /></td>
<td><img src="spacer.gif" width="1" height="13" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="index_r4_c2" src="index_r4_c2.jpg" width="42" height="8" border="0" id="index_r4_c2" alt="" /></td>
<td rowspan="2"><img name="index_r4_c10" src="index_r4_c10.jpg" width="92" height="8" border="0" id="index_r4_c10" alt="" /></td>
<td><img src="spacer.gif" width="1" height="2" border="0" alt="" /></td>o
</tr>
<tr>
<td><img name="index_r5_c4" src="index_r5_c4.jpg" width="186" height="6" border="0" id="index_r5_c4" alt="" /></td>
<td><img name="index_r5_c6" src="index_r5_c6.jpg" width="154" height="6" border="0" id="index_r5_c6" alt="" /></td>
<td><img name="index_r5_c8" src="index_r5_c8.jpg" width="125" height="6" border="0" id="index_r5_c8" alt="" /></td>
<td><img src="spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
</table>
<div style="position: absolute; left:363; top: 10; width: 480; height: 106; border: 0px solid; color: 264B78; overflow: none;=";">
<iframe src="iframe.html" name="if" FRAMEBORDER="0" width="465" height="394" scrolling=auto allowtransparency="true" background-color="transparent"></iframe>
</body>
</html>
|
|
|
|
