PDA

View Full Version : Floating tables


K.Simmonds
01-31-2008, 04:58 PM
I've just drawn two floating tables (usinf g the draw AP div tool in layout) for the first time, which seemed to work quite well. I've positioned the tables where I want them (screen shot 1). But when I preview in a browser ..... they are off the side of the web page (screen shot 2). Any ideas what I am doing wrong.

mangofreak
01-31-2008, 05:21 PM
Make sure your divs are within a another div so their margins will be related to that outer div.

J.

domedia
01-31-2008, 06:01 PM
And make sure the parent div has position set to relative, or else the absolute positioning will be relative to the top left of the browser window.

K.Simmonds
01-31-2008, 07:35 PM
Thanks for that. I'm not sure what "And make sure the parent div has position set to relative means though. How do I do that?

I did put them inside another div, which helps a bit ..... but it's still not really precise.

domedia
01-31-2008, 09:28 PM
<div style="position: relative;">
<div style="position: absolute">Your AP (absolute positioning) div</div>
</div>

K.Simmonds
01-31-2008, 10:16 PM
Can you help me a bit more ...... where do I put that code? I'm not an expert as you can tell - but I'm learning bit by bit.

mangofreak
01-31-2008, 11:20 PM
your outer div is the one that will have to be relative and the inner divs will be absolute. domedia is giving you the code in the previous post. Why don't you post your code, perhaps it'll be better and easier for us to help.

K.Simmonds
01-31-2008, 11:23 PM
But where do I insert it ? Can I do it in design mode (WYSIWYG)

PS. I'm a slow learner too !

domedia
02-01-2008, 02:52 PM
No this is code which has to be pasted into code view.
If you only work in design view you're going to have limited capabilities with DW :)

K.Simmonds
02-01-2008, 07:09 PM
Hi again. I can put it in the code .......... but where exactly?
Before what? After what?

domedia
02-01-2008, 08:07 PM
Around the 2 tables you were working on.

K.Simmonds
02-03-2008, 08:00 PM
What does that mean though? WHERE DO I INSERT THE CODE ?

domedia
02-03-2008, 11:12 PM
You said you had some AP divs.
I gave you exact code earlier. Go into code view and put the code I gave you outside the AP divs you have.

You're the only one that can see your code. If you don't understand the code you see in code view, you won't be able to do this though :-/

tux
02-04-2008, 01:03 PM
Keith,

Post your code.

Regards, Paul

K.Simmonds
02-04-2008, 01:56 PM
Hi Paul Thanks for taking the time, this is the code for the floating tables. The web site is now live at

http://www.heartbeatgifts.co.uk/Pages/pictures.html

The code for the relevant part is:-

<!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>Prints of Aidensfield</title>
<style type="text/css">
<!--
body {
background-color: #666699;
}
.style8 {color: #666666; font-style: italic; }
#apDiv1 {
position:absolute;
left:374px;
top:263px;
width:179px;
height:102px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:591px;
top:372px;
width:384px;
height:297px;
z-index:2;
}
.style9 {color: #666666}
#apDiv3 {
position:absolute;
left:431px;
top:514px;
width:114px;
height:109px;
z-index:3;
}
.style3 {color: #0000FF
}
-->
</style>
<script type="text/javascript">
<!--
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];}}
}
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_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];}
}
//-->
</script>

tux
02-04-2008, 05:31 PM
Post all of the code for the page Keith.

And wrap it in code tags when you post code. Paste your code into the post, highlight it and click the code tag button in the editor. Its this one '#'.

Regards, Paul

Cary
02-05-2008, 06:12 AM
The code for the layers had to be moved inside the table so they can move with your layout rather than independently of it.

Modified CSS:

#apDiv1 {
position:absolute;
left:0px;
top:13px;
width:179px;
height:102px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:217px;
top:122px;
width:384px;
height:297px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:57px;
top:264px;
width:114px;
height:109px;
z-index:3;
}

