Hi, Michael...
I'm new to designing layouts via CSS, too, but maybe I can help here.
Let's break down "margin: 0 auto;"...
That's really short hand for
Margin-top: 0;
Margin-bottom: 0;
Margin-left: auto;
Margin-right: auto;
When used in that particular shorthand,
the first place attribute, in this case "0" is for the top and bottom
margins. The second place attribute, in this case, "auto", is for the right
and left margins.
So what you're doing, in effect, is creating 0 margin or no margin for the
top and bottom of the container and margins for the right and left of the
container that are equal in size based on the size of the window showing
your page.
Concerning the "body { text-align: center; }" CSS, it's true, if my
understanding is correct that all text in the body will be centered with
that code, but that's why the others recommended putting "text-align: left"
in the #container code. Since everything on the page will be placed inside
the #container, all text on the page will then be left-justified.
Does this make sense? I hope all my comments are correct and helpful.
Rick
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Michael Leibson
Sent: Saturday, June 30, 2007 11:23 AM
To: Josue Martinez
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] centering elements via margin: auto
Thank-you, Josue, and also David, for your helpful replies.
I've come across this code before, but not - yet - in Eric's book (it's a
pretty dense study, for someone starting from scratch!). I gather that
"{margin 0 " refers to positioning, and (maybe) means the margin should be
at maximum left. But I don't understand how "0" and "auto" work together.
I've also read that "body {text-align: center;}" requires explicit
text-align statements in all children where one doesn't want text to be
aligned to centre.
I've experienced a few frustrations with Eric's book: for one, the Index is
pretty sparse -- for example, I can't find any reference to 'centering a
block element vertically'. As well, there are almost no references to how
to solve particular problems (eg, vertically centering a block element) -- I
had to find those in other texts (eg, Web Design In A Nutshell).
That's why I greatly appreciate these replies!
All the best,
Michael
Hey, Michael, create a container for your layout (a div that will house
everything else). Use this code, assuming that div is called container
body {text-align: center;}
#container {margin 0 auto; text-align: left;}
This is covered in the book. Maybe in the chapter on positioning. Hope this
helps.
Be smarter than spam. See how smart SpamGuard is at giving junk email
the boot with the All-new Yahoo! Mail at
http://mrd.mail.yahoo.com/try_beta?.intl=ca
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
