SillyDog701 • how to center my web page???

by **fluffhead** » Mon 11 Jul, 2005 6:55 pm

I have designed a site at www.thepowerofchoice.net (which we just launched, by the way, and you can win free DVDs there!).

Anyhow, I would really like it to be centered in the browser instead of always aligned to the left. (so that when you resize, the whole page moves to the center even though it maintains its fixed width)

This site manages to do it: http://www.4exhale.org/

How can I do it? I used Dreamweaver and CSS to build my site.

Thank you!!

UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/412 (KHTML, like Gecko) Safari/412

by **akbash** » Thu 14 Jul, 2005 11:35 am

Try encapsulating the entire contents of the page in a global <div>

Code: Select all: index.html: @@ -26,6 +26,7 @@  <body> +<div id="body"> <div id="masthead"> <table width="100%" border="0" cellspacing="3" cellpadding="3"> <tr> @@ -114,4 +115,5 @@ Women's Rights, rights, choice, Document </div> </body> +</div> </html>

Then moving the size and border style you've applied to the document's entire body, to that new div (and adding a centering style while you're in there

)

Code: Select all: 2col_leftNav.css: @@ -10,9 +10,11 @@ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; - margin: 20px 20px 0 20px; - padding: 0px; +} + +div#body { + margin: 0 auto; width: 770px; border: 2px solid #669999; }

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b3) Gecko/20050708 Firefox/1.0+

by **fluffhead** » Mon 22 Aug, 2005 11:28 pm

Thank you so much! Over a month later, I finally implemented it on a different site and it works like a charm! Now my question is...how can I get it to center vertically as well?

Any advice would be much appreciated...

UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/412.6.2 (KHTML, like Gecko) Safari/412.2.2

by **akbash** » Sun 28 Aug, 2005 5:16 pm

You're welcome. Without resorting to script, the only effective way I know of to center a block vertically in a window is spacers:

Code: Select all: <html><head> <style> #header { height: 15% } /* vertical centering for contents */ #contents { height: 70%; /* vertical centering */ border: 1px solid black; /* just to see what it's doing */ min-height: 100px; /* also potentially useful, though not to IE6 */ } </style> </head><body> <div id="header"></div> <div id="contents"> Stuff </div> </body></html>

I'm not really an expert in practical page layout, so you may be able to do better.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050818 Firefox/1.0+

by **fluffhead** » Mon 29 Aug, 2005 12:12 pm

Thank you again! I'll give this a shot. I really appreciate your help! :lol:

UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/412.6.2 (KHTML, like Gecko) Safari/412.2.2

by **kapsig431** » Wed 18 Jan, 2006 3:36 pm

Would either of you mind giving slightly simpler instructions on how to center a web page? Though I have been designing sites for a while, I have always used an html editor and haven't done very much coding. I am learning, but taking it slowly.

I put a test page up just to try out what you described, but can't seem to get it to work properly. Feel free to visit this test page to aid in source code description.

http://www.southernheritagehome.com/test_3.html

Thank you very much.

Patrick

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.1; .NET CLR 1.1.4322)

by **JasonRiddle** » Thu 31 May, 2007 9:03 pm

A much better way to do what you want is to simply insert <center> right after <body> and before <table>

Example:

</head>
<body bgcolor="#FFFFFF" leftmargin="20">
<center>
<table id="Table_01" width="766" height="755" border="0" cellpadding="0" cellspacing="0">

At the end of the table close it out with <center> again

Example:

</table>
<center>
 </center>

This will do what you want without any special magical coding.

Hope that helps..Jason

UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.1)

by **verong** » Wed 27 Jun, 2007 8:48 am

good day to all,

im desinging a web page using macromedia flash 8 and im having problem centering the page when i publish it to HTML, can nyone help me pls.

Thanks

Verong

UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/419.2.1 (KHTML, like Gecko) Safari/419.3

by **morcom** » Tue 11 Sep, 2007 9:13 am

Thanks Jason, I've just implemented your suggestion (Posted: 01 Jun, 2007 3:03 am) on a difficult index page and it works a treat.............Fred Morgan

UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

by **sisuus** » Wed 12 Sep, 2007 8:30 am

JasonRiddle wrote:A much better way to do what you want is to simply insert <center> right after <body> and before <table>

It's a good idea to validate your html code.

http://validator.w3.org/

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.1) Gecko/20061010 Firefox/2.0

by **morcom** » Wed 12 Sep, 2007 9:27 am

Thanks "sisuus" I have run the validator as you suggested and have got over 20 errors in my index file. This was a purchased flash web setup so it goes to show even when you buy the product it still may not be correct. The centering addition is highlighted as well but with the rest it seems quite minor.
I'll slowly work my way through it and fix what I can - I know it works but you were correct to highlight the validator

Thanks

UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506; InfoPath.2)

by **Kahyl** » Thu 18 Oct, 2007 9:31 am

I am looking to center my website, but am having trouble doing so. if someone could take a look at the html coding for me? its all viewable, and advise me on what i can do. thanks so much

www.modalight.com

UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506; .NET CLR 1.1.4322)

by **Don_HH2K** » Thu 18 Oct, 2007 2:56 pm

I had a look at your code, and it doesn't look like you'll be able to get away with a <center> tag or the code mentioned above. Specifically, you're using a good deal of absolute positioning in your CSS (it looks like it was generated by a drag-and-drop designer).

I'm not entirely sure what properties correspond to what (most of them are labeled either "Layern" or "apDivn" where n is a number), but what's for sure is that if you try centering the page, that you'd have to use relative positioning instead of absolute positioning.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.2 x64; en-US; rv:1.8.1.7) Gecko/20070925 BonEcho/2.0.0.7 (mmoy CE K8C-X04)

by **chuber** » Tue 30 Oct, 2007 10:15 pm

Will using the <center> tag also work in FP 2003 to center an entire page (ie index.htm)?

Thank you!

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

by **Don_HH2K** » Tue 30 Oct, 2007 10:32 pm

chuber wrote:Will using the <center> tag also work in FP 2003 to center an entire page (ie index.htm)?

Thank you!

I don't see any good reason why it wouldn't, provided you enclose the entire contents of the <body> tag in a <center>.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.8) Gecko/20071012 BonEcho/2.0.0.8 (ayakawa SSE2-PGU)

how to center my web page???

how to center my web page???

vertical centering too?

Thanks!

Centering a webpage

This is quite old for my reply.but here goes

web page centering

centering a page - Jasons answer works a treat

Validator

Will the <center> tag also work in Front Page 2003?

Re: Will the <center> tag also work in Front Page 2003

Who is online