web page center alignment problem

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

web page center alignment problem

Postby phar_fahad » Tue Aug 10, 2010 7:54 pm

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?
Last edited by phar_fahad on Mon Aug 23, 2010 10:44 am, edited 1 time in total.
phar_fahad
 
Posts: 3
Joined: Tue Aug 03, 2010 9:16 am

Re: web page center alignment problem

Postby phar_fahad » Wed Aug 11, 2010 11:01 am

pls pls help anyone by checking my page.
phar_fahad
 
Posts: 3
Joined: Tue Aug 03, 2010 9:16 am

Re: web page center alignment problem

Postby Capricorn » Sun Aug 22, 2010 9:14 pm

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.
User avatar
Capricorn
 
Posts: 63
Joined: Fri Aug 06, 2010 11:37 am
Location: Germany!

Re: web page center alignment problem

Postby phar_fahad » Mon Aug 23, 2010 10:43 am

Thanks Capricorn for your review. Already I have fixed up this problem. Now it is ok.
phar_fahad
 
Posts: 3
Joined: Tue Aug 03, 2010 9:16 am

Re: web page center alignment problem

Postby mapleleaf » Tue Oct 19, 2010 10:44 pm

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
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada


Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 10 guests