Best way to have a centered web page

[moodeyit]

hi, what is the best practice to have a centered webpage?

1) use a centered div using margin: 0 auto; and then embedding one large background image and trial and error with alignment until in fits behind centered div.

or

2) use 3 divs and cut the background image into 2 and place in a left and a right div with the centered div between them?

thanks

 

[chrishirst]

1) really but why "trial and error for a background image??


is there something wrong with using background-position: center top;|center;|bottom; ?

Or applying the background to the centred container?

 

[chrishirst]

Just as an afterthought why are you promoting a "webdesign company" in your signature and asking such a basic question??

Because you are not doing them any favours by that!

 

[moodeyit]

There's a few different people here that sign in that are on different levels.

 

[PixelPusher]

There are basically two options:

1. Center an element with the background
2. Center the background through background-position

div.centerElm {
 width:960px;
 margin-left:auto;
 margin-right:auto;
 background-image:url(../images/myBg.png);
 background-repeat:no-repeat;
}

div.centerBg {
 background-image:url(../images/myBg.png);
 background-repeat:no-repeat;
 background-position:center center;
}

// The background properties can also be reduced to shorthand

.example {
background:url(../images/myBg.png) no-repeat center center;
}

Just as an afterthought why are you promoting a "webdesign company" in your signature and asking such a basic question??

Because you are not doing them any favours by that!

Lol, good point. However he may be a beginner at the company?

 

[chrishirst]

So shouldn't the "employers" be doing the basics?

Mind when you see the "Moody IT" webdesign company being sig link dropped at several other forums with an equally intelligent question attached, you have to wonder about the motives.
Because it can't do much to instill confidence in a potential client when one of their "employees" has to ask in a public forum what HTML means.

 

[dbihosting]

It really depends on the site design. I find the following works for me when the header, footer and body content area all have the same width;

HTML

<div class="header">
  <div class="holder">
     <!--- header content goes here --->
  </div>
</div>

<div class="bodycont">
  <div class="holder">
     <!--- body content content goes here --->
  </div>
</div>

<div class="footer">
  <div class="holder">
     <!--- footer content goes here --->
  </div>
</div>

CSS

div.holder {
   margin:0 auto;
   width:860px; /* this should be the width you want to center */}
	
div.header {
   background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
   background-image:url('../images/header-bg.gif');
   background-position:top left;
   background-repeat:repeat-x;}

div.bodycont {
   background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
   background-image:url('../images/bodycont-bg.gif');
   background-position:top left;
   background-repeat:repeat-x;}

div.footer {
   background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
   background-image:url('../images/footer-bg.gif');
   background-position:top left;
   background-repeat:repeat-x;}

This will repeat a different image for each divider across the entire width of the browser. If you only want to assign images to the inner area and leave the areas outside of your fixed width area the same as the body background you can use something like this.

CSS

div.header div.holder {
   background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
   background-image:url('../images/header-bg.gif');
   background-position:top left;
   background-repeat:repeat-x;}

Not sure what is with the hostility from the other guys, but everyone has to start somewhere.

 

[chrishirst]

Not sure what is with the hostility from the other guys, but everyone has to start somewhere.

It's not hostility, but frustration at people who are probably being PAID by their clients for doing a job that they supposedly can do, but are asking other forum members to tell them how to do even the very basics.


Yes, everybody has to learn, BUT if they do not already know, WHY are they advertising and selling their "services" in what they obviously do not know?????

 

[chrishirst]

Oh and of course there is that MoodeyIT are really just a bunch of forum spammers or they employ numbskull "marketers" to spam forums for them.

I've banned at least three of their linkdroppers at the places I mod at!