Back To Website Design Forum

how to center the html on screen

  • mvotre
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 20, 2004
  • Posts: 21
  • Status: Offline

Post March 2nd, 2004, 7:37 am

im building a site for 800X600 viewers. im using 780X430, cos i dont wanna users have to scroll to see the content. in go live i center the stuff to the center, but it only gets the horizontal center. hwen i see it on my monitor resolution (1280X1024), it seens annoying. can i center the page in horizontal and vertical axis??
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 2nd, 2004, 7:37 am

  • the_Maven
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Feb 02, 2004
  • Posts: 196
  • Status: Offline

Post March 2nd, 2004, 8:02 am

Hey,
try using CSS ...

<body style="text-align: center; vertical-align: center">
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post March 2nd, 2004, 8:24 am

If you're using tables you can do this

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>YOUR DOCUMENT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table height="100%" width="100%">
<tr>
 <td align="center">Your Content</td>
</tr>
</table>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>YOUR DOCUMENT</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. </head>
  8. <body>
  9. <table height="100%" width="100%">
  10. <tr>
  11.  <td align="center">Your Content</td>
  12. </tr>
  13. </table>
  14. </body>
  15. </html>


This won't work in Opera, however.
- dM
  • mvotre
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 20, 2004
  • Posts: 21
  • Status: Offline

Post March 2nd, 2004, 9:56 am

this is the crap code of the golive. im using a layout grid, wich i can convert to tables (i think!!) will try all of that. thanks!!
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="generator" content="Adobe GoLive">
        <title>Untitled Page</title>
    </head>

    <body bgcolor="#ffffff" leftmargin="0" marginheight="2" marginwidth="0" topmargin="2">
        <table width="780" border="0" cellspacing="0" cellpadding="0" align="center" background="imagens/pattern.gif" cool gridx="16" gridy="16" height="430" showgridx showgridy>
            <tr height="429">
                <td width="779" height="429"></td>
                <td width="1" height="429"><spacer type="block" width="1" height="429"></td>
            </tr>
            <tr height="1" cntrlrow>
                <td width="779" height="1"><spacer type="block" width="779" height="1"></td>
                <td width="1" height="1"></td>
            </tr>
        </table>
        <p></p>
    </body>

</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  5.     <head>
  6.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  7.         <meta name="generator" content="Adobe GoLive">
  8.         <title>Untitled Page</title>
  9.     </head>
  11.     <body bgcolor="#ffffff" leftmargin="0" marginheight="2" marginwidth="0" topmargin="2">
  12.         <table width="780" border="0" cellspacing="0" cellpadding="0" align="center" background="imagens/pattern.gif" cool gridx="16" gridy="16" height="430" showgridx showgridy>
  13.             <tr height="429">
  14.                 <td width="779" height="429"></td>
  15.                 <td width="1" height="429"><spacer type="block" width="1" height="429"></td>
  16.             </tr>
  17.             <tr height="1" cntrlrow>
  18.                 <td width="779" height="1"><spacer type="block" width="779" height="1"></td>
  19.                 <td width="1" height="1"></td>
  20.             </tr>
  21.         </table>
  22.         <p></p>
  23.     </body>
  25. </html>
  • Axe
  • Genius
  • Genius
  • User avatar
  • Joined: Jan 07, 2004
  • Posts: 5744
  • Loc: Sub-level 28
  • Status: Offline

Post March 2nd, 2004, 11:13 am

Could we all learn to use [code] tags please :)
  • mvotre
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 20, 2004
  • Posts: 21
  • Status: Offline

Post March 2nd, 2004, 11:20 am

ooopss!!!!!! :oops: :oops: :oops: :oops: :oops: :oops: :oops:
sorry dude!!
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post March 2nd, 2004, 4:38 pm

If you are centering non-text items on your page, please be friendly to us non IE users and add:

Code: [ Select ]
style="margin-left: auto; margin-right: auto; text-align: center;"


adding that property to any tag will center it and the contents inside of it if it is something other then a heading or span. The "margin-left.....-right: auto;" is needed to center objects like tables in non IE browsers. While nesting a table inside of another and "text-align: center;" ing the first one will give you the centering results you are looking for with the inner table, the table will NOT be centered in mozilla, etc.
Pixel Acres V2

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 143 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.