Centering page

  • w03s
  • Newbie
  • Newbie
  • w03s
  • Posts: 9

Post 3+ Months Ago

Hello pplz....

i've got a problem with centering my page...... f.e. when someone with a res higher then 1024x768 tries to view mah page it's in the topleft corner.... now someone adviced me to put all tags in: <center><table></table></center>

well it helps...... horizontally it does.......
but vertically is doesn't.... also my lay-out becomes a mess...

anyone please help...???

working on this for more than a week now....

url is: http://www.nikepaul.nl/index2.htm

thnxxxxx!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Cae
  • Expert
  • Expert
  • User avatar
  • Posts: 734

Post 3+ Months Ago

put yourentire body in a table...
Code: [ Select ]
<body>
<table width = "100%" height = "100%">
<tr>
<td width = "100%" height = "100%" align = "center" valign = "center">
<!-- this cell will span your entire page, and everything in it will he horozontally and vertically centere, but everything you had inside your body tag inside this -->
</td></tr></table></body>
  1. <body>
  2. <table width = "100%" height = "100%">
  3. <tr>
  4. <td width = "100%" height = "100%" align = "center" valign = "center">
  5. <!-- this cell will span your entire page, and everything in it will he horozontally and vertically centere, but everything you had inside your body tag inside this -->
  6. </td></tr></table></body>
  • Mr Smith
  • Graduate
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

in the body tag, put

Code: [ Select ]
<body topmargin="0" rightmargin="0" leftmargin="0">


you can use percentage widths....problem is with those is that if someone looks at your site in a small (say 500px) window, all your table elements will be squashed to fit the page....

i personally set the widths fixed to about 750px. this should center everything.....

btw.....the
Code: [ Select ]
<center>
tag is deprecated.....

Joe
  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1616

Post 3+ Months Ago

Like MrSmith said...

Quote:
Code: [ Select ]
<center>
tag is deprecated.....

