How do you do that Table Trick Again?

Getting Content Above Left Navigation in Code

[jimh009]

Hi,

I've been attempting, vainly, to "push" my main content area up above the left-side navigation area on my new sites template without success. I remember reading here a long time ago that there is a neat little trick to accomplish this - but for the life of me I can't find the post or remember how to do it. :)

Anyone willing to spill the secret of how you can push the code of the main content area above a left side navigation system in a 2 column table?

Thanks.

Jim

[Alternative Future]

Hello jimh009,

I think what you are after is the technique using z-index if this is right then you would create your tables and encapsulate them in div tags or any other suitable tags with the z-index set lower for the left hand nav i.e.

<div style="z-index:-5">
//left hand table or other form to make my nav
</div>
<div style="z-index:5">
//my main content
</div>

HTH,

-George

[benihana]

for tables:

you need to set up your left hand column so it has an additonal <td> with nothing in it at the top:

¦-----------¦-----------------------------¦
¦empty..¦main content..........¦
¦-----------¦main content..........¦
¦nav......¦main content..........¦
¦nav......¦main content..........¦
¦nav......¦main content..........¦
¦nav......¦main content..........¦
¦nav......¦main content..........¦
¦-----------¦-----------------------------¦

hope this makes sense!

[Macro]

Jim, I think you are talking about the CSS tactic of having your content appear ealier than the nav menu in the html only so that search engines bots see your content before they see the nav menu.

I think it involves the <div>s mentioned earlier. I don't know if it involves "z" index though. I thought that was to most used to position text behind images.

Maybe this post is better in the CSS forum. You could ask a mod to move it if you want.

[stever]

No, I think benihana has it right. You need to have a 2x2 table. Put nothing in the top left and combine the right side cells:

<table>
<tr>
<td>&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

[jimh009]

Stever,

That pretty much worked. This is the code I ended up with after all was said and done.

<CENTER>
<TABLE width=95% border=0 cellpadding=3 cellspacing=0 bgcolor="#FFFFFF">
<TR>
<TD width="250"><BR></TD><TD rowspan=2 valign=top>
Main Body (uses rowspan=2)
</TD>
</TR>
<TR>
<TD width="250">
Side Bar
</TD>
</TR>
</TABLE>
</CENTER>

Thanks for your help.

[bill]

Just for historic reference, here's the original table trick thread: How to get main text "before" other body html? [webmasterworld.com]

[Robert Charlton]

To add a PS to the original thread, if your right column gets too long and the content in the left column drops, add a bunch of break tags and non-breaking spaces to "push" it up.

I can imagine that dynamic content in the right hand column that varies greatly in quantity from page to page might still give you trouble.

[Lorel]

To add a PS to the original thread, if your right column gets too long and the content in the left column drops, add a bunch of break tags and non-breaking spaces to "push" it up.

Or surround your left column content with a div and put the following in CSS file to push the Div up:

.vertaligntop { vertical-align:top;
margin-top:0;
}

This doesn't work 100% on a very long column on right side but it helps. Maybe someone else will come up with a solution that really works.

[sammydafish]

wow, that original thread is from 2001 ... is that even relivant anymore?