Hi

I have a page I made in Dream Weaver that has a table inside the table with individual cells. When I publish the page, it is all misaligned. Each picure is supposed to have wording underneath it. Everthing get spread out and looks terrible.
How can I fix this?

The page is at:
http://www.christinesflowers.ca/catalogue2.htm

Taz

Hello,

I took a look at the source and there a few issues with the layout. For example there appears to be descrepencies in rows vs colums and vice versa. Most of this could be solved with a few rowspan and colspans. Ultimately if you want to make a page in tables, I have found using border="1" during development can make the job a whole lot easier. When you are finished with the lay out of course you can always set the border back to 0. If you give this a try it will make the job a lot smaller than it might appear now.

If you try this and still can't get it just right, post here or pm me and I'll help you rewrite it.


Cheers,

Hi faze1

thanks for your response.

I tried entering border 1, but it did not fix the problem.

Even if it did work for the development how woudl you remove it later without creating all kinds of probems.

Is there another way around this if I don't use tables?

Taz

Hi Tazmania,

Adding a border wont fix anything, I just use it so I can clearly see what's going on with the contruction of the table. It's useful for highlighting the layout. It should be able to be removed with out much difficulty.

You could do the layout you are going for using css, in fact it might be alot easier.

I was playing with your table layout right before I wrote this and I was able to elliminate alot of the code and still get a rough layout to work well. I didn't download any of your images, so I dont know how much tweaking still needs to be done but I can show you what I have so far.

<table width="775" border="0" cellpadding="0" cellspacing="0" align="center">
 <tr>
  <td height="30"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','Images/images/buttons_sliced_01.gif',1)"><img src="Images/images/background7_sliced_06.gif" alt="Home" name="Home" width="144" height="47" border="0"></a></td>
  <td width="20">&nbsp;</td>
  <td rowspan="7" valign="top">
   <table class="layout" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td width="33%" height="155" valign="top"><a href="index.html"><img src="item_pictures/CHBR1.jpg" width="176" height="117" border="0">Brickstone Fine Foods</a></td>
     <td width="33%" valign="top"><img src="item_pictures/CHC5.jpg" width="176" height="117">Celebrations</td>
     <td width="33%" valign="top"><img src="item_pictures/CHE8.jpg" width="176" height="117">Everyday</td>
    </tr>
    <tr>
     <td width="33%" valign="top"><img src="item_pictures/CHFP1.jpg" width="176" height="117">Fruit &amp; Passions</td>
     <td width="33%"><img src="item_pictures/CHB1.jpg" width="176" height="117">Gift Baskets</td>
     <td width="33%"><img src="item_pictures/CHP1.jpg" width="176" height="117">Planters</td>
    </tr>
    <tr>
     <td width="33%" valign="top"><img src="item_pictures/CHS2.jpg" width="176" height="117">Sympathy</td>
     <td width="33%"><img src="item_pictures/CHW6.jpg" width="176" height="117">Wedding</td>
     <td>&nbsp;</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td><a href="aboutus.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About us','','Images/images/buttons_sliced_02.gif',1)"><img src="Images/images/background7_sliced_08.gif" alt="About Us" name="About us" width="144" height="45" border="0"></a></td>
  <td width="20">&nbsp;</td>
 </tr>
 <tr>
  <td height="46"><a href="catalogue.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Catalogue','','Images/images/buttons_sliced_03.gif',1)"><img src="Images/images/background7_sliced_09.gif" alt="Catalogue" name="Catalogue" width="144" height="46" border="0"></a></td>
  <td width="20">&nbsp;</td>
 </tr>
 <tr>
  <td height="48"><a href="location.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','Images/images/buttons_sliced_04.gif',1)"><img src="Images/images/background7_sliced_10.gif" alt="Location" name="Location" width="144" height="48" border="0"></a></td>
  <td width="20">&nbsp;</td>
  <td></td>
 </tr>
 <tr>
  <td><a href="contactus.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','Images/images/buttons_sliced_05.gif',1)"><img src="Images/images/background7_sliced_11.gif" alt="Contact Us" name="Contact" width="144" height="43" border="0"></a></td>
  <td width="20">&nbsp;</td>
 </tr>
  <tr>
  <td>&nbsp;</td>
  <td width="20">&nbsp;</td>
 </tr>
  <tr>
  <td>&nbsp;</td>
  <td width="20">&nbsp;</td>
 </tr>
</table>

I wouldn't recommend overwriting your file with this as I just took this out of the source and tweaked a little here and there. You could use this to make a second version of your file and tweak it to get the whole site in there as this table is fairly stable.

I also added 2 new css classes;

table.layout img {
 clear: both;
 display: block;
}
table.layout td {
 text-align: center;
}

Post again or pm me if you want a little help squeezing this in to the page.

Cheers,