CSS centering

[Will]

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;
}

 

[Nik Coughin]

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

Huh?

 

[Will]

Huh?

oops, that's was a learning exercise that I forgot to take out.

 

[Nik Coughin]

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;

 

[Will]

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.

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

Because the value is 0 the unit is irrelevant.
got it



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.

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

Just chalk that one up to stupidity.

 

[Nik Coughin]

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]

Have a look at this:

http://tinyurl.com/39g63

Sorry, wrong url, try this:

http://tinyurl.com/34uo8

 

[Mark Parnell]

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/

 

[Toby A Inkster]

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).

 

[Mark Parnell]

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.

 

[Will]

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;
}

#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;
}

Cool, I think I got that. The only problem is there is a space between
the images I have in body{} and the centered colored box I create in
#mcc. I need them to but right up next to eachother and can't seem to
get that to happen.

 

[Nik Coughin]

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.

OK, will keep that in mind next time.