Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.


Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Replying to Centering The Page

Post Options

Enable emoticons?

Enter Your Name

Security Check *

[quote name="Cory R." post="104868" timestamp="1181361648"] I have been looking for a solution to this for a while now! And when I look at what you said, it's like...really basic! Nothing all that advanced! Why I never figured it out, I couldn't tell you.... Thanks a million for letting us know! I'm very happy now!!! [img]http://www.astahost.com/public/style_emoticons/#EMO_DIR#/wink.png[/img][/quote] [quote name="Cory R." post="104868" timestamp="1181361648"] I have been looking for a solution to this for a while now! And when I look at what you said, it's like...really basic! Nothing all that advanced! Why I never figured it out, I couldn't tell you.... Thanks a million for letting us know! I'm very happy now!!! [img]http://www.astahost.com/public/style_emoticons/#EMO_DIR#/wink.png[/img][/quote]

or Cancel

Topic Summary

Atomic0

Posted 17 November 2008 - 07:25 AM

It is not really pratical to use tables anymore in web design, since it has been succeeded by a more acceptable Cascading Style Sheets (CSS). I do recommend that you visit the tutorials in Post #9 for more info about centering in CSS.

TavoxPeru

Posted 14 November 2008 - 08:30 PM

After some time finally i had the time to review my Internet Explorer and Firefox bookmarks files, and i found these websites related to this topic:

Vertical Centering in CSS Article that explains how to center an object with unknown height vertically within an area of a page.

Vertical Centering in valid CSS - Example
Vertical Centering in CSS - Example
Vertical and horizontal centering in valid CSS - Example
Max Design CSS Centering Article that shows two methods to center a containing block on a page using CSS based on whether your page layout is liquid or fixed width.
CSS Positioning Article that shows an overview of the methods and rules that govern visual rendering in CSS2.

I hope that it can be helpful for everybody.

Best regards,

FirefoxRocks

Posted 02 November 2008 - 04:46 PM

Please note that the site mentioned in the original post have been removed. It was my site so I edited out the links to prevent link rot.

Cory R.

Posted 09 June 2007 - 04:00 AM

I have been looking for a solution to this for a while now!
And when I look at what you said, it's like...really basic! Nothing all that advanced!
Why I never figured it out, I couldn't tell you....

Thanks a million for letting us know! I'm very happy now!!!

TavoxPeru

Posted 19 April 2007 - 01:11 AM

Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The problem is that I want the whole thing centered in the middle of the screen with equal margins at the sides. My CSS is at http://portal.trap17.../wdl/styles.css and as you would probably guess, my site is at http://portal.trap17.com/wdl/

It is centered in Gecko (Firefox) browsers, but in Internet Explorer it isn't centered. No matter what I use, whether it is a container <div> or centering the <html> and <body> elements, it just doesn't work in Internet Explorer

I use a table for layout (yes, I know it is a bad habit) and I serve my pages text/html to IE and application/xhtml+xml to Firefox and Opera. Maybe that might be the problem?

NOTE: This problem was also posted in the W3Schools forum, but no one found a solution yet

Hi, can you try to use the margin property setting to 0 auto, i use the following css code to center a page:

html {height:100%;padding:0;margin:0;}
body {height:100%;color:#000;font-family:Verdana,Georgia,sans-serif;font-size:100.1%;margin:0;text-align:center;padding:0;}
#maincontent {width:780px; text-align:left; margin: 0 auto; }
/* other stUff */

Best regards,

livingston

Posted 18 April 2007 - 05:06 PM

Use the following code to align the enite contents of the page in the center of the page, i.e the contents of <div> tag. This will also reset the alignment of the contents within the <div> tag to left.

body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

faulty.lee

Posted 18 April 2007 - 02:05 PM

I don't think "center" is a valid XHTML tag It's even more "outdated" than the align="center" solution I mentioned

Sorry, bout that, didn't notice it was a xhtml. Well, just want to get a quick workaround. Thanks for pointing out

pyost

Posted 18 April 2007 - 01:39 PM

As far as I can see from your source code, inside the <body> tag you have one DIV, and then one TABLE. The simplest solution would be to remove the DIV container (as it is not necessary this way), and add align="center" to the TABLE tag. This will center the main table in all browsers. However, web developers/designers usually don't like this solution as it is, how I like to call it, "outdated". You can do exactly the same thing with the DIV container, and it's quite simple - you probably just didn't try this combination.

The only thing you need to change is the CSS. In the body properties, include text-align: center (aligns the whole page in Internet Explorer), and in the #outer properties use margin: 0 auto 0 auto and text-align: left. The first one centers the DIV, and the second one is used to nullify the effect text-align: center (from the BODY) would have on the text inside the DIV.

@faulty.lee

I don't think "center" is a valid XHTML tag

It's even more "outdated" than the align="center" solution I mentioned :ph34r:

faulty.lee

Posted 18 April 2007 - 01:36 PM

I use

<center>

I just tested. I saved a copy of your index. Then apply the changes, voila

This is part of the changes I've done

......
<body>
<div id="outer"><center>
<table id="page">
......
</table></center>
</div>
......

That's it. Good luck

EDIT: I've only tested it on Firefox 2.0 and IE6 (Winxp SP2)

FirefoxRocks

Posted 18 April 2007 - 01:18 PM

Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The problem is that I want the whole thing centered in the middle of the screen with equal margins at the sides. My CSS is at (Gone, this was MY site - 404)http://portal.trap17.com/wdl/styles.css and as you would probably guess, my site is at (Gone, this was MY site - 404)http://portal.trap17.com/wdl/

It is centered in Gecko (Firefox) browsers, but in Internet Explorer it isn't centered. No matter what I use, whether it is a container <div> or centering the <html> and <body> elements, it just doesn't work in Internet Explorer :ph34r:

I use a table for layout (yes, I know it is a bad habit) and I serve my pages text/html to IE and application/xhtml+xml to Firefox and Opera. Maybe that might be the problem?

NOTE: This problem was also posted in the W3Schools forum, but no one found a solution yet

Review the complete topic (launches new window)