Positioning with tables problem 2

valicon · Apr 27, 2002

Hi all,

I am designing a site and I am using tables for a menu that is off to the left of the page and I want to put content in the middle and right sections of the page. I have split the tables into cells. Everything is fine until I put in graphics in the middle table, then the menu on the left drops down to the center of the page! How can I get better positioning, I know it is hard positioning with tables, any suggestions?? Thanks all.

Wullie · Apr 27, 2002

Hi mate,

Can you post the relevant code here??

We would be guessing if we tried to help with what you have supplied...

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

valicon · Apr 27, 2002

Wullie,

I have a menu on the left side of the page which is a nested table (not in code below) and then I am trying to place content in the miidle and right sides of the page, but when I do the menu drops down to the center of the page! I am trying to make my tables stay put. Here is the code:<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="elogotrans.gif" width="238" height="43"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="320">
<tr>
<td height="21" width="21%">
<div align="center"><img src="mc_bug100X25_2.gif" width="100" height="25"></div>
</td>
<td height="21" width="63%"><img src="newreleases_hd.gif" width="195" height="40"></td>
<td height="21" width="16%"> </td>
</tr>
<tr>
<td height="1128" width="21%" bgcolor="#FFFFCC" rowspan="4">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<div align="center"></div>
</td>
<td height="1128" width="63%" bgcolor="#FFFFCC" rowspan="3"><img src="1620-arabbitts.jpg" width="250" height="198">
<div align="center"></div>
</td>
<td height="13" width="16%"> </td>
</tr>
<tr>
<td height="16" width="16%"> </td>
</tr>
<tr>
<td height="9" width="16%"> </td>
</tr>
<tr>
<td height="1128" width="63%" bgcolor="#FFFFCC"> </td>
<td height="282" width="16%"> </td>
</tr>
<tr>
<td width="21%" height="2"> </td>
<td width="63%" height="2"> </td>
<td width="16%" height="2"> </td>
</tr>
</table>
<p> </p>
<p><br>
</p>
</body>
</html>

Wullie · Apr 27, 2002

Hi mate,

You will need to post all the relevant code as I cannot tell what the problem is unless I see it all..

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

valicon · Apr 27, 2002

Wullie,

Actually I just double checked that is the entire code.
Thanks

Wullie · Apr 27, 2002

Ok.. Let me double check. You want some thing like the following??

******************************************************
Do you want content here???

Link Text
Link Text
Link Image Text
Link Text
Link Text

******************************************************

Also, the way that the colours are on the above code, do you want to keep them that way??

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

valicon · Apr 27, 2002

Wullie,

Exactly, but when I insert the image the text links on the left which are in a nested table drop down below the content:******************************************************
(like this)

Image Text

Link Text
Link Text
Link
Link Text
Link Text

******************************************************

I want to keep the text links menu stable now matter what changes I make to the image area. I am trying not to use frames or CSS, what do you think? The colors I just stuck in there, I have not decided on the color scheme yet...Thanks

Wullie · Apr 27, 2002

Hi mate,

Take a look at this and let me know if it is what you want..

You will have to change the image size and also put the top images in...

If you need anything altered that you cannot do, then I will do it tommorow as it is 5:30am.... [sleeping]

BTW. Run it through a validator to check for any errors as I have been drinking so there will probably be some.. [wink]

The body tag should report 4 errors but ignore them...

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" align="center">
<TR>
<TD BGCOLOR="#FFFFFFCC" HEIGHT="80" align="center">
<H2>
Your Header Images Go In Here
</H2>
</TD>
</TR>
<TR>
<TD VALIGN="TOP" WIDTH="100%">
<TABLE BORDER="0" CELLSPACING="0">
<TR>
<TD>
<TABLE BORDER="0" WIDTH="170" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD VALIGN="top" align="center">
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
</TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
</TABLE>
</TD>
<TD>
<TABLE BORDER="0" WIDTH="400" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD VALIGN="top">
<P><BR>
<CENTER>
<table border="0" width="100%">
<tr>
<td>
<img src="whatever.gif" border="0" alt="Whatever" height="120" width="370"><p> </p>This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....
</td>
</tr>
</table>
</CENTER>
</TD>
</TR>
</TABLE>
</TD>
<TD>
<TABLE BORDER="0" WIDTH="150" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD VALIGN="top" align="center">
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
</TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Is that what you want???

Hope this helps
Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

Wullie · Apr 27, 2002

LOL I'll try again..!!

The forum is trying to process the code....

Code:

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD>
<BODY BGCOLOR=&quot;#FFFFCC&quot; topmargin=&quot;0&quot; leftmargin=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;>
<TABLE WIDTH=&quot;100%&quot; BORDER=&quot;0&quot; CELLSPACING=&quot;0&quot; CELLPADDING=&quot;0&quot; align=&quot;center&quot;>
<TR> 
<TD BGCOLOR=&quot;#FFFFFFCC&quot; HEIGHT=&quot;80&quot; align=&quot;center&quot;>
<H2>
Your Header Images Go In Here
</H2>
</TD>
</TR>
<TR>
<TD VALIGN=&quot;TOP&quot; WIDTH=&quot;100%&quot;>
<TABLE BORDER=&quot;0&quot; CELLSPACING=&quot;0&quot;>
<TR> 
<TD> 
<TABLE BORDER=&quot;0&quot; WIDTH=&quot;170&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot;>
<TR> 
<TD VALIGN=&quot;top&quot; align=&quot;center&quot;> 
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> 
<TABLE BORDER=&quot;0&quot; WIDTH=&quot;400&quot; CELLPADDING=&quot;1&quot; CELLSPACING=&quot;1&quot;>
<TR> 
<TD VALIGN=&quot;top&quot;>
<P><BR>
<CENTER>
<table border=&quot;0&quot; width=&quot;100%&quot;>
<tr>
<td>
<img src=&quot;whatever.gif&quot; border=&quot;0&quot; alt=&quot;Whatever&quot; height=&quot;120&quot; width=&quot;370&quot;><p>&nbsp;</p>This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....
</td>
</tr>
</table>
</CENTER>
</TD>
</TR>
</TABLE>
</TD>
<TD> 
<TABLE BORDER=&quot;0&quot; WIDTH=&quot;150&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot;>
<TR> 
<TD VALIGN=&quot;top&quot; align=&quot;center&quot;>                      
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

