CSS centering

So I posted a little while back with the "Target options" and got some
great feedback. You guys convinced me not to do pop-up, which didn't
take much. You also pointed out that I should not be using tables for
my layout. I have been looking at CSS for the last few evenings and
have gotten along alright by looking at some examples and reading the
faq's and other links. But I do not get this. In the following .css
code that causes "mcc" to center on the page? I will post html if needed.

body {
margin:0px 0px; padding:0px;
text-align:center;
background-color: #D84226;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(background.jpg);
font-size: 1em;
}

#header {
<IMG SRC="picture.jpg" width=750 height=216 ALT="">
}

#mcc
{
width:738px;
margin:0px auto;
text-align:left;
padding:0px;
background: #F0E8DD;
border: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 0;
}

Will

Will wrote:
>> #header {
> <IMG SRC="picture.jpg" width=750 height=216 ALT="">
> }

Huh?

Nik Coughin wrote:

> Will wrote:
>
>>>#header {
>>
>> <IMG SRC="picture.jpg" width=750 height=216 ALT="">
>>}
>
>
> Huh?
>
>
oops, that's was a learning exercise that I forgot to take out.

Will wrote:
> faq's and other links. But I do not get this. In the following .css
> code that causes "mcc" to center on the page? I will post html if
> needed.

Do you mean what causes it? The margin: 0px auto;

> body {
> margin:0px 0px; padding:0px;

You can change this to:
margin: 0;
padding: 0;

Because the value is 0 the unit is irrelevant.

> text-align:center;
> background-color: #D84226;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> background-image: url(background.jpg);
> font-size: 1em;
> }

Why you should avoid the Verdana font:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

> #header {
> <IMG SRC="picture.jpg" width=750 height=216 ALT="">
> }

This I don't understand. You can't embed an html tag in a css class.

> #mcc
> {
> width:738px;
> margin:0px auto;

Once again, you can just use:

margin: 0 auto;

> text-align:left;
> padding:0px;

padding: 0;

> background: #F0E8DD;
> border: 1px solid #ccc;
> border-right: 1px solid #ccc;
> border-bottom: 1px solid #ccc;
> border-top: 0;
> }

The border-right and border-bottom are unnecessary and can be removed. They
have already been set by the line that reads:

border: 1px solid #ccc;

Nik Coughin wrote:

> Will wrote:
>
>>faq's and other links. But I do not get this. In the following .css
>>code that causes "mcc" to center on the page? I will post html if
>>needed.
>
>
> Do you mean what causes it? The margin: 0px auto;

So, what does "auto" do? The books I have (html books that briefly
explain css) don't tell what it does.
>
>
>>body {
>>margin:0px 0px; padding:0px;
>
>
> You can change this to:
> margin: 0;
> padding: 0;
>
> Because the value is 0 the unit is irrelevant.
>
got it
>
>>text-align:center;
>>background-color: #D84226;
>>font-family: Verdana, Arial, Helvetica, sans-serif;
>>background-image: url(background.jpg);
>>font-size: 1em;
>>}
>
>
> Why you should avoid the Verdana font:
> http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
>
This is "reused" code. I will remove it. I saw an article about that on
the html-faq page.
>
>>#header {
>> <IMG SRC="picture.jpg" width=750 height=216 ALT="">
>>}
>
>
> This I don't understand. You can't embed an html tag in a css class.
>
Just chalk that one up to stupidity.

Will wrote:
>
> So, what does "auto" do? The books I have (html books that briefly
> explain css) don't tell what it does.

Have a look at this:

http://tinyurl.com/39g63

Nik Coughin wrote:
> Will wrote:
>>
>> So, what does "auto" do? The books I have (html books that briefly
>> explain css) don't tell what it does.
>
> Have a look at this:
>
> http://tinyurl.com/39g63

Sorry, wrong url, try this:

http://tinyurl.com/34uo8

On Tue, 27 Apr 2004 03:04:09 GMT, Will <> declared in
alt.html:

> In the following .css code that causes "mcc" to center on the page?

I assume you mean what causes it? There are 2 things:

> body {
> text-align:center;
^^^^^^^^^^^^^^^^^^
This does in IE<6 (and IE6 in Quirks mode)

> }
> #mcc
> {
> margin:0px auto;
^^^^^^^^^^^^^^^^
This does in behaving browsers (IE6 in Standards mode, Opera, Moz, most
other modern browsers).

> }

Basically it sets the top and bottom margin to 0, and the left and right
margins to auto. Setting the left and right margins to auto centres the
element. It can also be done like this:

#mcc {margin-left: auto; margin-right: auto;}

More information can be found here: http://dorward.me.uk/www/centre/

--
Mark Parnell
http://www.clarkecomputers.com.au

Nik Coughin wrote:
> Nik Coughin wrote:
>
>> Have a look at this:
>> http://tinyurl.com/39g63
>
> Sorry, wrong url, try this:
> http://tinyurl.com/34uo8

Why not just post the real link? It's only 71 characters (not likely to
wrap).

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

On Tue, 27 Apr 2004 07:35:13 +0100, Toby A Inkster
<> declared in alt.html:

> Why not just post the real link?

Yes, at least post the real link as well as the tinyurl one. If I want
to post a link, I have to follow all of yours to see if you have already
posted it.

--
Mark Parnell
http://www.clarkecomputers.com.au