how to center the html on screen

  • mvotre
  • Novice
  • Novice
  • mvotre
  • Posts: 21

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • the_Maven
  • Graduate
  • Graduate
  • the_Maven
  • Posts: 196

Post 3+ Months Ago

Hey,
try using CSS ...

<body style="text-align: center; vertical-align: center">
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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>
  7. <body>
  8. <table height="100%" width="100%">
  9. <tr>
  10.  <td align="center">Your Content</td>
  11. </tr>
  12. </table>
  13. </body>
  14. </html>


This won't work in Opera, however.
  • mvotre
  • Novice
  • Novice
  • mvotre
  • Posts: 21

Post 3+ Months Ago

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">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  5.         <meta name="generator" content="Adobe GoLive">
  6.         <title>Untitled Page</title>
  7.     </head>
  8.     <body bgcolor="#ffffff" leftmargin="0" marginheight="2" marginwidth="0" topmargin="2">
  9.         <table width="780" border="0" cellspacing="0" cellpadding="0" align="center" background="imagens/pattern.gif" cool gridx="16" gridy="16" height="430" showgridx showgridy>
  10.             <tr height="429">
  11.                 <td width="779" height="429"></td>
  12.                 <td width="1" height="429"><spacer type="block" width="1" height="429"></td>
  13.             </tr>
  14.             <tr height="1" cntrlrow>
  15.                 <td width="779" height="1"><spacer type="block" width="779" height="1"></td>
  16.                 <td width="1" height="1"></td>
  17.             </tr>
  18.         </table>
  19.         <p></p>
  20.     </body>
  21. </html>
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

Could we all learn to use [code] tags please :)
  • mvotre
  • Novice
  • Novice
  • mvotre
  • Posts: 21

Post 3+ Months Ago

ooopss!!!!!! :oops: :oops: :oops: :oops: :oops: :oops: :oops:
sorry dude!!
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 42 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.