XHTML & middle aligning web page

madhukp · November 28th, 2005, 02:29 AM

I have a website whose content portion is built with tables and is limited to 800 X 600 pixels in width & height. The Doc type used should be XHTML.

I want this page to come at the middle of screen (both horizontally and vertically) in higher resolution. Eventhough I can bring this horizontally at the centre of the screen, I am not able to do it vertically. It is always coming at the top. I can give a fixed margin, but this won't solve the problem. Since I am using XHTML doc type, I cannot specify height and VALIGN attributes.

May anybody tell me a solution ?

thanks

Madhu

meow · November 28th, 2005, 02:47 AM

For TD you can use 'height' in (X)HTML Transitional. For TABLE you can never use 'height' if you want to validate to any doctype. 'valign' isn't deprecated, I think.

Using CSS you can always set a height for anything. But you'll find that browsers won't vertically center your table when they are in Standards (rendering) Mode. I'm assuming you use the old table-in-table trick here, right? That's because they don't automatically translate height="100%" to "fill the whole veiw-port".

You might find the solution here:
http://www.quirksmode.org/css/100percheight.html

--
http://yupapa.com

richard.york · November 28th, 2005, 08:48 PM

A table-less solution also exists, and is pretty easy to implement. The following uses layering to vertically center an element.

The document would look something like this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <meta http-equiv='content-language' content='en-us' />
        <title></title>
        <style type='text/css'>
             html, body {
                 width: 100%;
                 height: 100%;
                 padding: 0;
                 margin: 0;
             }
             div {
                 background: yellow;
                 width: 500px;
                 height: 500px;
                 border: 1px solid orange;
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 margin: -250px 0 0 -250px;
             }
        </style>
    </head>
    <body>
         <div></div>
    </body>
</html>

The ingredients are simple. Position the layer absolutely, offset by 50% from the top and left, then set the top and left margin to a negative value equal to half of the element's width and height.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

madhukp · December 2nd, 2005, 02:13 AM

Thank you Rich and Meow. This technique worked well.

Madhu