but to replicate the effect of <center> add the following to your page...

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
html{background:silver;}
body{
    width:750px;
    height:500px;
    background:white;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
 <p>X</p>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html>
  4. <head>
  5. <style type="text/css">
  6. html{background:silver;}
  7. body{
  8.     width:750px;
  9.     height:500px;
  10.     background:white;
  11.     margin-left:auto;
  12.     margin-right:auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17.  <p>X</p>
  18. </body>
  19. </html>


..Doesn't align vertically but I'll see what I can come up with.
  • mhammadd
  • Beginner
  • Beginner
  • mhammadd
  • Posts: 52

Post 3+ Months Ago

Code: [ Select ]
<body ONLOAD="preloadImages(); " bgcolor="#FFFFFF"text="#000000"tracingsrc="images/logo.jpg"tracingopacity=31 topmargin=0 leftmargin=0 link="#FFFFFF"vlink="#FFFFFF"alink="#FFFFFF">


I took the above out of your HTML code... If you take a close look you will notice that you have TOPMARGIN=0 which sets the page to the top and you have LEFTMARGIN=0 this brings the page to the left, so when someone views it on a higher resolution, he automatically get a page that is at the top left..

Now just go to the code and delete both TOPMARGIN=0 and LEFTMARGIN=0 and then follow the steps below where i added the right code in your stylesheet that will give you the effect you want.

Now below is your stylesheet which is also totally wrong...

Code: [ Select ]

BODY {

    color: #000000;
}


A {
    text-decoration: none;
    color: #003366;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana;
}

A:Hover {
    text-decoration: none;
    color: #336699;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana;
}

BODY {
    SCROLLBAR-FACE-COLOR: #003366; SCROLLBAR-HIGHLIGHT-COLOR: #999999; SCROLLBAR-SHADOW-COLOR: #336699; SCROLLBAR-3DLIGHT-COLOR: #336699; SCROLLBAR-ARROW-COLOR: #336699; SCROLLBAR-TRACK-COLOR: #003366; SCROLLBAR-DARKSHADOW-COLOR: #003366; BACKGROUND-COLOR: #003366
}

.woes:Hover {
    text-decoration: none;    
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana;
}
  1. BODY {
  2.     color: #000000;
  3. }
  4. A {
  5.     text-decoration: none;
  6.     color: #003366;
  7.     font-weight: bold;
  8.     font-size: 11px;
  9.     font-family: Verdana;
  10. }
  11. A:Hover {
  12.     text-decoration: none;
  13.     color: #336699;
  14.     font-weight: bold;
  15.     font-size: 11px;
  16.     font-family: Verdana;
  17. }
  18. BODY {
  19.     SCROLLBAR-FACE-COLOR: #003366; SCROLLBAR-HIGHLIGHT-COLOR: #999999; SCROLLBAR-SHADOW-COLOR: #336699; SCROLLBAR-3DLIGHT-COLOR: #336699; SCROLLBAR-ARROW-COLOR: #336699; SCROLLBAR-TRACK-COLOR: #003366; SCROLLBAR-DARKSHADOW-COLOR: #003366; BACKGROUND-COLOR: #003366
  20. }
  21. .woes:Hover {
  22.     text-decoration: none;    
  23.     color: #FFFFFF;
  24.     font-weight: bold;
  25.     font-size: 11px;
  26.     font-family: Verdana;
  27. }


Not that you are using BODY twice... that gives you a conflict on you webpage..
Below is a new stylesheet. Just copy and paste it replacing your style sheet and you will surely get a better page.

Code: [ Select ]
body {
    SCROLLBAR-FACE-COLOR: #003366;
    SCROLLBAR-HIGHLIGHT-COLOR: #999999;
    SCROLLBAR-SHADOW-COLOR: #336699;
    SCROLLBAR-3DLIGHT-COLOR: #336699;
    SCROLLBAR-ARROW-COLOR: #336699;
    SCROLLBAR-TRACK-COLOR: #003366;
    SCROLLBAR-DARKSHADOW-COLOR: #003366;
    BACKGROUND-COLOR: #003366
    color: #000000;
    margin: 0px auto 0px auto;
    vertical-align:middle;
}


a {
    text-decoration: none;
    color: #003366;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana;
}

a:hover {
    text-decoration: none;
    color: #336699;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana;
}


.woes a:hover {
    text-decoration: none;    
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana;
}
  1. body {
  2.     SCROLLBAR-FACE-COLOR: #003366;
  3.     SCROLLBAR-HIGHLIGHT-COLOR: #999999;
  4.     SCROLLBAR-SHADOW-COLOR: #336699;
  5.     SCROLLBAR-3DLIGHT-COLOR: #336699;
  6.     SCROLLBAR-ARROW-COLOR: #336699;
  7.     SCROLLBAR-TRACK-COLOR: #003366;
  8.     SCROLLBAR-DARKSHADOW-COLOR: #003366;
  9.     BACKGROUND-COLOR: #003366
  10.     color: #000000;
  11.     margin: 0px auto 0px auto;
  12.     vertical-align:middle;
  13. }
  14. a {
  15.     text-decoration: none;
  16.     color: #003366;
  17.     font-weight: bold;
  18.     font-size: 11px;
  19.     font-family: Verdana;
  20. }
  21. a:hover {
  22.     text-decoration: none;
  23.     color: #336699;
  24.     font-weight: bold;
  25.     font-size: 11px;
  26.     font-family: Verdana;
  27. }
  28. .woes a:hover {
  29.     text-decoration: none;    
  30.     color: #FFFFFF;
  31.     font-weight: bold;
  32.     font-size: 11px;
  33.     font-family: Verdana;
  34. }


What i want you to notice here is that i combined both (BODY)ies and added MARGING: 0px auto 0px auto and also VERTICAL-ALIGN:MIDDLE
This will center your entire site both horizontally and vertically for IE in all resolutions.

If you want your page to be centered in other browser like OPERA, NETSCAPE, FIREFOX and more, then you will have to add this code to your stylesheet:

Code: [ Select ]
table.center {
margin:0px auto 0px auto;
}
  1. table.center {
  2. margin:0px auto 0px auto;
  3. }


and then go to your html code selecting the table that hold the entire page and add CLASS="CENTER".

Example:

Code: [ Select ]
<table width=1007 height="100%"border=0 cellpadding=0 cellspacing=0 bgcolor="#336699" class="center">



Hope this will help... by the way, i also live in Holland... and offer free templates and design..
  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1616

Post 3+ Months Ago

rosanda wrote:
and then go to your html code selecting the table that hold the entire page and add CLASS="CENTER".


I don't think using tables for layout will be supported in future versions of browsers though.
  • w03s
  • Newbie
  • Newbie
  • w03s
  • Posts: 9

Post 3+ Months Ago

Still doesn't work....... I've put my page in a table with class="center"... as you can see at: http://www.nikepaul.nl/index2.htm

replaced the stylesheet...

deleted the top and left margin from the body tag......

now it doesn't center horizontally either..???!!

really don't get this..... :cry:
  • isthistakenyet?
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Burnley U.K.

Post 3+ Months Ago

Put all your content inside a div with an id, for example:

Code: [ Select ]
<div id="example">
<--- all content goes here --->
</div>
  1. <div id="example">
  2. <--- all content goes here --->
  3. </div>


Then add this to your style sheet (without my comments)
Code: [ Select ]
#example{
         position: absolute; <--- absoloutely position the div
         left: 50%; <---- set the left value at 50%
         top: 50%; <--- set the top value at 50%
         height: 400px; <--- set the height of your content
         width: 200px; <--- set the width of your content
         margin-left: -100px; <--- half the width and make it negative
         margin-top: -200px; <--- half the height and make it negative
         }
  1. #example{
  2.          position: absolute; <--- absoloutely position the div
  3.          left: 50%; <---- set the left value at 50%
  4.          top: 50%; <--- set the top value at 50%
  5.          height: 400px; <--- set the height of your content
  6.          width: 200px; <--- set the width of your content
  7.          margin-left: -100px; <--- half the width and make it negative
  8.          margin-top: -200px; <--- half the height and make it negative
  9.          }


AND it validates as xhtml 1.1 strict (i think)
  • Cae
  • Expert
  • Expert
  • User avatar
  • Posts: 734

Post 3+ Months Ago

did you try my way?
  • w03s
  • Newbie
  • Newbie
  • w03s
  • Posts: 9

Post 3+ Months Ago

Yeah.. i tried calendae.....

it centers horizontally...... not vertically.....
  • w03s
  • Newbie
  • Newbie
  • w03s
  • Posts: 9

Post 3+ Months Ago

I've put my tags in the <div id="example"></div>
and added to my stylesheet......

now it gets centered both horizontally and vertically finally!!!! THANKS!!

only problem now is as you can see @: http://www.nikepaul.nl/index2.htm
If i view at f.e. 1280x1024 when the browser height = 768 or smaller its ok.. when it becomes bigger (in height); the right part of the page (with the blocks and the cube) becomes screwed........

made a mistake in my page somewhere????
  • Cae
  • Expert
  • Expert
  • User avatar
  • Posts: 734

Post 3+ Months Ago

are you using standards? b/c if you are using any standars it will not work...
  • Hazard
  • Graduate
  • Graduate
  • User avatar
  • Posts: 145
  • Loc: London, UK

Post 3+ Months Ago

my site used to be good, but i had to make diff. sections for 4 diff. resolutions....i survived for 3 weeks, then i deleted the piece of crap.

1 month l8r, i came up with what i came up with http://www.hazard-dimension.tk
  • w03s
  • Newbie
  • Newbie
  • w03s
  • Posts: 9

Post 3+ Months Ago

What do u mean by standards b/c calendae????

Post Information

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

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