Jump to content

Archived

This topic is now archived and is closed to further replies.

Andrew R

Box help?

Recommended Posts

Hello.

My website design is made up of five layout tables (below)

http://img519.imageshack.us/img519/9927/1ayz4.jpg

The top left table is for the logo, the top right table is for the banner, the middle left table is for the navigation, the middle right table is for the content and the bottom table is for the footer.

The problem I am having is that when I start adding content to the middle right table (where is says, “TEST AND TEST”) the navigation table colour doesn’t stretch so what you get is an effect like below.

http://img394.imageshack.us/img394/6637/2adh5.jpg

This is alright when you are simply doing an html site because you can stretch the navigation table so you don’t get a white line below it although I plan to use a lot of dynamic content (php etc) and the content table will automatically stretch by itself. How would I solve this problem?

Your help would be much appreciated.

Thanks

Share this post


Link to post
Share on other sites
Without posting code its difficult to give an answer, if not impossible.

Share this post


Link to post
Share on other sites
Put [code]cellspacing='0' cellpadding='0'[/code] in your table tag.

Share this post


Link to post
Share on other sites
Sorry, there is the HTML code.

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<table width="922" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="266" height="172" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000099">
        <!--DWLayoutTable-->
        <tr>
          <td width="266" height="172">&nbsp;</td>
        </tr>
      </table></td>
    <td width="656" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEEEEE">
        <!--DWLayoutTable-->
        <tr>
          <td width="656" height="172" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="153" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEEEEE">
        <!--DWLayoutTable-->
        <tr>
          <td width="266" height="153"></td>
        </tr>
      </table></td>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F8F8F8" >
        <!--DWLayoutTable-->
        <tr>
          <td width="656" height="153">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="23" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000099">
        <!--DWLayoutTable-->
        <tr>
          <td width="922" height="23">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>[/code]

Share this post


Link to post
Share on other sites
You're telling the tables how high the cells are by using height="xx"

If the contents of a neighbouring cell gets too much making the cell taller then the specified background color will stay set to height="xx" even though the cell itself has actually got taller.

One way around this is to remove height="xx" but instead place loads of line breaks to make the cells taller.

Before:
[code]      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEEEEE">
        <tr>
          <td width="266" height="153">&nbsp;</td>
        </tr>
      </table>
[/code]

After:
[code]      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEEEEE">
        <tr>
          <td width="266"><br /><br /><br /><br /><br /><br /><br /><br /></td>
        </tr>
      </table>
[/code]

Share this post


Link to post
Share on other sites
A rather more rational solution would be to use a technique like 'Faux Columns' in a CSS-based layout.  You could find that at www.alistapart.com

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.