CSS centering

Discussion in 'HTML' started by Will, Apr 27, 2004.

  1. Will

    Will Guest

    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, Apr 27, 2004
    #1
    1. Advertising

  2. Will

    Nik Coughin Guest

    Will wrote:
    >> #header {

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


    Huh?
    Nik Coughin, Apr 27, 2004
    #2
    1. Advertising

  3. Will

    Will Guest

    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, Apr 27, 2004
    #3
  4. Will

    Nik Coughin Guest

    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, Apr 27, 2004
    #4
  5. Will

    Will Guest

    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, Apr 27, 2004
    #5
  6. Will

    Nik Coughin Guest

    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, Apr 27, 2004
    #6
  7. Will

    Nik Coughin Guest

    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
    Nik Coughin, Apr 27, 2004
    #7
  8. Will

    Mark Parnell Guest

    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
    Mark Parnell, Apr 27, 2004
    #8
  9. Toby A Inkster, Apr 27, 2004
    #9
  10. Will

    Mark Parnell Guest

    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
    Mark Parnell, Apr 27, 2004
    #10
  11. Will

    Will Guest

    Will wrote:
    > 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.
    Will, Apr 27, 2004
    #11
  12. Will

    Nik Coughin Guest

    Mark Parnell wrote:
    > 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.


    OK, will keep that in mind next time.
    Nik Coughin, Apr 29, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lenny
    Replies:
    1
    Views:
    446
    Andy Holmes
    Oct 16, 2003
  2. Replies:
    5
    Views:
    24,731
  3. Mopar

    centering and css

    Mopar, Dec 1, 2003, in forum: HTML
    Replies:
    7
    Views:
    550
    brucie
    Dec 1, 2003
  4. somebody

    Centering with CSS

    somebody, Jan 9, 2004, in forum: HTML
    Replies:
    13
    Views:
    686
    Steve Pugh
    Jan 23, 2004
  5. Scott

    Centering whole page in CSS

    Scott, Jul 16, 2004, in forum: HTML
    Replies:
    3
    Views:
    4,831
Loading...

Share This Page