Table Conflict

[Renatus]

I have some trouble with the table on my site. It doesn't seem to act as normal. On http://www.renewing.nl/construct.html you will see an example of the the construction of the table.

Here you will find site+css+javascript:
http://www.renewing.nl/index2.html
http://www.renewing.nl/renewing.css
http://www.renewing.nl/renewing.js

I can't get the table to be displayed right: The table should fill out 100% (in height and width) of the page.

-The first row should be 20 pixels high.
-The second row should be 107 pixels high (height of the image). The left and right column of the second row should be 200 pixels and the central cell should use all the remaining space (to fill up to 100% off width).
-The height of the 3th row should use all the remaining space (to fill up to 100% off height).
-The 4th row should have a height of 10px and the 5th row a height of 20px.
In all the cells of the 2,3,4th row the content should be vertical aligned to the top (rather than to the middle). (the central content should be higher). Hope it can be solved because I tried all kind of things without success.

This all seems to simple and maybe it is, but somehow I can't work it out with the css and html code.

[Lchad]

Hmmmmm... your post makes sense but I can't seem to see four table rows.

Are you counting #container as row 3 that takes up 100% height?

You actually do not have the first row set for a height of 20px. You'd need to add

Code: Select all

 <td height="20" colspan="3" bordercolor="#FF0000" class="bars links" border="1"><div align="left">&nbsp;&nbsp;Search
    - <a href="construct.html">Translate</a> </div></td>

Row two would look like this

Code: Select all

<tr height="107" width="100%" valign="top">
    <td width="200"></td>
    <td><div align="center"><img src="Images/RENEWING.png" alt="Renewing" name="renewing" width="308" height="170" id="renewing"/></div></td>
    <td width="200" align="center" valign="top">
      <fieldset>

      <strong>tip:</strong> use page-up-key to jump to a site; type "cnn"+page up
      </fieldset><p>&nbsp;</p>
    </td>
  </tr>

After that I get lost...

You can't vertically align things easily with div's and css so that maybe why you are having a hard time in the <div id="container"></div> It's not impossible but you need to do it with css.

row 4 would look like this

Code: Select all

<tr valign="top">
    <td height="20" colspan="3" class="bars links">
    <a href="#" id="home">Make Homepage</a> - 
    <a href="construct.html">Add to Favorites</a> - 
    <a href="construct.html">What do You Think</a> - 
    <a href="construct.html">Tell a Friend</a></td>

  </tr>

You are sort of going about this in the wrong way.
You need to abandon tables completely. You will have much better success if you use straight html using div's and css to style the content.

Moojoo has some nice layouts here http://www.newguyinennis.com/samples/layouts/ If you chose a three column layout you may be able to modify to something like you are looking for.
Here's another one that is excellent http://www.pmob.co.uk/temp/3colfixedtest_4.htm
and one that is a bit different http://bonrouge.com/3c-hf-fluid-lc.php


Hope this helped a little.

[Renatus]

Thanks for the reaction. I learned a few things about css but in the end i still can't get the site right.