www.webdeveloper.com
Results 1 to 11 of 11

Thread: Centering help, vertically in transitional.

  1. #1
    Join Date
    Sep 2008
    Posts
    20

    Centering help, vertically in transitional.

    Hello everyone. I horizontally aligned the table in the center, but how do I vertically align it in the center in Transitional? Just want the table right dead in middle of the page. Thanks!

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <link rel="Shortcut Icon" href="something.ico"/>
    <title>something</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta name="keywords" content="something"/>
    <meta name="description" content="something"/>
    </head>
    <body link="black" vlink="black" alink="black">
    <table align="center" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td><a href="http://www.something.com"><img src="images/something.jpg" alt="" border="0" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/basicinfo.jpg" alt="" border="0" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.something.com"><img src="images/something.jpg" alt="" border="0" /></a></td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    I'm 95% certain your page is corrupted, unless the copy/paste feature on this forum isn't working. Try creating a brand new page with the same markup and see what happens, b/c it should work fine.
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Sep 2008
    Posts
    20
    I did what you asked, it's still the same. The table is centered, but on top. need it on middle of page. Any other suggestions?

  4. #4
    Join Date
    Aug 2009
    Posts
    31
    You can do it with JavaScript.

    Steps:
    * Get the height of the browser.
    * Divide it by 2(say x)
    * Get the tables height.
    * Divide the tables height by 2(say y)
    * Calculate x - y
    * Wrap the table in a div
    * Assign the value to the top property of the div


    If you want the table to adjust on change of screen height, put the function on resize event of window

    Ritesh S.
    http://website-engineering.blogspot.com/

  5. #5
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364
    Yes, JavaScript is the best answer. HTML doesn't know how high your browser window is.

    One caution: if you have too large of content (in your case, an image) so it won't fit in computers with small monitors (640x480 or 800x600), they will nto be able to scroll up and down the see the remainder of your content.

    The reason I say this is because I see sites do this all the time... especially for computers with large screens.

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    Another option is the put a table around all your current markup with height and width set to 100% and set the valign on the td that contains everything. This will vertically center everything.

  7. #7
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364
    put a table around all your current markup
    Admittedly, I tried this approach in the past. It's a great workaround that saves time, although it isn't proper practice.

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    Why would it not be proper practice? Using javascript could prevent your centering mechanism from working. There is no purely CSS alternative.

  9. #9
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364
    When I learned web development, professors would scold us if we used tables for formatting. They were uneasy about us using tables for data, even.

  10. #10
    Join Date
    Jan 2009
    Posts
    3,346
    Needlessly using tables can complicate a page for updates and such, however, when the only other alternative is to use a javascript hack the tables win out since they support more browser combinations than javascript. Additionally a transitional dtd does allow tables and for tabular data there is no better way to display the data.

  11. #11
    Join Date
    Aug 2009
    Posts
    3

    Table positioning resource

    Adle, here is a good link with info on table positioning. http://www.w3.org/TR/CSS2/tables.html

    Hope you find what you need.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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



Recent Articles