How do I center my web page on the screen? It is left justified.

Browser: exploere

You can use HTML center tag to center a division. ust after body tag use center tag and close this tag before the end of body tag.
Example

Using the "center" tag to wrap a web page, seems like quick solution. It was a good try. It's nice to see other users trying to help. But for several reasons, the "center" tag isn't practical.

The first reason, and probably the most important, is that Lyndon is using the Website Wizard. The Wizard does not provide the user with access to the web page structure. The Wizard divides the page into small content areas and the user only has access to one content area at a time.

Another reason is that the "center" tag does not take into account the contents of the style sheet. If you did actually wrap the web page HTML in a "center" tag, and I did, you would find out that only part of the page would center. The header and footer, for example, would say blocked left, making the whole page look really strange. And that is in Firefox 3.5.2. In IE7, it's simply ignored.

There are other reasons, but the point is that centering can be done. It requires the addition of a style. The Wizard does not allow the user access to the style sheet, but a style setting can be added to the end of the main content area, using the Code Editor mode. Just follow the "manage website" link and open one of your pages for editing. Then select one of the content blocks for editing. It really doesn't matter which one, but it's best to choose one that doesn't have much in it. Then switch to the Code Editor mode and add the following code to the end of any content in the block.

Save your work, publish your site, and view your page from a browser. A couple of browser refreshes (F5 or Ctrl-R) may be required to update your browser cache. But the page where you added the style setting should now be centered. An example can be seen at Center Test.

Note that only the "Main Page" is centered. The other pages are blocked left. This shows that you need to add the above code to each page, if you want them all to center. If you only have a few pages, this isn't a big deal.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

AWESOME.... You're the man!

That works beautifully.

Thank you so much for sharing your wisdom with us.

- Lyndon

Browser: exploere

Thank you for your answer. I just want to add one line. Add this line at the top of css file:

Now I have one question to you, how to center an absolute positioned division?

I generally avoid absolute positioned elements. There are lots of pros and cons to using/not using absolute positioning, but I'm just more comfortable without it. Generally speaking, absolute positioned elements will position themselves relative to the parenting div. So, much like you attempted to do with the "center" tag, you wrap your absolute positioned "div(s)" in another "div". The wrapper "div" does the positioning.

Here is an example of centering an absolute positioned div. Parts of it were borrowed from the web. You can easily view the source code by using "view" from your browser menu, or your right mouse button. The "header", "body", and "footer" divs have positioning elements and, by themselves would block left. The "main", wrapped around all of the "divs", does the centering.

But you may notice that it is also absolute positioned. It achieves the centering by setting the "left" position to 50%. This shifts the left side of the container to the center of the screen. Then the "margin" is set to 1/2 of the container's width. Note that the "margin is negative, which shifts it left. Combined, the "left" and "margin" settings position the container to the center of the screen. Since the other divs are within the container they are position absolutely, but relative to the container.

I adjusted the widths of the "header", "body", and "footer" divs, and added borders, so you can get a better idea of the positioning. Note that the width are smaller than the "main" div, to account for the borders. If the widths were the same, the border would extend outside of the "main" div.

There are other ways of accomplishing the same thing. A google search using "center absolute div" will bring up more hits than you really want to read.



Website Wizard users do not have access to the CSS file. When they use the "publish website" link in the Wizard a "style.css" file is written to their web site. This file can be seen from the File Manager and opened in a text editor. However, the next time the "publish website" link is used, the file will be overwritten. It is never a good idea to use an external editor on the files generated by the Website Wizard.

But to the addition of the style, Why? I know what it's intended to do, but I don't see it being useful on the web site in this post. Even though I use Firefox almost exclusively, I have never had the need to use any of the "-moz-.." style settings. If there is something specific that's annoying you about Firefox, you can fix it by modifying the defaults in your Firefox installation.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

OOPS!! Looks like I had an extra "http://" in the link for my last post. This link to the example should work.

centering an absolute positioned div

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

hi

Apologies if I should be starting a seperate thread, however I have the same issue and dont understand where i am going wrong.

Can you help?

Thanks
J

Browser: IE8

OS: Vista

Jon,

Yes, sometimes it is better to open a separate post. It helps to avoid confusion. But, since it's already here, and it still pertains to a Website Wizard creation, I'll answer it here.

The Website Wizard Layouts are pretty much the same. All they do when you pick a different layout is change the style sheet. The basic structure applies to all of the Layouts. But the Themes, which is what Lyndon and Jon are using, vary in structure. Lyndon's theme is a "div" structure, but Jon's theme is a "table" structure. While the table is wrapped in a "div", the same centering code can not be used.

The centering code was added to the correct place, but needs to be changed for Jon's Theme. For that theme, the following code is needed. The first style (.wrapper) is applied to the "div" that contains the "table". This will allow old browsers, like MSIE5 and NS4, to center the table. The next style (.wrapper table) applies to a "table" that is contained within that "div". The margin settings will allow centering in CSS-compliant browsers and the text alignment will reset the default alignment for table cells to "left" for browsers in which the text alignment of the "div" is inherited.



That seemed to center the web page properly in IE6, IE7, Firefox 3.5.2, and Netscape 7.2. Here is an example of the Theme Centered, of a free Bravenet site. I didn't have any other browsers to test it with. The only other oddity that I saw in the web page is at the bottom right. With IE7, the little corner piece is shifted to the left a couple of pixels. This highlights some of the differences between browser version. The following code can be added to fix the issue. This is a conditional IF that recognizes IE7 and modifies the style setting, so that the corner piece is moved to the correct place. It should have no effect on other browser versions. The example that I linked to above, already contains this fix. It's really not that noticeable, so you can probably just ignore it.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

I would like to say thank you for your help - hopefully you agree it looks better, and apologies to Lyndon for hyjacking your thread, however I am sure many will learn from the wisdom of the answer - thanks.

J

Browser: IE8

OS: Vista

I can't seem to get this page to center using the centering codes given earlier can someone help?

Thank you sir. Thank you very much.

Does that mean you can help me?

Kind regards
J

Browser: IE8

OS: Vista

Sorry, I actually reply to Philo Kvetch for code help about centering division.

I can't seem to get this page to center using the centering codes given earlier can you help... again, I might add?... smile

you can try this:

Browser: IE5

OS: XP

Lyndon,

While the Wizard Layouts are all similar, the Wizard Themes are very different from each other. The style setting that I previously listed, was specific to the Wizard Theme that Jon was using.

For your theme, use the following style setting. This centers the "div" that is wrapped around your content. If you create other pages, and want them centered, you will need to add the style setting to each page.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

thanks again philo, it worked like a charm!