Centering Content


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 5 of 5

Thread: Centering Content

  1. #1
    Join Date
    Mar 2004
    Posts
    72

    Centering Content

    I am trying to center a table in the browser window so that it is in the middle of the screen. Why doesn't this work??

    <Table width="100%" height="100%">
    <tr><td align="center" valign="middle">
    <Table><tr><td><img src="..." ... /></td></tr></Table>
    </tr></td>
    </Table>

    I also bagged the table idea and stuck my content inside a div. I tried to reset the position of the layer with the following javascript:

    <Script>
    var tp, lf;
    tp = ((screen.availHeight - 420)/2) + "px";
    lf = ((screen.availWidth - 760)/2) + "px";

    MainContent.style.top = tp;
    MainContent.style.left = lf;
    </Script>

    <div id="MainContent"><img src="..." .../></div>

    That didn't work either. I got the values for tp and lf to show using an alert and they worked. The alert would not show me a value for MainContent.style.top.

    WHAT IS THE BEST WAY TO CENTER CONTENT IN ANY SCREEN SIZE???? What is going wrong with these solutions. I beleive I got the table height="100%" to work for me before, but it won't now.

    Thanks,

    Alex

  2. #2
    Join Date
    Dec 2004
    Posts
    717

    Thumbs up

    It's correct.

    Code:
    <Table width="100%" height="100%">
    <tr><td align="center" valign="middle">
    <Table><tr><td><img src="..." ... /></td></tr></Table>
    </tr></td>
    </Table>
    You can write like that
    [ divHeight and divWidth ] These 2 variable are the height and width of your DIV.
    I think you can adjust the position.

    Code:
    <div id="MainContent" style="POSITION: absolute;">
      <img src="_40094290_nin_dsopen203b.jpg" width="203" height="152"></div>
      <Script language="javaScript">
    	var tp, lf;
    	//tp = ((screen.availHeight )/2) + "px";
    	//lf = ((screen.availWidth)/2) + "px";
    
    	var mc=document.getElementById('MainContent');
    	
    	var divHeight=152;
    	var divWidth=203;
    	
        tp = (screen.height/2) - divHeight;
    	lf = (screen.width/2)- divWidth;
    
    	mc.style.top = tp;
    	mc.style.left = lf;
    </Script>
    Last edited by Sync; 02-04-2005 at 05:55 AM.
    Best Regards,
    Michael Sync
    http://michaelsync.net

    The more you share,The more you get

  3. #3
    Join Date
    Feb 2005
    Posts
    6
    100% heght on table don't work on many browsers. But if you are using IE then solution can be correctly defined doc type in the first line of your page. It is IE's strange behavior. Try put this there if you are using DHTML 4.01
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Frantisek Cech
    http://netpublisher.fragmentsolutions.com
    Affordable CMS solution

  4. #4
    Join Date
    Mar 2004
    Posts
    72
    I have that line of code in my document and I am using IE 6. Still doesn't work.

  5. #5
    Join Date
    Jun 2004
    Location
    Pakistan
    Posts
    292
    This should work:
    <Table width="100%" height="100%">
    <tr>
    <td align="center" valign="middle" width="100%">
    <img src="..." ... />
    </td>
    </tr>
    </table>


    Note the width=100% in the TD as well.. Also your TR was closed before your TD.
    new to programming but getting ther

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center