Ok, so I tried to follow the basic guidlines of the tutorial and implement them into my complex table. however, I seem to be running into some issues;
1. When I set the expaniding sections to 100%, they take up the entire header adn my main image is gone
2. If I change the % width to somethign like 20%, they expand and contract as they should BUT, when the screen res lessens the two expandable areas only shrink down a little bit and then the main image acts like it has two columns and they begin to shrink.
What did I do wrong?
Here is the code I used;
Code:
<!-- logo -->
<a name="top"></a>
<table border="0" cellpadding="0" cellspacing="0" $stylevar[outertablewidth] align="center">
<tr>
<td rowspan="4" width="50%" height="180" style="background-image: url(http://localhost/forum/images/head/left_fill.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td rowspan="4" width="416" height="180" style="background-image: url(http://localhost/forum/images/head/Banner_02.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="2" rowspan="3" width="104" height="152" style="background-image: url(http://localhost/forum/images/head/Banner_03.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="3" width="243" height="13" style="background-image: url(http://localhost/forum/images/head/Banner_04.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td rowspan="4" width="17" height="180" style="background-image: url(http://localhost/forum/images/head/Banner_05.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td rowspan="4" width="50%" height="180" style="background-image: url(http://localhost/forum/images/head/right_fill.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td colspan="2" width="234" height="60" style="background-image: url(http://localhost/forum/images/head/ad.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="9" height="60" style="background-image: url(http://localhost/forum/images/head/Banner_08.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td colspan="3" width="243" height="79" style="background-image: url(http://localhost/forum/images/head/Banner_09.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td width="99" height="28" style="background-image: url(http://localhost/forum/images/head/home.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="2" width="109" height="28" style="background-image: url(http://localhost/forum/images/head/forum.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="2" width="139" height="28" style="background-image: url(http://localhost/forum/images/head/links.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td width="8" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="416" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="99" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="5" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="104" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="130" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="9" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="17" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="12" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
</table>
<!-- /logo -->