I need the PICTURE column to have the black background for picture, and blue background for text area with black text. However, I need this to coincide with the other columns, such that the section ends where the left navigational ends. Horizontally speaking, it should look like this:
navigation 1 picture 1 script 1 commentary 1
navigation 2 picture 2 script 2 commentary 2
navigation 3 picture 3 script 3 commentary 3
navigation 4 picture 4 script 4 commentary 4
navigation 5 picture 5 script 5 commentary 5
empty cell picture 6 script 6 commentary 6
empty cell picture 7 script 7 commentary 7
ect. with 18 picture/script/commentary slots.
Instead, I get the picture stuff all over the place, running into the other columns and bumping them out of place.
The link is at
www.tpgames.com/script/sojepi1pg1.htmlThanks in Advance!
Here is the code:
<html>
<body>
<table align="center" width="780" cellspacing="5" cellpadding="5" border="1">
<tbody class =" bodyContentBg_main">
<tr>
<th colspan="4"> SLAVES OF JEDIKIAH</th>
</tr>
<tr>
<th> NAVIGATION </th>
<th> PICTURE </th>
<th> SCRIPT </th>
<th> COMMENTARY </th>
</tr>
<!--1 BEGIN COPY BEGIN COPY BEGIN COPY BEGIN COPY 1-->
<tr>
<td valign="top">
<table>
<tr>
<th rowspan="6"> </th>
<!--navigational group 1 #1 NAVIGATION WORKS CORRECTLY -->
<td valign="top" onmouseout="className='nav_btnOff'" onmouseover="className='nav_btnOn'" class="nav_btnOff">
<a class="navLink" href="
http://www.tpgames.com/script/sojepi1pg1.html"><img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"><br> Episode 1 Page 1 </a></td></tr>[EDIT]
<a class="navLink" href="
http://www.tpgames.com/script/sojepi1pg6.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"><br> Episode 1 Page 6 </a> </td></tr>
</tr>
</table>
</td>
<!-- COLUMN 2 PICTURES AREA #1 THIS STOPS AT WRONG SPOT-->
<td class="blackblue" rowspan="2" valign="top">
<table>
<tr>
<th rowspan="2"></th>
<img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg">
<td class="blueblack">
<br>CAPTION<br>
</td>
</tr>
</table>
</td>
<!-- END COLUMN 2 PLACE #1-->
<!-- PLACE SCRIPT HERE #1 --> <!-- PLACE SCRIPT HERE -->
<td valign="top">
<br><p>column 3 words SCRIPT WORDS<br>
</p>
</td>
<!-- PLACE COMMENTARY HERE #1 --> <!-- PLACE COMMENTARY HERE -->
<td valign="top">
<p><br>COMMENTARY WORDS COLUMN 4<br>
</p>
</td>
</tr>
<!--1 END COPY END COPY END COPY #1 -->
<!--2 BEGIN COPY BEGIN COPY BEGIN COPY BEGIN COPY# 2-->
<tr>
<td valign="top">
<table>
<tr>
<th rowspan="6"> </th>
<!--navigational group #2 -->
<td valign="top" onmouseout="className='nav_btnOff'" onmouseover="className='nav_btnOn'" class="nav_btnOff">
[EDIT]
<a class="navLink" href="
http://www.tpgames.com/script/sojepi2pg6.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"><br> Episode 2 Page 6 </a> </td></tr>
</tr>
</table>
</td>
<!-- COLUMN 2 PICTURES AREA #2 -->
<td class="blackblue" rowspan="2" valign="top">
<table>
<tr>
<th rowspan="2"></th>
<img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg">
<td class="blueblack">
<br>CAPTION<br>
</td>
</tr>
</table>
</td>
<!-- END COLUMN 2 PICTURES AREA -->
<!-- PLACE SCRIPT HERE --> <!-- PLACE SCRIPT HERE -->
<td valign="top">
<p><br>Place Script Column 3 words Here:<br></p>
</td>
<!-- PLACE COMMENTARY HERE --> <!-- PLACE COMMENTARY HERE --> <td valign="top">
<p><br>Place Column 4 Commentary Here:<br></p>
</td>
</tr>
<!--2 END COPY END COPY END COPY 2-->
<!--3 BEGIN COPY BEGIN COPY BEGIN COPY BEGIN COPY 3-->
<tr>
<td valign="top">
<table>
<tr>
<th rowspan="6"> </th>
<!--navigational group #3 -->
<td valign="top" onmouseout="className='nav_btnOff'" onmouseover="className='nav_btnOn'" class="nav_btnOff">
<a class="navLink" href="
http://www.tpgames.com/script/sojepi3pg1.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"> <br>Episode 3 Page 1 </a></td></tr>[EDIT]
<a class="navLink" href="
http://www.tpgames.com/script/sojepi3pg6.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"> <br>Episode 3 Page 6 </a> </td></tr>
</tr>
</table>
</td>
<!-- COLUMN 2 PICTURES AREA #3-->
<td class="blackblue" rowspan="2" valign="top">
<table>
<tr>
<th rowspan="2"></th>
<img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg">
<td class="blueblack">
<br>CAPTION<br>
</td>
</tr>
</table>
</td>
<!-- END COLUMN 2 PICTURES AREA #3 -->
<!-- PLACE SCRIPT HERE --> <!-- PLACE SCRIPT HERE -->
<td valign="top">
<p><br>Place Script Column 3 words Here:<br></p>
</td>
<!-- PLACE COMMENTARY HERE --> <!-- PLACE COMMENTARY HERE --> <td valign="top">
<p><br>Place Column 4 Commentary Here:<br></p>
</td>
</tr>
<!--3 END COPY END COPY END COPY 3-->
<!--4 BEGIN COPY BEGIN COPY BEGIN COPY BEGIN COPY 4-->
<tr>
<td valign="top">
<table>
<tr>
<th rowspan="6"> </th>
<!--navigational group #4: -->
<td valign="top" onmouseout="className='nav_btnOff'" onmouseover="className='nav_btnOn'" class="nav_btnOff">
<a class="navLink" href="
http://www.tpgames.com/script/sojepi4pg1.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"> <br>Episode 4 Page 1 </a></td></tr>[EDIT]
<a class="navLink" href="
http://www.tpgames.com/script/sojepi4pg6.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"><br> Episode 4 Page 6 </a> </td></tr>
</tr>
</table>
</td><!-- COLUMN 2 PICTURES AREA #4 -->
<td class="blackblue" rowspan="2" valign="top">
<table>
<tr>
<th rowspan="2"></th>
<img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg">
<td class="blueblack">
<br>CAPTION<br>
</td>
</tr>
</table>
</td>
<!--END COLUMN 2 PICTURES AREA #4 -->
<!-- PLACE SCRIPT HERE --> <!-- PLACE SCRIPT HERE -->
<td valign="top">
<p><br>Place Script Column 3 words Here:<br></p>
</td>
<!-- PLACE COMMENTARY HERE --> <!-- PLACE COMMENTARY HERE --> <td valign="top">
<p><br>Place Column 4 Commentary Here:<br></p>
</td>
</tr>
<!--4 END COPY END COPY END COPY 4-->
<!--5 BEGIN COPY BEGIN COPY BEGIN COPY BEGIN COPY 5-->
<tr>
<td valign="top">
<table>
<tr>
<th rowspan="6"> </th>
<!--navigational group #5: -->
<td valign="top" onmouseout="className='nav_btnOff'" onmouseover="className='nav_btnOn'" class="nav_btnOff">
<a class="navLink" href="
http://www.tpgames.com/script/sojepi5pg1.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"><br> Episode 5 Page 1 </a></td></tr>[EDIT]
<tr> <td onmouseout="className='nav_btnOff'" onmouseover="className='nav_btnOn'" class="nav_btnOff">
<a class="navLink" href="
http://www.tpgames.com/script/sojepi5pg5.html"><img width="120"
height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg"> <br>Episode 5 Page 6 </a> </td></tr>
</tr>
</table>
</td>
<!-- COLUMN 2 PICTURES AREA #5 -->
<td class="blackblue" rowspan="2" valign="top">
<table>
<tr>
<th rowspan="2"></th>
<img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg">
<td class="blueblack">
<br>CAPTION<br>
</td>
</tr>
</table>
</td>
<!-- END COLUMN 2 PICTURES AREA #5 -->
<!-- PLACE SCRIPT HERE --> <!-- PLACE SCRIPT HERE -->
<td valign="top">
<p><br>Place Script Column 3 words Here:<br></p>
</td>
<!-- PLACE COMMENTARY HERE --> <!-- PLACE COMMENTARY HERE --> <td valign="top">
<p><br>Place Column 4 Commentary Here:<br></p>
</td>
</tr>
<!--5 END COPY END COPY END COPY 5-->
<!-- SCRIPT ADDITIONAL CELLS #6 -->
<tr>
<td>
<table>
<tr>
<th> </th>
<!--navigational group NOT NEEDED// EMPTY CELL NEEDED -->
</tr>
</table>
</td>
<!-- COLUMN 2 PICTURES AREA #6 -->
<td class="blackblue" rowspan="2" valign="top">
<table>
<tr>
<th rowspan="2"></th>
<img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg">
<td class="blueblack">
<br>CAPTION<br>
</td>
</tr>
</table>
</td>
<!-- END #6 COLUMN 2 PICTURES AREA -->
<!-- PLACE SCRIPT HERE --> <!-- PLACE SCRIPT HERE -->
<td valign="top">
<p><br>Place Script Column 3 words Here:<br></p>
</td>
<!-- PLACE COMMENTARY HERE --> <!-- PLACE COMMENTARY HERE --> <td valign="top">
<p><br>Place Column 4 Commentary Here:<br></p>
</td>
</tr>
<!-- END #6 AREA-->
<!-- SCRIPT ADDITIONAL CELLS #7-->
<tr>
<td>
<table>
<tr>
<th> </th>
<!--navigational group NOT NEEDED //EMPTY CELL NEEDED-->
</tr>
</table>
</td>
<!-- #7 COLUMN 2 PICTURES AREA -->
<td class="blackblue" rowspan="2" valign="top">
<table>
<tr>
<th rowspan="2"></th>
<img width="120" height="95" alt="" src="
http://www.tpgames.com/MainPublicTP/images/timtbgnav.jpg">
<td class="blueblack">
<br>CAPTION<br>
</td>
</tr>
</table>
</td>
<!-- END #7 COLUMN 2 PICTURES AREA -->
<!-- PLACE SCRIPT HERE --> <!-- PLACE SCRIPT HERE -->
<td valign="top">
<p><br>Place Script Column 3 words Here:<br></p>
</td>
<!-- PLACE COMMENTARY HERE --> <!-- PLACE COMMENTARY HERE --> <td valign="top">
<p><br>Place Column 4 Commentary Here:<br></p>
</td>
</tr>
<!--END #7 code for commentary-->
<!--BEGIN code for section #8-->
[ECT. FOR #8 - #18 Ends with the following code:]
</table>
</body>
</html>
Sorry so long! But I didn't know where to edit.