Simple Site...Need Table Help...

[Mr. Blue]

Ok I'm working on a simple site for my dentist, he owns a Self-Storage company and he drew up a website layout and gave me the logo they are using for their signs so basically I just need to get the layout done and put the content in. I wanted to make my own logo and design but they were really stuck on this so I went with it...anyways...on to my question.

The temp. link: http://users.adelphia.net/~dabailey/cranberry/

If you go to the Photo Tour section you'll see that the spacing between the spaces on the left gets all messed up and that's what I'm wondering about...here is a nice little picture as to what I need:

http://users.adelphia.net/~dabailey/cranberry/problem.gif

The black boxes are individual cells in the table and in the big table is my content for each page, I need that to change and enlarge vertically as I add mroe content without messing up the links on the left. Thx...hope I explained myself well enough here!

-Dave

[HTML]

Your nested table is a mess
The basic structure should be as follows

<table>
<tr>
<td valign="top">
insert nav table
</td>
<td valign="top">
insert image table
</td>
</tr>
</table>

currently your code

  <table width="710" border="0" cellpadding="5" cellspacing="0" bgcolor="#CCCCCC">
		<tr>	
            <td valign="top">
		<table width="100%" border="0">
		<tr>
			<td height="60" width="18%" align="left"><a href=index.html>Home</a></td><td rowspan="7" class="font1" align="center" width="82%"><br><img src="images/indexholder.gif" width="500" height="300"><br><br>Any Questions or Comments?<br>Feel Free To Call Us: <b>(508) 291-1318</b><br>or<br>Send Us An Email: <a href="mailto:Cranberry.SelfStorage@verizon.net">Cranberry.SelfStorage@verizon.net</a></td>
		</tr>
		<tr>
			<td height="60" width="18%" align="left"><a href=visit.html>Visit Us</a></td>
		</tr>
		<tr>
			<td height="60" width="18%" align="left"><a href=guide.html>Storage Guide</a></td>
		</tr>
		<tr>
			<td height="60" width="18%" align="left"><a href=tour.html>Photo Tour</a></td>
		</tr>
		<tr>
			<td height="60" width="18%" align="left"><a href=prices.html>Prices</a></td>
		</tr>
		<tr>
        	<td height="60" width="18%" align="left"><a href=specials.html>Specials!</a></td>
		</tr>
		<tr>
		<td width="18%"></td>
		</table>
	  </td>
    </tr>
  </table>

You have 2 cells in 1 row while the others have 1, if you were to use this code you would need a colspan="2" in each row that has a single cell, however this is bad code to begin with so it does not matter.

take that image out of ths table, whats left and put it in the proper spot of the table above, put the image in its own table and insert it in to its proper spot in the parent table above.

Dave

[Mr. Blue]

Sorry Dave, either I'm really tired or I'm not understanding exactly what I should be doing here. I was trying to use the 'rowspan' command but evidently that's not what I should be using. Are you saying I should:

<table width="710" border="0" cellpadding="5" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top">
<table width="100" border="0">
<tr>
<td height="60" align="left"><a href=index.html>Home</a></td>		
</tr>
<tr>
<td height="60" align="left"><a href=visit.html>Visit Us</a></td>
</tr>
<tr>
<td height="60" align="left"><a href=guide.html>Storage Guide</a></td>
</tr>
<tr>
<td height="60" align="left"><a href=tour.html>Photo Tour</a></td>
</tr>
<tr>
<td height="60" align="left"><a href=prices.html>Prices</a></td>
</tr>
<tr>
<td height="60" align="left"><a href=specials.html>Specials!</a></td>
</tr>
</table>
</td>
<td valign="top">
<table width="610" border="0" cellpadding="5" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center"><br><img src="images/indexholder.gif" width="500" height="300"><br></td>
</tr>
<tr>
<td class="font1">
<br>Any Questions or Comments?<br>Feel Free To Call Us: <b>(508) 291-1318</b><br>or<br>Send Us An Email: <a href="mailto:Cranberry.SelfStorage@verizon.net">Cranberry.SelfStorage@verizon.net</a></td>
</tr>
</table>
</td>
</tr>
</table>

Or something of the sort...sorry I'm tired...can you help me out here? Wait do i need 'colspan=2' in the 'td' tags which contain 'valign=top' in those same ones?

[HTML]

my fault, I did not see the rowspan attribute in the tag.(too much pain medicine)

The best solution is still as stated,

Create a table with 1 row and 2 cells, put the valign=top in each of these cells (no colspan or rowspan needed).

Next, in each of the above cells insert an all new table, the first containing the nav, the second containing the image.

Dave

[Mr. Blue]

omg...lol...now that I'm awake I don't see why I didn't do that in the first place. Thx!

[benzden]

Having worked on exactly these kinds of layouts (http://kevin.ciriacks.com) for the past several months, here's a tip:

leave the WIDTH and HEIGHT attributes off the <IMG ..> tag but do place the WIDTH= and HEIGHT= of the largest image(s) in the <TD VALIGN=top ...> tag.

Also use the NAME=(name) attribute of the <TABLE ...> as a reference when calling the images via the <A HREF=#(name ) onClick="document.poPhoto.src='image1.jpg'">image1</A> or other process.

My objective was to display the pictures without having the display window jumping around the screen when image sizes varied.

[Mr. Blue]

Thx again for yet another helpful tip..as always