Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    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>

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    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.

  4. #3
    Junior Member andrewreff's Avatar
    Join Date
    Sep 2010
    Location
    Indianapolis
    Posts
    20
    Member #
    23933
    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.

  5. #4
    Junior Member
    Join Date
    Aug 2010
    Posts
    5
    Member #
    23168
    Could you not define "left: 50%; margin-left: -750px;" so that it will always be central regardless of resolution?

  6. #5
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    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.

  7. #6
    Junior Member
    Join Date
    Oct 2010
    Posts
    26
    Member #
    24200
    Liked
    1 times
    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.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:15 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com