Confusion over page centering

Get Started
1

My guess is that I have talked myself in circles and missed some small detail. I am making my first from scratch web page and what I can see and what I can code are turning out to be two different things.

I am going to try to use CSS table functions for placement, but before I get that far I want the whole page to be in the center of the viewed screen. I have an extra wide screen, so someof the web pages I see come thru all the way over on the left, and that spoils the whole thing aesthetically.

I was thinking that the screen is basically divided into three columns, a backround or fade appearing to the left of what I want people to see as my page, the page, and again a a background or fade on the right side.

I don’t think I want to go with percentages for the widths, because that would make my page long and narrow on a small screen.

I see some pages that seem to use about 745 pixels for the width of the main message, but how do I get that to show in the center of the screen, when the screens vary in width? And is 745 pixels considered the normal page size?

I am trying to study pages I see on the web, but in viewing their source, I can’t see the CSS, which is where this info is, I think.

Can you help me?

Thanks,

Jeannie

2

Hi Jeannie,

The trick to centering your design is to wrap the content in a div (say “wrapper”) and put auto margins on the wrapper.

E.g.

HTML

<div id="wrapper">
   ... all content here...
</div>

CSS

#wrapper {
    width: 800px; /* set to taste */
    margin: 0 auto;
}

In the margin settings, 0 means 0 on top and bottom, and auto means auto left and right margins (which centers the content).

Not needed. Be aware that this won’t work in IE version 7 and under. Not a good approach for whole-page layout anyway (save it for bits and pieces).

I was thinking that the screen is basically divided into three columns, a backround or fade appearing to the left of what I want people to see as my page, the page, and again a a background or fade on the right side.

Once you’ve done what I suggested above, you can probably add a background image to the <body> tag. You’ll need to make an image and place it in the CSS like so:


body {
  background: url(/images/image.gif) repeat-y 50&#37; 0;
}

that’s just a guess; it will depend on the image you use.

I am trying to study pages I see on the web, but in viewing their source, I can’t see the CSS

Make sure to download Firebug, a wonderful, free Firefox plugin that allows you to study the css of a page while looking at the HTML.

It’s also a good idea to get the Firefox web developer toolbar.

And make sure to develop in a browser like Firefox, rather than in IE. IE is faulty and will not give you a realistic idea of what is good and what is bad code. :slight_smile:

3

Ralph,

Thank you so much - this is just terrific!

I have seen the wrapper div and not known what it or the auto in the margins meant. And, of course, I have been trying to use IE and not Firefox, so thank you for that also.

You have so generously not only answered what I specifically asked, but also saw where I was headed and assisted me there, as well. It is very kind of you. I am now several steps ahead of where I was (or I will be as soon as I utilize your advice). I can’t wait to try it!

Thank you again.

Jeannie

4

Firefox with Firebug extension is pretty much required for front-end web development in my opinion. It lets you style your sites real time in a non-destructive method. You can try all kinds of crazy stuff and it all goes away when you refresh the page.

Best of luck with your site!! :slight_smile: Remember, if it ever seems like things are getting WAY too complicated, they probably are. Take a step back and try to approach the problem from a different angle. HTML and CSS at their core are very simple languages and are easy and even fun to use. Most people learning make these overly complicated b/c they do not properly understand the uses of the language or the markup (yes, I was guilty of this too at one time lol).

5

That’s great, Jeannie. As rustybuddy said, HTML and CSS are not all that hard, but it is easy to get completely muddled too; so don’t hesitate to come back to these forums the moment you have a question. People fall over each other to be helpful here, so your issues will not go unanswered.

I hope to see you again in the HTML and [URL=“http://www.sitepoint.com/forums/forumdisplay.php?f=53”]CSS sections! :slight_smile: