Forum Moderators: open

Message Too Old, No Replies

Centering a entire site

in all resolutions

         

Bowdii

4:55 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



okay, i design for a 800 X 600 webpage. But when I view the page in 1000 X 800 it is left aligned and a big white space on the right.

How can I align it so that no matter what resolution the site is being viewed in, it will be center?

Thanks for your help/comments!

skipfactor

4:57 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are many ways, but putting everything in a one-row, one-column, centered table will do it easily.

dmorison

4:59 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Do a view¦source on www.yahoo.com.

Bowdii

6:30 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Sorry, I should of said, that the site I am doing is done in layers.

hartlandcat

6:33 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



1000x800? Do you mean 1024x768? Very few OSs give the option of 1000x800.

Bowdii

6:34 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



On yahoo,

I found
<body name=bod topmargin=7 marginheight=7>
<center>

Is that what is centering yahoo? I tried adding this center tag, but no luck....

Bowdii

6:35 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



"hartlandcat 6:33 pm on Aug. 11, 2003 (utc 0)
1000x800? Do you mean 1024x768? Very few OSs give the option of 1000x800."

Sorry, yes 1024 X 768

tedster

7:20 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Because the <center> tag is deprecated, you may want to use a different method -- here's a nifty approach to centering a page with CSS.

Let's say your entire page is within a div with the ID of "main" and you want it to be 720px wide. Then this set of CSS rules will center the page:

#main {
width:720px;
position:absolute;
left:50%
top:0;
margin-left:-360px;
}

See what's happening here? Instead of pixels, the absolute positioning uses percent - 50% for this case. Then the margin-left is NEGATIVE, and exactly half of the div's width (350px is half of 720px.) This makes the div fall half on one side of the 50% mark and half on the other side.

Bowdii

7:59 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



hmm...i put that in. Now, the right side of the page is on the left side. ?

Bowdii

8:59 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



tedster - I really like your idea!

and this should diffenetly be working but it is not.

I cut all my layers, made a new one and pasted them in to it. Then applied the css to it. Seems easy enough. But all that appears is the the rightside on the leftside of my screen. Does that make sense? Its left justifing itself that much more...

Bowdii

3:07 pm on Aug 12, 2003 (gmt 0)

10+ Year Member



okay, you got to hate when u make stupid mistakes! lol

If you look at your code snipit, you fogot the ;
And when I copied and pasted, I didn't even think about looking over it. :(
My mistake..

Thanks alot tedster! I'm going to use that css entry on every site I do! ;)

ukgimp

3:12 pm on Aug 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



tedster

Could that be dangerous as it is close to the negative DIV which could be rammed full of words?