Original HTML code fragment:
<body onload="MM_preloadImages('../Images/Button-homeover.gif','../Images/Button-hartbeatover.gif','../Images/Button-giftsover.gif','../Images/Button-printsover.gif','../Images/Button-Aidensfieldover.gif','../Images/Button-directionsover.gif','../Images/Button-contactover.gif')">
<div id="apDiv1">
<div align="center"><img src="../Images/Print-mounted-Beck-Hole.gif" title="Small mounted print"width="250" height="198" /></div>
</div>
<div id="apDiv2">
<div align="center"><img src="../Images/Print-mounted-shops.gif" title="Large mounted print"width="365" height="289" /></div>
</div>
<div id="apDiv3"><img src="../Images/Coaster.gif" width="110" height="110" /></div>
<table width="800" height="511" border="0" align="center" cellspacing="0">
<tr>
<th height="511" valign="top" bgcolor="#FFFFFF" scope="col"><img src="../Images/Banner-animation-2.gif" width="864" height="162" />
<table width="864" border="0" align="center" cellspacing="0" bordercolor="#9B9BC6" bgcolor="#9B9BC6">
<tr>
<th bgcolor="9b9bc6" scope="col"><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Images/Button-homeover.gif',1)"><img src="../Images/Button-homeup.gif" name="Image7" width="100" height="20" border="0" id="Image7" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="heartbeat.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Images/Button-hartbeatover.gif',1)"><img src="../Images/Button-heartbeatup.gif" name="Image8" width="100" height="20" border="0" id="Image8" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="gifts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Images/Button-giftsover.gif',1)"><img src="../Images/Button-giftsup.gif" name="Image9" width="100" height="20" border="0" id="Image9" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="pictures.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image36','','../Images/Button-printsover.gif',1)"><img src="../Images/Button-printsup.gif" name="Image36" width="100" height="20" border="0" id="Image36" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="aidensfield.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Images/Button-Aidensfieldover.gif',1)"><img src="../Images/Button-Aidensfieldup.gif" name="Image11" width="100" height="20" border="0" id="Image11" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="directions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Images/Button-directionsover.gif',1)"><img src="../Images/Button-directionsup.gif" name="Image12" width="100" height="20" border="0" id="Image12" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Images/Button-contactover.gif',1)"><img src="../Images/Button-contactup.gif" name="Image13" width="100" height="20" border="0" id="Image13" /></a></th>
</tr>
</table>
<span class="style9"><br />
Mounted prints of Aidensfield</span><br />
<table width="864" height="566" border="0">
<tr>
<th height="523" valign="top" scope="col"><table width="669" height="435" border="0" align="right">
<tr>
<th width="663" height="431" scope="col">&nbsp;</th>
</tr>
</table>

Modified HTML code fragment:
<body onload="MM_preloadImages('../Images/Button-homeover.gif','../Images/Button-hartbeatover.gif','../Images/Button-giftsover.gif','../Images/Button-printsover.gif','../Images/Button-Aidensfieldover.gif','../Images/Button-directionsover.gif','../Images/Button-contactover.gif')">
<table width="800" height="511" border="0" align="center" cellspacing="0">
<tr>
<th height="511" valign="top" bgcolor="#FFFFFF" scope="col"><img src="../Images/Banner-animation-2.gif" width="864" height="162" />
<table width="864" border="0" align="center" cellspacing="0" bordercolor="#9B9BC6" bgcolor="#9B9BC6">
<tr>
<th bgcolor="9b9bc6" scope="col"><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Images/Button-homeover.gif',1)"><img src="../Images/Button-homeup.gif" name="Image7" width="100" height="20" border="0" id="Image7" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="heartbeat.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Images/Button-hartbeatover.gif',1)"><img src="../Images/Button-heartbeatup.gif" name="Image8" width="100" height="20" border="0" id="Image8" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="gifts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Images/Button-giftsover.gif',1)"><img src="../Images/Button-giftsup.gif" name="Image9" width="100" height="20" border="0" id="Image9" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="pictures.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image36','','../Images/Button-printsover.gif',1)"><img src="../Images/Button-printsup.gif" name="Image36" width="100" height="20" border="0" id="Image36" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="aidensfield.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Images/Button-Aidensfieldover.gif',1)"><img src="../Images/Button-Aidensfieldup.gif" name="Image11" width="100" height="20" border="0" id="Image11" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="directions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Images/Button-directionsover.gif',1)"><img src="../Images/Button-directionsup.gif" name="Image12" width="100" height="20" border="0" id="Image12" /></a></th>
<th bgcolor="9b9bc6" scope="col"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Images/Button-contactover.gif',1)"><img src="../Images/Button-contactup.gif" name="Image13" width="100" height="20" border="0" id="Image13" /></a></th>
</tr>
</table>
<span class="style9"><br />
Mounted prints of Aidensfield</span><br />
<table width="864" height="566" border="0">
<tr>
<th height="523" valign="top" scope="col">
<table width="669" height="435" border="0" align="right">
<tr>
<th width="663" height="431" scope="col">
<div style="width:663px; height:431px; position:relative">
<div id="apDiv1"><img src="../Images/Print-mounted-Beck-Hole.gif" title="Small mounted print"width="250" height="198" /></div>
<div id="apDiv2"><img src="../Images/Print-mounted-shops.gif" title="Large mounted print"width="365" height="289" /></div>
<div id="apDiv3"><img src="../Images/Coaster.gif" width="110" height="110" /></div>
</div>
</th>
</tr>
</table>

K.Simmonds
02-05-2008, 07:53 PM
Thanks for all your help ..... it sure ain't easy is it !