Re: using css for centering

Use DHTML to accomplish it, if you really want it done that way.  I'll let =
you in on the things you'll need to find out to do it:

1.  You need to absolutely position your ENTIRE content within a div, at 0 =
x 0.
2.  Find the width of the LIVE area of the page.
3.  Find the width of the DIV that is holding your content.
4.  Calculattions:

Example: Window 200W, Object 100W

Subtract Object from Window, then subtract half of Object from Window.  =
This gives you 50px.  Thus, the object is 50px from the left, 50px from =
the right, spanning 50-150px of the window space.  Once you have that =
function, simply call it onload.

I'm sure you'll be able to figure the implementation out, but if not, just =
drop me a line and I'll be happy to help out.

>>> Andrew McFarland <aamcf(at)aamcf.co.uk> 06/04/02 08:16AM >>>
At 11:26 03/06/02 -0400, Nate Harel wrote:
<snip/>
>I want to produce a page that is entirely centered on the page. Using=20
>tables, this is easy. I simply make a table with a particular width =
and=20
>center it. Then no matter the size of the screen, the contents are =
centered.
>
>How do I do the same with CSS?

With grave difficulty.

Centering block level elements should be easy with CSS, but browser=20
implementations are sometimes iffy. What you want to do is set the left =
and=20
right margins to the same size, which can be done in various ways.

If you want, say, a paragraph to be 50% of the width or the page and=20
horizontally centered you could use this CSS:

p {
         margin-left: 25%;
         margin-right: 25%;
}

If you wanted to give the block level element a width in pixels then =
things=20
get messy. You should be able to do this:

p {
         margin-left: auto;
         margin-right: auto;
         width: 500px;
}

In theory, the browser would set the width of the element to 500px, and=20
then divide up the remaining space equally between the left and right=20
margins. In practice this is not well supported, with the left margin =
being=20
set to 0 in many browsers. Fortunately though newer browsers do support =
this.

One thing you shouldn't do is use text-align: center. This aligns the=20
inline elements with the center of their inline boxes. This is a tricky=20
thing to describe, but have a look at http://aamcf.co.uk/temp/text-align =
to=20
see what I mean (look at the source code too).

Andrew

--
http://aamcf.co.uk/=20

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA