How do I center the body of my website?

**reflex84** · Sep 22nd, 2010, 04:19 PM

Hi,

I'm struggling to find out how to center the body of my website WHEN I make the table too wide for my screen resolution.
I want my website's body or main table to center like my page's large background image.

So if my table (which is 1500px wide) overflows a small screen (eg: 1024 x 768px resolution) .. then I want the middle of my table to be in the middle of the screen and not have my table starting flush up on the left of the screen.

Hope I am explaining correctly?

Like this is the code to center a background image:

Code:

background-position: top center;

Now with that code, you can make your browser window smaller and the center of the background image will still stay in the center of the browser!
Now I want to do that to my websites table which I mentioned is 1500px wide .. how do I do this? Is there some OVERFLOW css attribute I need to add?

I really need to know asap as I have made promises to finish this website soon!

My webpage's "view source" is below:

Code:

<!--


body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(bk_page.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    overflow-x: hidden;
    background-color: #000000;
}
body,td,th {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 13px;
    color: #4D463C;
}
a img {border:none;}
-->
</style>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body   onload="MM_preloadImages('menu_home_on.gif','menu_location_on.gif','menu_homesduos_on.gif','menu_apartments_on.gif','menu_price_on.gif','menu_gallery_on.gif','menu_contact_on.gif')">
<table width="1500" border="0" align="center" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->

  <tr>
    <td width="1500" height="100" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="37" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="325" height="37" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td  width="74" valign="top"><a href="#"  onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Image1','','menu_home_on.gif',1)"><img  src="menu_home.gif" name="Image1" width="74" height="37" border="0"  id="Image1" /></a></td>

      <td width="102"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Image2','','menu_location_on.gif',1)"><img  src="menu_location.gif" name="Image2" width="102" height="37"  border="0" id="Image2" /></a></td>
      <td  width="144" valign="top"><a href="#"  onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Image3','','menu_homesduos_on.gif',1)"><img  src="menu_homesduos.gif" name="Image3" width="144" height="37"  border="0" id="Image3" /></a></td>
      <td  width="127" valign="top"><a href="#"  onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Image4','','menu_apartments_on.gif',1)"><img  src="menu_apartments.gif" name="Image4" width="127" height="37"  border="0" id="Image4" /></a></td>
      <td  width="211" valign="top"><a href="#"  onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Image5','','menu_price_on.gif',1)"><img  src="menu_price.gif" name="Image5" width="211" height="37" border="0"  id="Image5" /></a></td>
      <td width="97"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Image6','','menu_gallery_on.gif',1)"><img  src="menu_gallery.gif" name="Image6" width="97" height="37" border="0"  id="Image6" /></a></td>
      <td width="95"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()"  onmouseover="MM_swapImage('Image7','','menu_contact_on.gif',1)"><img  src="menu_contact.gif" name="Image7" width="95" height="37" border="0"  id="Image7" /></a></td>
      <td width="325" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
    </table>    </td>

  </tr>
  <tr>
    <td height="455" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="389">&nbsp;</td>
  </tr>
</table>
</body>
</html>

**Web Design Forums** · Sep 22nd, 2010 04:19 PM

**aeroweb99** · Sep 27th, 2010, 08:24 PM

I could be wrong but I don't think it can be done unless there is some sort of javascript or something. The browser will automatically put the page to the left of the screen if there is horizontal overflow. Why are you making the table so wide anyway? The most popular screen res is 1024 anyway.

**andrewreff** · Sep 30th, 2010, 08:05 AM

In your css you can set an attribute for your main table to have a margin of auto;

margin: auto;

However you still may it shown flush left in a browser, if it is that big. One side suggestion, if I may, would strip your css and javascript references off this page and put them into their own css and js files, if you haven't done so already.

**Spinbox** · Oct 05th, 2010, 05:30 AM

Could you not define "left: 50%; margin-left: -750px;" so that it will always be central regardless of resolution?

**alligatortek** · Oct 05th, 2010, 08:50 AM

Spinbox is right. Apply those styles to the table. HOWEVER, if the screen res is less than 1500px (which will more than likely be the case) users will not be able to see the left-hand side of the table. They won't even be able to scroll to see it.

Sorry to say it, as you should apparently be launching, but your layout should not be greater than about 980px wide unless you are programming it to be a fluid layout that expands to the user's resolution.

**OrangeDevDesign** · Oct 13th, 2010, 04:30 PM

My best tip is to make a container div wich will contain your whole website.

put this in it:

Code:

#container{
margin:0 auto;
width:1500px;
}

This will center your whole website.

In html you will do like this:

HTML Code:

<body>
<div id="container">
<table>
YOUR CONTENT HERE
</table>
</div>
</body>

PS*
1500px is WAY to big, use 980 instead.

Thread: How do I center the body of my website?

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Thread: How do I center the body of my website?

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Sections

General Info