Help putting information in the middle of the page.

[gokou]

Heres the site.
http://www.angelfire.com/gundam/gameresources/main.html


So far I have used only tables to set up the page. I am trying to figure out the best way to put a large grouping of text in the middle of the page after you have used tables. You can't just use more table commands to go in the center(I think) cause it keeps going further down the page with every <tr> tag you use. I was thinking of using <div> with position:absolute, but I don't know too much css, but enough to get it to work. I'll have to re-read a tutorial on it. The div command is mainly what confuses me. If anyone can give me the best method of doing, i'd appreciate it.

[swon]

if I understand you right, make it with a parent table:

<table border="0" width="100%">
<tr>
<td width="100"><img src="gr.jpg"><br><br></td>
<td valign=top>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="ultimatitle.jpg"></td>
<tr>
<td align="center"><a href="C:\My Documents\main.html"><img src="uobanner.gif"></a></td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td>
<table border=0 bgcolor="orange" width="100" cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom"><img src="topleftcorner.gif"></td>
<td valign="bottom"><img src="topfire.gif"></td>
<td valign="bottom"><img src="toprightcorner.gif"></td>
</td>
</tr>
<tr>
<td valign="top"><img src="cement.gif"></td>
<td align="center"><img src="broker.gif">
<a href="broker list">Contact list</a><br><br>
<a href="Buy/Trade Resources">Buy/Trade Resources</a><br><br>
<a href="Buy Houses">Buy Houses</a>
<img src="shards.gif"><br>
<a href="">Baja</a><br><br>
<a href="">Chesapeake</a><br><br>
<a href="">Great Lakes</a><br><br>
<a href="">Lake Austin</a><br><br>
<a href="">Sonoma</a><br>
<img src="community.gif"><br>
<a href="">Forums</a><br><br>
<a href="">Leave Feedback</a></td>
<td valign="top"><img src="cement.gif"></td></tr>
<tr>
<td valign="bottom"><img src="bottomcornerleft.gif"></td>
<td valign="bottom"><img src="topfire.gif"></td>
<td valign="bottom"><img src="bottomcornerright.gif"></td>
</tr>
</table></td>
<td width="90%" valign=top>Here your middle text</td>
<td valign=top>some right text</td>
</tr>
</table>

[gil davis]

This works for IE 5+:

<DIV ID="oDiv" STYLE="position: absolute; left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2); top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2); text-align: center;">
<p>This is some text<br>
This is some text<br>
This is some text<br>
This is some text<br>
This is some more text<br>
This is some text<br>
This is some text<br>
This is some text<br>
This is some text<br>
</div>

[gokou]

Swon, using that inner table doesn't work. It just put text under the link box. Thanks for helping though.

gil davis, what is the peice of code in the parentheses? It seems like I can use the code you put without the code in the parentheses. Before I just cut/paste it I would like to know it means.

[gil davis]

Originally posted by gokou
what is the peice of code in the parentheses? It seems like I can use the code you put without the code in the parentheses. Before I just cut/paste it I would like to know it means.
It is JScript for calculating the position of the <DIV> so that it is centered on a page of any size.