PDA

View Full Version : Used a table for layout... trouble!!


Karkar
04-25-2007, 02:34 AM
Hey guys. I used a table with a column for the side bar, a column for the contents. a few rows and such. I would greatly appreciate someone taking a look at the code, as something very troubling is happening.

The side bar is an image i made in fireworks. In this column I have 3 rows. The top for empty space, the middle for the nav and the bottom for any extra info that will be an editble region. I have inserted editable region on the contents section aswell, when i insert them, they do no cover the entire cell, but rather they just sit in the top left corner.

On top of this, when i enter text into the contents section and make the cell get bigger, the side bar 3 rows start to split apart. Thanks for any help guys. Here is he code:



<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
font-size: 36px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #999999;
}
.style2 {
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #999999;
}
.style3 {
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #999999;
}
.style7 {font-size: 36px}
.style8 {
color: #990000;
border-bottom-width: 1pt;
border-bottom-style: solid;
border-bottom-color: #000000;
padding: 20px;
}
.style9 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="153" bgcolor="#990000">&nbsp;</td>
<td width="15" valign="top">&nbsp;</td>
<td width="107" valign="top"><p align="center" class="style1"><img src="../Images/logo.JPG" width="107" height="126" /></p> </td>
<td width="475" valign="top"><p align="center" class="style1">Title goes here... </p>
<p align="center" class="style2">MELBOURNE AUSTRALIA </p>
<p align="center" class="style3">&ldquo;Our lives begin to end the day we become silent about the things that matter.&rdquo;</p></td>
</tr>
<tr>
<td rowspan="4"><table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="153">
<!-- fwtable fwsrc="mybuts.png" fwbase="mybuts.jpg" fwstyle="Dreamweaver" fwdocid = "1111788209" fwnested="0" -->
<tr>
<td><img name="space1" src="../Images/buttons/space1.gif" width="153" height="77" border="0" id="space1" alt="" /></td>
</tr>
<tr>
<td><a href="../index.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('homebut','','../Images/buttons/homebut_f2.jpg',1)"><img name="homebut" src="../Images/buttons/homebut.jpg" width="153" height="42" border="0" id="homebut" alt="Home" /></a></td>
</tr>
<tr>
<td><a href="../aboutus.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('aboutbut','','../Images/buttons/aboutbut_f2.jpg',1)"><img name="aboutbut" src="../Images/buttons/aboutbut.jpg" width="153" height="45" border="0" id="aboutbut" alt="About WFP" /></a></td>
</tr>
<tr>
<td><a href="../activities.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('activbut','','../Images/buttons/activbut_f2.jpg',1)"><img name="activbut" src="../Images/buttons/activbut.jpg" width="153" height="45" border="0" id="activbut" alt="Activities" /></a></td>
</tr>
<tr>
<td><a href="../newsletter.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('newsbut','','../Images/buttons/newsbut_f2.jpg',1)"><img name="newsbut" src="../Images/buttons/newsbut.jpg" width="153" height="45" border="0" id="newsbut" alt="Newsletter" /></a></td>
</tr>
<tr>
<td><a href="../palestine.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('palbut','','../Images/buttons/palbut_f2.jpg',1)"><img name="palbut" src="../Images/buttons/palbut.jpg" width="153" height="45" border="0" id="palbut" alt="Palestine" /></a></td>
</tr>
<tr>
<td><a href="../perspective.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('persbut','','../Images/buttons/persbut_f2.jpg',1)"><img name="persbut" src="../Images/buttons/persbut.jpg" width="153" height="50" border="0" id="persbut" alt="Perspectives" /></a></td>
</tr>
<tr>
<td><a href="../links.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('linksbut','','../Images/buttons/linksbut_f2.jpg',1)"><img name="linksbut" src="../Images/buttons/linksbut.jpg" width="153" height="42" border="0" id="linksbut" alt="Links" /></a></td>
</tr>
<tr>
<td><a href="../contactus.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('contbut','','../Images/buttons/contbut_f2.jpg',1)"><img name="contbut" src="../Images/buttons/contbut.jpg" width="153" height="43" border="0" id="contbut" alt="Contact Us" /></a></td>
</tr>
<tr>
<td><img name="space2" src="../Images/buttons/space2.gif" width="153" height="65" border="0" id="space2" alt="" /></td>
</tr>
</table></td>
<td height="19" colspan="3" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="474" rowspan="2" valign="top">&nbsp;</td>
<td height="106" colspan="2" valign="top"><!-- TemplateBeginEditable name="header" -->
<p class="style7"><br />
<span class="style8">About us<span class="style9">________</span></span></p>
<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td height="237" colspan="2" valign="top"><!-- TemplateBeginEditable name="body1" -->&nbsp;<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td rowspan="2" valign="top">&nbsp;</td>
<td colspan="2" rowspan="2" valign="top"><!-- TemplateBeginEditable name="body2" -->&nbsp;<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td height="100%" valign="top" bgcolor="#990000"><!-- TemplateBeginEditable name="headlines" -->headlines<!-- TemplateEndEditable --></td>
</tr>
</table>
</body>
</html>

Rich_A06
04-25-2007, 01:42 PM
Hi, use 100% width for the main content and header and then a fixed width for your navigation. I tried typing some stuff into the body layer and it seems to work fine if I use spaces inbetween words.

