Page 1 of 1

web page center alignment problem

PostPosted: Tue Aug 10, 2010 7:54 pm
by phar_fahad
Hlw friend,
I am a newbie at web-design. I can't set my web page alignment 'center' at different size screen. Would you please help me by giving some instructions?

Re: web page center alignment problem

PostPosted: Wed Aug 11, 2010 11:01 am
by phar_fahad
pls pls help anyone by checking my page.

Re: web page center alignment problem

PostPosted: Sun Aug 22, 2010 9:14 pm
by Capricorn
I don't understand your problem.

If the screen width is the same as the width of your design, you might not the see the center-effect.

For me it's perfectly centered.

Re: web page center alignment problem

PostPosted: Mon Aug 23, 2010 10:43 am
by phar_fahad
Thanks Capricorn for your review. Already I have fixed up this problem. Now it is ok.

Re: web page center alignment problem

PostPosted: Tue Oct 19, 2010 10:44 pm
by mapleleaf
phar_fahad wrote:Thanks Capricorn for your review. Already I have fixed up this problem. Now it is ok.


This is an old posting but I think worthwhile replying.

There are several ways to center your web page, it all depends upon your design concept.

here is some basic code that will center your web page
Code: Select all
body {
    margin:50px 0px; padding:0px;
    text-align:center;
    }
   
#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }


Let's look at this for a moment:
1. a top and bottom margin is declared for the body and all text is centered
2. the content is centered on the web page by virtue of margin:0 auto; having a width of 500px
(your web page in which the distance from body's margin-left and margin-right is equal)

However, IF you are really adventurous have a look at a fluid design of your web page/site so that the web page(s) will always be centered irrespective of the screen resolution that you use to develop and the screen resolutions of the visitors to your web site.

To fully understand the term 'fluidity' or Progressive Layout in web design check out this URI http://webdesign.html.it/articoli/leggi ... ve-layout/ .
This link is well worth your while to check out even if only for information.

Just remember to two most common screen resolutions today are 1st 1280x1024 and 2nd 1024x768, although by virtue of the increasing number of laptop users you will also find visitor's having a screen resolution(most commonly 1152x854), larger laptops will of course have a greater resolution.

mapleleaf
http://www.mirana.net