Jump to content

Box help?


Andrew R

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
Link to comment
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]
Link to comment
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]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.