Paws
04-26-2007, 10:25 AM
I must be honest working tables and editable regions is a bitch, but maybe you should create a seperate table for your editable region:
I made a change hope it makes sense???

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
font-size: 36px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #999999;
}
.style2 {
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #999999;
}
.style3 {
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #999999;
}
.style7 {font-size: 36px}
.style8 {
color: #990000;
border-bottom-width: 1pt;
border-bottom-style: solid;
border-bottom-color: #000000;
padding: 20px;
}
.style9 {color: #FFFFFF}
-->
</style>
<script type="text/JavaScript">
<!--
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];}}
}

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>
</head>
<body onload="MM_preloadImages('../Images/buttons/homebut_f2.jpg','../Images/buttons/aboutbut_f2.jpg','../Images/buttons/activbut_f2.jpg','../Images/buttons/newsbut_f2.jpg','../Images/buttons/palbut_f2.jpg','../Images/buttons/persbut_f2.jpg','../Images/buttons/linksbut_f2.jpg','../Images/buttons/contbut_f2.jpg')">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="153" bgcolor="#990000">&nbsp;</td>
<td width="15" valign="top">&nbsp;</td>
<td width="107" valign="top"><p align="center" class="style1"><img src="../Images/logo.JPG" width="107" height="126" /></p> </td>
<td width="475" valign="top"><p align="center" class="style1">Title goes here... </p>
<p align="center" class="style2">MELBOURNE AUSTRALIA </p>
<p align="center" class="style3">&ldquo;Our lives begin to end the day we become silent about the things that matter.&rdquo;</p></td>
</tr>
<tr>
<td rowspan="4"><table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="153">
<!-- fwtable fwsrc="mybuts.png" fwbase="mybuts.jpg" fwstyle="Dreamweaver" fwdocid = "1111788209" fwnested="0" -->
<tr>
<td><img name="space1" src="../Images/buttons/space1.gif" width="153" height="77" border="0" id="space1" alt="" /></td>
</tr>
<tr>
<td><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebut','','../Images/buttons/homebut_f2.jpg',1)"><img name="homebut" src="../Images/buttons/homebut.jpg" width="153" height="42" border="0" id="homebut" alt="Home" /></a></td>
</tr>
<tr>
<td><a href="../aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutbut','','../Images/buttons/aboutbut_f2.jpg',1)"><img name="aboutbut" src="../Images/buttons/aboutbut.jpg" width="153" height="45" border="0" id="aboutbut" alt="About WFP" /></a></td>
</tr>
<tr>
<td><a href="../activities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('activbut','','../Images/buttons/activbut_f2.jpg',1)"><img name="activbut" src="../Images/buttons/activbut.jpg" width="153" height="45" border="0" id="activbut" alt="Activities" /></a></td>
</tr>
<tr>
<td><a href="../newsletter.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('newsbut','','../Images/buttons/newsbut_f2.jpg',1)"><img name="newsbut" src="../Images/buttons/newsbut.jpg" width="153" height="45" border="0" id="newsbut" alt="Newsletter" /></a></td>
</tr>
<tr>
<td><a href="../palestine.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('palbut','','../Images/buttons/palbut_f2.jpg',1)"><img name="palbut" src="../Images/buttons/palbut.jpg" width="153" height="45" border="0" id="palbut" alt="Palestine" /></a></td>
</tr>
<tr>
<td><a href="../perspective.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('persbut','','../Images/buttons/persbut_f2.jpg',1)"><img name="persbut" src="../Images/buttons/persbut.jpg" width="153" height="50" border="0" id="persbut" alt="Perspectives" /></a></td>
</tr>
<tr>
<td><a href="../links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('linksbut','','../Images/buttons/linksbut_f2.jpg',1)"><img name="linksbut" src="../Images/buttons/linksbut.jpg" width="153" height="42" border="0" id="linksbut" alt="Links" /></a></td>
</tr>
<tr>
<td><a href="../contactus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contbut','','../Images/buttons/contbut_f2.jpg',1)"><img name="contbut" src="../Images/buttons/contbut.jpg" width="153" height="43" border="0" id="contbut" alt="Contact Us" /></a></td>
</tr>
<tr>
<td><img name="space2" src="../Images/buttons/space2.gif" width="153" height="65" border="0" id="space2" alt="" /></td>
</tr>
</table></td>
<td height="19" colspan="3" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="474" rowspan="2" valign="top">&nbsp;</td>
<td height="106" colspan="2" valign="top"><!-- TemplateBeginEditable name="header" -->
<p class="style7"><br />
<span class="style8">About us<span class="style9">________</span></span></p>
<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td height="237" colspan="2" valign="top">

<!-- TemplateBeginEditable name="body1" -->&nbsp;
<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<!-- TemplateEndEditable -->

</td>
</tr>
<tr>
<td rowspan="2" valign="top">&nbsp;</td>
<td colspan="2" rowspan="2" valign="top"><!-- TemplateBeginEditable name="body2" -->&nbsp;<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td height="100%" valign="top" bgcolor="#990000"><!-- TemplateBeginEditable name="headlines" -->headlines<!-- TemplateEndEditable --></td>
</tr>
</table>
</body>
</html>

Karkar
04-29-2007, 02:40 PM
I will try and apply this now.

Karkar
04-29-2007, 03:07 PM
Hmmm. I copied the code into dw and it still did not seem to work. I don't think the widths are the problem though, cos it's the more lines of text that make the side cells split apart. Arghhhh. It's killing me.

3dmaya
04-29-2007, 04:03 PM
hi
I had the same problem. what I did, I used nested table(a new table inside the cell) it can be used for text or image. it is editable very easy, also you don't have trouble with other cells, like stretching other cells.
also remove extra space (&nbsp;)at the end of table, DW create extra space when you create table, I hope this helps you,

cheerrrrrrrrrrrrrs me