Site in the middle

**Ronny** · 03-31-2006, 09:31 AM

Hello.
I have made a site within a tableset of 760px x 400px.
I would like to place this site in the middle of the screen. I have no problem making it align center but the only way I can make it align middle is using additional cells with values in percent or setting top margin value. But if I do that and change my screen resolution to 800x600 I get a scrollbar because of the empty space on top. I want the spaces on top and bottom to dissapear according to browsersize and screenresolution. With frames I would use relative values but what to do in a table?

Any sugestions?

**thriva** · 03-31-2006, 02:45 PM

There used to be a good article at wpdfd.com but I just had a look and it doesn't seem to be there anymore. the example remains though:
http:www.wpdfd.com/editorial/thebox/deadcentre4.html
I also found this when I did a "dead centre" search:
http:www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
hope this helps.

**jyoz22** · 03-31-2006, 03:49 PM

put it in another table that's properties are

<table width="100%" height="100%" align="center"><tr><td valign="middle">
(insert the table you have already made here)
</td></tr></table>

**Ronny** · 06:45 PM

Thanks for your reply. Tryed but it aligned top.
Found this one and it worked for me:

<style type="text/css">
body {margin: 0px; marginheight: 0px; marginwidth: 0px; scroll: no;
text-align: center;height: 100%;}
table {width: 100%; height: 100%;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Whatever content you want goes in here.
</td>
</tr>
</table>
</body>

**Ronny** · 04-03-2006, 05:31 PM

Need help after all.
The sollution I had worked only in IE. Tryed it in Netscape, Mozilla and Opera and none of them centered my site. Not even horizontally. Ended up top left.
Any other suggestions anyone?

**vangogh** · 04-03-2006, 09:23 PM

Try wrapping a div around everything you have inside the <body> of the page. I usually give it an id of page and then use the following css:

div#page {width:760px margin:0 auto}

You'll also need to have a proper doctype at the start of your page. That should work and will center the page in all browsers. The doctype needs to be there for IE, but it's good to use anyway.

**Ronny** · 04-04-2006, 05:33 AM

Thanks for your reply.

I use an html editor so I´m really not that good with html

At the top of my document you´ll find this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Wether or not it´s proper I wouldn´t know

Allso I would like to try to wrap a div around the body content.
Could you give me an example of the code please? And is this to replace what I tryed before?
It´s ok to sigh

**vangogh** · 04-04-2006, 07:15 PM

The doctype you have is proper so nothing to worry about there. As for the wrapper div try something like this

<body>
<div id="page">
all your code here
</div>
</body>

Then in the css in between the <style type="text/css"></style> tags you would add

div#page {width:760px; margin:0 auto}

**Ronny** · 04-05-2006, 07:24 AM

Thanks for your reply

It only centered my site horizontally. vertically it still aligned top. In IE as well.

**tammyhart** · 04-05-2006, 10:04 AM

I found this:

http://vmalek.murphy.cz/

**vangogh** · 04-05-2006, 04:27 PM

Sorry I missed that you wanted things centered vertically as well. I'm not really a big fan of vertically centering web pages though I can see where it can come in useful at times.

I'm not sure there's a perfect solution to vertically center a page, but there are certainly solutions.

**chrishirst** · 04-05-2006, 08:34 PM

I played with setting the top margin to a % for this http://www.candsdesign.co.uk/page-te...tre/layout.asp

to get the HTML and CSS click on the Show Code link
http://www.candsdesign.co.uk/page-te.../small-centre/

**Ronny** · 04-07-2006, 11:15 AM

Thanks for all the help so far

But I´m still having problems.
I tryed the other sollutions but I couldn´t make them work for me.
So far the following worked great in IE:

<style type="text/css">
body {margin: 0px; marginheight: 0px; marginwidth: 0px; scroll: no;
text-align: center;height: 100%;}
table {width: 100%; height: 100%;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
***MY TABLESET HERE***
</td>
</tr>
</table>
</body>

Is it possible to add or edit something to make this work in Netscape and Mozilla at least? My site is 760px x 446px. No streching.

**tammyhart** · 04-07-2006, 11:30 AM

Did you miss the link I posted? I got it to work for a set height here: www.tammyhartdesigns.com/test.html

It works for me in firefox and ie.

**Ronny** · 04-07-2006, 02:25 PM

Works in IE but get a scrollbar allthough there is "air" between site and top.
Id like it to be relative the way you can make it with frames.
Tryed in Mozilla and it aligned top.
Here´s my code.

<style type="text/css">

</style>
</head>
<body>
<div class="test">
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="760" colspan="2" align="left" valign="bottom"><object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="210">
<param name="movie" value="swf/menu.swf">
<param name=quality value=high>
<embed src="swf/menu.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="760" height="210"></embed>
</object></td>
</tr>
<tr>
<td width="733" height="197">
<iframe
src="html/hjem.htm"
width="733" height="197" frameborder="0"
name="main">
</iframe></td>
<td width="27"> </td>
</tr>
<tr>
<td height="39" colspan="2" background="imagefiles/bg_bottom.jpg"> </td>
</tr>
</table>
</div>
</body>

Hope you find something wrong

**tammyhart** · 04-07-2006, 05:17 PM

well, for starters, if you don't want a background color, you need to take "background-color:" out, because that'll mess your css up, you don't have a semicolon.

As far as the rest of it, I'm not sure. I was just playing with the code.

**Ronny** · 04-07-2006, 05:42 PM

Thank you. Removing bacground-color made the difference in Mozilla.
I would still like for the space between the site and top to dissappear entirely before the scrollbar appears (as it will in 800 x 600 resolution) but for now this is the best sollution since it works not just for IE.

Thanks a bunch!!!

**thriva** · 04-07-2006, 05:54 PM

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>centre table</title>

<style type="text/css" >
body
{
color: #fff;
background-color: #000;
margin: 0;
padding: 0;
}
#horizon
{
color: #000;
background-color: #000;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
background-color: #000;
margin-left: -380px;
position: absolute;
top: -200px;
left: 50%;
width: 760px;
height: 400px;
visibility: visible;
border: solid 1px #fff;
}

</style>

</head>
<body>
<div id="horizon">
<div id="content">
<div>
***TABLESET HERE***
</div>
</div>
</div>

</body>
</html>

Seems to work for me.
Get rid of the border in the content div, that's just to help you see the div.

**Ronny** · 04-07-2006, 06:57 PM

YEAH!!!
That´s the one

Thank you Thriva and everyone else that took the time to help me.
My goal is achieved and I´m alot smarter