Wullie · Apr 27, 2002

Right, this is getting annoying now!!!

Code:

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD>
<BODY BGCOLOR=&quot;#FFFFCC&quot; topmargin=&quot;0&quot; leftmargin=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;>
<TABLE WIDTH=&quot;100%&quot; BORDER=&quot;0&quot; CELLSPACING=&quot;0&quot; CELLPADDING=&quot;0&quot; align=&quot;center&quot;>
<TR> 
<TD BGCOLOR=&quot;#FFFFFFCC&quot; HEIGHT=&quot;80&quot; align=&quot;center&quot;>
<H2>
Your Header Images Go In Here
</H2>
</TD>
</TR>
<TR>
<TD VALIGN=&quot;TOP&quot; WIDTH=&quot;100%&quot;>
<TABLE BORDER=&quot;0&quot; CELLSPACING=&quot;0&quot;>
<TR> 
<TD> 
<TABLE BORDER=&quot;0&quot; WIDTH=&quot;170&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot;>
<TR> 
<TD VALIGN=&quot;top&quot; align=&quot;center&quot;> 
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
<A HREF=&quot;#&quot;>My Link Here</A><br>
</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> 
<TABLE BORDER=&quot;0&quot; WIDTH=&quot;400&quot; CELLPADDING=&quot;1&quot; CELLSPACING=&quot;1&quot;>
<TR> 
<TD VALIGN=&quot;top&quot;>
<P><BR>
<CENTER>
<table border=&quot;0&quot; width=&quot;100%&quot;>
<tr>
<td>
<img src=&quot;whatever.gif&quot; border=&quot;0&quot; alt=&quot;Whatever&quot; height=&quot;120&quot; width=&quot;370&quot;><p>&nbsp;</p>This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....
</td>
</tr>
</table>
</CENTER>
</TD>
</TR>
</TABLE>
</TD>
<TD> 
<TABLE BORDER=&quot;0&quot; WIDTH=&quot;150&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot;>
<TR> 
<TD VALIGN=&quot;top&quot; align=&quot;center&quot;>                      
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
<TR> 
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Hope this helps
Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

Wullie · Apr 27, 2002

I give up!!!

All the empty <TD> </TD> tags should have the following in them but remove the spaces..

& n b s p ;

I worked out how to post this code correctly the other day but for some reason it isn't working now...

Let me know how you get on with it...

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

Wullie · Apr 27, 2002

One more attempt.. I'm determined to get this to work!! LOL

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" align="center">
<TR>
<TD BGCOLOR="#FFFFFFCC" HEIGHT="80" align="center">
<H2>
Your Header Images Go In Here
</H2>
</TD>
</TR>
<TR>
<TD VALIGN="TOP" WIDTH="100%">
<TABLE BORDER="0" CELLSPACING="0">
<TR>
<TD>
<TABLE BORDER="0" WIDTH="170" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD VALIGN="top" align="center">
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
<A HREF="#">My Link Here</A><br>
</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD>
<TABLE BORDER="0" WIDTH="400" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD VALIGN="top">
<P><BR>
<CENTER>
<table border="0" width="100%">
<tr>
<td>
<img src="whatever.gif" border="0" alt="Whatever" height="120" width="370"><p>&nbsp;</p>This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....This area is where your image goes and then text below or what ever you want....
</td>
</tr>
</table>
</CENTER>
</TD>
</TR>
</TABLE>
</TD>
<TD>
<TABLE BORDER="0" WIDTH="150" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD VALIGN="top" align="center">
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
This is text.<br>
</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Hope this helps
Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

Wullie · Apr 27, 2002

Finally!!! [noevil]

Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

valicon · Apr 28, 2002

Wullie,

Thanks for the code! I tested it and when I place the image in the middle content area the list of links in the left drop down just like my code! How can we get the list of links to stay put on the left(this is going to be the menu) when we put a image in the middle? I had this problem awhile back and have been out of the designing biz for awhile and I cannot remember how I solved this issue. I appreciate your help!

Wullie · Apr 28, 2002

What size is the image??

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

valicon · Apr 28, 2002

Actually it is happenning with any size image! Is there not a command that keeps the other table in place regardless of what happens in the center table? I cannot remember

Wullie · Apr 28, 2002

Hi mate,

Whats wrong with the image that is already there??

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

pabsh · Apr 29, 2002

Seems to me that you have your valigns in the wrong td tags...

Since you've nested a table within a cell the position of the table is set by the enclosing cell. This is why when you insert the image, the cell by default pushes the table with your links down toward the center of the screen.

Fix it by adding valign=top to the td tag that encloses the table that contains your links and also for the 'this is text' table you have on the right hand side.

A good idea when you have probs with tables is to set border=1 so that you can see the outline of your tables, then when it's sorted switch it back to zero.....

HTH

pabs.

valicon · Apr 29, 2002

Pabsh,

Thanks for the advice, it works like a charm. I really appreciate it. Thanks all!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Positioning with tables problem 2

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

MIS

Programmer

MIS

Programmer

Programmer

MIS

Similar threads

Log in

Part and Inventory Search

Sponsor