Jump to content


Photo

Box help?


  • Please log in to reply
6 replies to this topic

#1 Andrew R

Andrew R
  • Members
  • PipPipPip
  • Advanced Member
  • 158 posts
  • LocationIreland

Posted 07 August 2006 - 04:52 PM

Hello.

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

http://img519.images.../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.images.../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


#2 Yesideez

Yesideez
  • Members
  • PipPipPip
  • Advanced Member
  • 2,334 posts
  • LocationDevon, UK

Posted 07 August 2006 - 10:40 PM

Without posting code its difficult to give an answer, if not impossible.
Not a pro just an enthusiast :)

if (empty($coffee)) {$coffee=new coffee();}

Please surround any code using the CODE tags - I rarely look at anything without them

#3 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 08 August 2006 - 07:04 AM

Put
cellspacing='0' cellpadding='0'
in your table tag.

#4 Andrew R

Andrew R
  • Members
  • PipPipPip
  • Advanced Member
  • 158 posts
  • LocationIreland

Posted 08 August 2006 - 10:07 AM

Sorry, there is the HTML 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>


#5 Yesideez

Yesideez
  • Members
  • PipPipPip
  • Advanced Member
  • 2,334 posts
  • LocationDevon, UK

Posted 09 August 2006 - 12:43 PM

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:
      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEEEEE">
        <tr> 
          <td width="266" height="153">&nbsp;</td>
        </tr>
      </table>

After:
      <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>

Not a pro just an enthusiast :)

if (empty($coffee)) {$coffee=new coffee();}

Please surround any code using the CODE tags - I rarely look at anything without them

#6 Andrew R

Andrew R
  • Members
  • PipPipPip
  • Advanced Member
  • 158 posts
  • LocationIreland

Posted 10 August 2006 - 09:17 PM

Cheers Yesideez

#7 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 10 August 2006 - 09:26 PM

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
Legend has it that reading the manual never killed anyone.
My site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users