Help laying out page.

[bigjoe4]

I want to make my site: http://www.idesigncircuit4u.exofire.net/ go in a column up the middle of the page. I think I have to use CSS but I can't work out how to do it. Can anyone help me?

 

[dirtracer36]

You can try placing your site inside "div"

<div align="left"><div align="center">
your site
<div align="right"></div></div></div>

 

[bigjoe4]

Thankyou, that does work although it's not quite what I'm looking for. I want a sort of column like in this forum. I know I can use a template but I wanted to leave that as a last resort.

 

[dirtracer36]

<div align="left"><div align="center"><table cellpadding="12" cellspacing="12" bgcolor="#000000">
<tr><td width="690" bgcolor="#d3d3d3">
your site
</td></tr></table>
<div align="right"></div></div></div>

 

[bigjoe4]

WOW that's exactly what I wanted thankyou so much. I have paid 100 credits

 

[Twinkie]

A much easier way to do that is to put margins around the body's left and right sides. Copy this code into your CSS file and adjust the measurements.

body
{
margin-left: 100px;
margin-right: 100px;
margin-top: 10px;
margin-bottom: 10px;
}

 

[bigjoe4]

A much easier way to do that is to put margins around the body's left and right sides. Copy this code into your CSS file and adjust the measurements.

body
{
margin-left: 100px;
margin-right: 100px;
margin-top: 10px;
margin-bottom: 10px;
}

Thankyou, I will try this out aswell.

 

[dirtracer36]

Thanks for the credits. :biggrin:

 

[bigjoe4]

I have implemented the changes suggested by dirtracer36 and it works fine in Firefox and Opera and Netscape and Safari but doesn't display properly in IE. I have attached what it should look like and what it looks like in IE. Can annyone help me make it work in IE? Here's the link to my site if it helps http://www.idesigncircuit4u.exofire.net/site.html
Thanks in advance.

 

[Twinkie]

IE and Firefox read nested DIV tags differently. Try this:

<table align="center" cellpadding="5" celspacing="0" class="mainpage">
<tr>
<td>
Your Site
</td>
</tr>
</table>

and in your CSS file:

table.mainpage
{
margin: 20px 5px 20px 5px;
background-color: #000000;
text-align: center;
height: 100%;
width: 100%
}

table.mainpage td
{
background-color: #FFFFFF;
text-align: center;
}

Adjust the measurements. Hope it works

 

[bigjoe4]

IE and Firefox read nested DIV tags differently. Try this:

<table align="center" cellpadding="5" celspacing="0" class="mainpage">
<tr>
<td>
Your Site
</td>
</tr>
</table>

and in your CSS file:

table.mainpage
{
margin: 20px 5px 20px 5px;
background-color: #000000;
text-align: center;
height: 100%;
width: 100%
}

table.mainpage td
{
background-color: #FFFFFF;
text-align: center;
}

Adjust the measurements. Hope it works

Thanks. This does work but the box is different sizes depending on screen resolution which causes other problems. (dirtracer36' s code makes the box wrapp around the content). Is there a way to still use dirtracer36's idea but use CSS to make the font center properly in IE? Or some other way? I have sent 50 credits for being helpfull

 

[Twinkie]

Thank you for the credits
Try adding this as an attribute to the TD tag:

style="text-align: center; vertical-align: top;"

Also if you try this, it will work like dirtracer36's idea.

<table align="center" cellpadding="5" cellspacing="0" class="mainpage">
<tr>
<td>
Your Site
</td>
</tr>
</table>

and in the CSS file:

table.mainpage
{
margin: 20px 5px 20px 5px;
background-color: #000000;
text-align: center;
}

table.mainpage td
{
background-color: #FFFFFF;
text-align: center;
vertical-align: top;
margin: 5px;
}

Adjust measurements accordingly. Nice website and amazing use of JavaScript

 

[bigjoe4]

Thank you for the credits
Try adding this as an attribute to the TD tag:

style="text-align: center; vertical-align: top;"

Also if you try this, it will work like dirtracer36's idea.

<table align="center" cellpadding="5" cellspacing="0" class="mainpage">
<tr>
<td>
Your Site
</td>
</tr>
</table>

and in the CSS file:

table.mainpage
{
margin: 20px 5px 20px 5px;
background-color: #000000;
text-align: center;
}

table.mainpage td
{
background-color: #FFFFFF;
text-align: center;
vertical-align: top;
margin: 5px;
}

Adjust measurements accordingly. Nice website and amazing use of JavaScript

Thanks very much. The TD tag idea didn't work but the other one seems to, I just have to wait until Absolut is back on line so I can test it on different computers (with different screen resolutions). Is there a way to increse the width of the border to about 10 pixels? + I've sent annother 50 credits for helping .

 

[mattura]

Just have a fixed width div!

<center>
<div style="width:800px;">
your site
</div>
</center>

 

[Twinkie]

Thank you very much for the credits You can increase the border by including this in your TABLE tag:

border="10"

or if you are trying to increase the space between the table and the page then increase cellspacing to 10.

 

[bigjoe4]

Thanks everyone I have finally made it work! The page is here if you want to see http://www.idesigncircuit4u.exofire.net/. Although it's not quite finnished yet I want to change the title image and get a proper domain.