Positioning of DIV tag in center of the screen

Discussion in 'HTML' started by Fokke Nauta, Jan 25, 2011.

  1. Fokke Nauta

    Fokke Nauta Guest

    Hi all,

    I am redesigning my website. It was built with tables and cells but I
    learned that that's not done anymore. So now I use the <DIV> tags.
    An example of this is in www.pc3.nl/test. In the example page test.htm I use
    <div class="container"></div> and in my style sheet I use:

    ..container {
    background-image: url(main.jpg);
    position: relative;
    height: 525px;
    width: 980px;
    }

    This works and I get the picture in my screen. This is only an example, on
    the real page there are links and a text window.
    But how do I get this picture in the center of the screen? With a table and
    a cell it was piece of cake, but how can I achieve this with a DIV tag and a
    style sheet?
    Is it possible anyway?

    Thanks in advance,
    With regards,
    Fokke Nauta
    Fokke Nauta, Jan 25, 2011
    #1
    1. Advertising

  2. Fokke Nauta

    123Jim Guest

    "Fokke Nauta" <> wrote in message
    news:...
    > Hi all,
    >
    > I am redesigning my website. It was built with tables and cells but I
    > learned that that's not done anymore. So now I use the <DIV> tags.
    > An example of this is in www.pc3.nl/test. In the example page test.htm I
    > use <div class="container"></div> and in my style sheet I use:
    >
    > .container {
    > background-image: url(main.jpg);
    > position: relative;
    > height: 525px;
    > width: 980px;
    > }
    >
    > This works and I get the picture in my screen. This is only an example, on
    > the real page there are links and a text window.
    > But how do I get this picture in the center of the screen? With a table
    > and a cell it was piece of cake, but how can I achieve this with a DIV tag
    > and a style sheet?
    > Is it possible anyway?
    >


    ..container {
    background-image: url(main.jpg);
    position: relative;
    height: 525px;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    }

    ^^ centered horizontally
    123Jim, Jan 25, 2011
    #2
    1. Advertising

  3. Fokke Nauta

    Fokke Nauta Guest

    "123Jim" <> wrote in message
    news:ihn150$6t5$-september.org...
    >
    > "Fokke Nauta" <> wrote in message
    > news:...
    >> Hi all,
    >>
    >> I am redesigning my website. It was built with tables and cells but I
    >> learned that that's not done anymore. So now I use the <DIV> tags.
    >> An example of this is in www.pc3.nl/test. In the example page test.htm I
    >> use <div class="container"></div> and in my style sheet I use:
    >>
    >> .container {
    >> background-image: url(main.jpg);
    >> position: relative;
    >> height: 525px;
    >> width: 980px;
    >> }
    >>
    >> This works and I get the picture in my screen. This is only an example,
    >> on the real page there are links and a text window.
    >> But how do I get this picture in the center of the screen? With a table
    >> and a cell it was piece of cake, but how can I achieve this with a DIV
    >> tag and a style sheet?
    >> Is it possible anyway?
    >>

    >
    > .container {
    > background-image: url(main.jpg);
    > position: relative;
    > height: 525px;
    > margin-left: auto;
    > margin-right: auto;
    > width: 980px;
    > }
    >
    > ^^ centered horizontally


    Well,
    This didn't work:

    ..container {
    background-image: url(img/main.jpg);
    position: relative;
    height: 525px;
    width: 980px;
    centered: horizontally;
    }

    Fokke
    Fokke Nauta, Jan 25, 2011
    #3
  4. Fokke Nauta

    123Jim Guest

    "Fokke Nauta" <> wrote in message
    news:...
    > "123Jim" <> wrote in message
    > news:ihn150$6t5$-september.org...
    >>
    >> "Fokke Nauta" <> wrote in message
    >> news:...
    >>> Hi all,
    >>>
    >>> I am redesigning my website. It was built with tables and cells but I
    >>> learned that that's not done anymore. So now I use the <DIV> tags.
    >>> An example of this is in www.pc3.nl/test. In the example page test.htm I
    >>> use <div class="container"></div> and in my style sheet I use:
    >>>
    >>> .container {
    >>> background-image: url(main.jpg);
    >>> position: relative;
    >>> height: 525px;
    >>> width: 980px;
    >>> }
    >>>
    >>> This works and I get the picture in my screen. This is only an example,
    >>> on the real page there are links and a text window.
    >>> But how do I get this picture in the center of the screen? With a table
    >>> and a cell it was piece of cake, but how can I achieve this with a DIV
    >>> tag and a style sheet?
    >>> Is it possible anyway?
    >>>

    >>
    >> .container {
    >> background-image: url(main.jpg);
    >> position: relative;
    >> height: 525px;
    >> margin-left: auto;
    >> margin-right: auto;
    >> width: 980px;
    >> }
    >>
    >> ^^ centered horizontally

    >
    > Well,
    > This didn't work:
    >
    > .container {
    > background-image: url(img/main.jpg);
    > position: relative;
    > height: 525px;
    > width: 980px;
    > centered: horizontally;
    > }
    >


    You missed the edit I added to your container:

    margin-left: auto;
    margin-right: auto;
    123Jim, Jan 25, 2011
    #4
  5. Jonathan N. Little, Jan 25, 2011
    #5
  6. 123Jim wrote:

    > "Fokke Nauta" wrote:
    >> "123Jim" wrote:
    >>> .container {
    >>> background-image: url(main.jpg);
    >>> position: relative;
    >>> height: 525px;
    >>> margin-left: auto;
    >>> margin-right: auto;
    >>> width: 980px;
    >>> }
    >>>
    >>> ^^ centered horizontally

    >>
    >> Well,
    >> This didn't work:
    >>
    >> .container {
    >> background-image: url(img/main.jpg);
    >> position: relative;
    >> height: 525px;
    >> width: 980px;
    >> centered: horizontally;
    >> }

    >
    > You missed the edit I added to your container:
    >
    > margin-left: auto;
    > margin-right: auto;


    And, Fokke added "centered: horizontally;" which was your description
    of what you added! :) [ ^^ centered horizontally ]

    --
    -bts
    -Methinks a CSS tutorial is in order...
    Beauregard T. Shagnasty, Jan 25, 2011
    #6
  7. Fokke Nauta

    Fokke Nauta Guest

    "123Jim" <> wrote in message
    news:ihn5hv$rh7$-september.org...
    >

    <cut>


    > You missed the edit I added to your container:
    >
    > margin-left: auto;
    > margin-right: auto;
    >


    So, now it looks like:

    ..container {
    background-image: url(main.jpg);
    position: relative;
    height: 525px;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    centered: horizontally;
    centered: vertically;
    }

    And it centers horizontally allright! Thanks.
    But now vertically?

    Fokke
    Fokke Nauta, Jan 25, 2011
    #7
  8. Fokke Nauta

    Fokke Nauta Guest

    "Jonathan N. Little" <> wrote in message
    news:ihn849$hcg$-september.org...
    > Fokke Nauta wrote:
    >
    >> centered: horizontally;

    >
    > There is not CSS property "centered". For list of valid properties
    > supported my most browsers currently:
    >
    > http://www.w3.org/TR/CSS2/propidx.html
    >
    > --
    > Take care,
    >
    > Jonathan


    OK, so it may be undocumented but it works in all browsers I tested.
    Thanks for the link BTW, I bookmarked it.

    But what's wrong with it as long as it works?

    Fokke
    Fokke Nauta, Jan 25, 2011
    #8
  9. Fokke Nauta

    Fokke Nauta Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:ihn8pn$sdh$-september.org...
    > 123Jim wrote:
    >
    >> "Fokke Nauta" wrote:
    >>> "123Jim" wrote:
    >>>> .container {
    >>>> background-image: url(main.jpg);
    >>>> position: relative;
    >>>> height: 525px;
    >>>> margin-left: auto;
    >>>> margin-right: auto;
    >>>> width: 980px;
    >>>> }
    >>>>
    >>>> ^^ centered horizontally
    >>>
    >>> Well,
    >>> This didn't work:
    >>>
    >>> .container {
    >>> background-image: url(img/main.jpg);
    >>> position: relative;
    >>> height: 525px;
    >>> width: 980px;
    >>> centered: horizontally;
    >>> }

    >>
    >> You missed the edit I added to your container:
    >>
    >> margin-left: auto;
    >> margin-right: auto;

    >
    > And, Fokke added "centered: horizontally;" which was your description
    > of what you added! :) [ ^^ centered horizontally ]
    >
    > --
    > -bts
    > -Methinks a CSS tutorial is in order...


    Thanks :)
    I check a CSS tutorial site like
    http://www.w3schools.com/css/css_reference.asp which is very interesting,
    but there are always things one wouldn't find there.
    And I'm always keen to follow suggestions.

    Fokke
    Fokke Nauta, Jan 25, 2011
    #9
  10. Fokke Nauta

    richard Guest

    On Tue, 25 Jan 2011 14:26:00 -0500, Jonathan N. Little wrote:

    > Fokke Nauta wrote:
    >
    >> centered: horizontally;

    >
    > There is not CSS property "centered". For list of valid properties
    > supported my most browsers currently:
    >
    > http://www.w3.org/TR/CSS2/propidx.html


    It's probably another one of those IE exclusive experiments.
    richard, Jan 25, 2011
    #10
  11. Fokke Nauta

    dorayme Guest

    In article <>,
    "Fokke Nauta" <> wrote:

    > "Jonathan N. Little" <> wrote in message
    > news:ihn849$hcg$-september.org...
    > > Fokke Nauta wrote:
    > >
    > >> centered: horizontally;

    > >
    > > There is not CSS property "centered". For list of valid properties
    > > supported my most browsers currently:
    > >
    > > http://www.w3.org/TR/CSS2/propidx.html
    > >
    > > --
    > > Take care,
    > >
    > > Jonathan

    >
    > OK, so it may be undocumented but it works in all browsers I tested.
    > Thanks for the link BTW, I bookmarked it.
    >
    > But what's wrong with it as long as it works?
    >


    It works in the way that any proposition of the form 'p or q',
    where p and q take propositions as values, cannot be false if
    either p or q are true. Or, something more ordinary, if I say you
    will recognise me at the meeting because I will wear a red hat,
    it is the red hat that will help you, not my white handkerchief.

    It is the margin-left: auto; margin-right: auto; along with the
    width: 980px; that does the work of centring. All the rest is one
    of the best misunderstandings on usenet today! <g>

    --
    dorayme
    dorayme, Jan 25, 2011
    #11
  12. Op 25-1-2011 21:34, richard schreef:
    > On Tue, 25 Jan 2011 14:26:00 -0500, Jonathan N. Little wrote:
    >
    >> Fokke Nauta wrote:
    >>
    >>> centered: horizontally;

    >>
    >> There is not CSS property "centered". For list of valid properties
    >> supported my most browsers currently:
    >>
    >> http://www.w3.org/TR/CSS2/propidx.html

    >
    > It's probably another one of those IE exclusive experiments.



    IE is a experiment by itself.
    It was described as a browser-like object by someone in this group.
    Then again just over half my visitors use it, so I need to support it.


    cheers,
    Samuel
    Samuël van Laere, Jan 25, 2011
    #12
  13. Fokke Nauta wrote:

    > So, now it looks like:
    >
    > .container {
    > background-image: url(main.jpg);
    > position: relative;
    > height: 525px;
    > width: 980px;
    > margin-left: auto;
    > margin-right: auto;
    > centered: horizontally; <--------- remove these two lines
    > centered: vertically; <--------- "
    > }


    There is no property of: centered
    (not even in IE, richard)

    > And it centers horizontally allright! Thanks.
    > But now vertically?


    Try margin: auto; instead of the separate left and right.

    But it's already at the top of the page, isn't it? This is a container
    for "content" I guess. Why do you want such a large darkish image in the
    first place? And as a background, which indicates there is going to be a
    foreground. What? White text?

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
    Beauregard T. Shagnasty, Jan 25, 2011
    #13
  14. Fokke Nauta wrote:
    > "Jonathan N. Little"<> wrote in message
    > news:ihn849$hcg$-september.org...
    >> Fokke Nauta wrote:
    >>
    >>> centered: horizontally;

    >>
    >> There is not CSS property "centered". For list of valid properties
    >> supported my most browsers currently:
    >>
    >> http://www.w3.org/TR/CSS2/propidx.html
    >>
    >> --
    >> Take care,
    >>
    >> Jonathan

    >
    > OK, so it may be undocumented but it works in all browsers I tested.
    > Thanks for the link BTW, I bookmarked it.
    >
    > But what's wrong with it as long as it works?



    But it does *not* work. There is no such property. Invalid css rules are
    ignored.

    ..container {
    background-image: url(main.jpg);
    position: relative;
    height: 525px;
    width: 980px;

    margin-left: auto; <-- These two rules are actually doing
    margin-right: auto; <-- the horizonal centering of container

    centered: horizontally; <-- These two rules are actually doing
    centered: vertically; <-- nothing because they are ignored.
    }

    I can prove it:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

    <title>Proof</title>

    <style type="text/css">

    .valid { background: #efe; margin: auto; }
    .invalid { background: #fee; centered: horizontally; centered:
    vertically; }
    div { padding: .5em; width: 10em; height: 5em; }

    </style>

    </head>
    <body>

    <div class="valid">I am centered horizontally</div>

    <div class="invalid">I am not centered!</div>

    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 25, 2011
    #14
  15. richard wrote:
    > On Tue, 25 Jan 2011 14:26:00 -0500, Jonathan N. Little wrote:
    >
    >> Fokke Nauta wrote:
    >>
    >>> centered: horizontally;

    >>
    >> There is not CSS property "centered". For list of valid properties
    >> supported my most browsers currently:
    >>
    >> http://www.w3.org/TR/CSS2/propidx.html

    >
    > It's probably another one of those IE exclusive experiments.


    No, not even IE supports it any more than the css "minty" property

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 25, 2011
    #15
  16. Fokke Nauta

    dorayme Guest

    In article <>,
    Ed Mullen <> wrote:

    > Is "centered" [defined]?


    I notice that the thread is about centring tags. Almost
    definitively, the best way to centre tags is to use text-align on
    the element in which the tags display:

    <div style="text-align:center">&lt;p&gt;&lt;/p&gt;</div>

    Now there are some important caveats here. Centring, whether of
    elements or of content, is almost always wanted in contexts where
    the margins, paddings and borders are equal on both sides, equal
    nothing being acceptable.

    --
    dorayme
    dorayme, Jan 26, 2011
    #16
  17. Fokke Nauta

    Fokke Nauta Guest

    "Sherm Pendley" <> wrote in message
    news:...
    > "Fokke Nauta" <> writes:
    >
    >> I check a CSS tutorial site like
    >> http://www.w3schools.com/css/css_reference.asp which is very interesting,

    >
    > Despite its misleading name, it has nothing to do with the W3C, and is
    > well-known here for its very poor-quality tutorials.


    OK, I was not aware of that.

    > Is that where you
    > found the nonexistent "centered" CSS property? It wouldn't surprise me.


    No, somebody else in this NG came up with that suggestion.

    > W3Schools wouldn't know correct markup if it bit them in the rear end.
    >
    >> but there are always things one wouldn't find there.

    >
    > Accurate information being one of those things.
    >
    >> And I'm always keen to follow suggestions.

    >
    > <http://htmldog.com> has a much better reputation for accurate, high-
    > quality tutorials.


    OK, I'll check there the next time.

    > sherm--
    >
    > --
    > Sherm Pendley


    Thanks,
    Fokke
    Fokke Nauta, Jan 26, 2011
    #17
  18. Fokke Nauta

    Fokke Nauta Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:ihnctj$c7g$-september.org...
    > Fokke Nauta wrote:
    >
    >> So, now it looks like:
    >>
    >> .container {
    >> background-image: url(main.jpg);
    >> position: relative;
    >> height: 525px;
    >> width: 980px;
    >> margin-left: auto;
    >> margin-right: auto;
    >> centered: horizontally; <--------- remove these two lines
    >> centered: vertically; <--------- "
    >> }

    >
    > There is no property of: centered
    > (not even in IE, richard)
    >
    >> And it centers horizontally allright! Thanks.
    >> But now vertically?

    >
    > Try margin: auto; instead of the separate left and right.


    Well, margin: auto; works OK. Left the "centered" properties out.
    But it still is in the top of the screen. Not a problem, though.

    > But it's already at the top of the page, isn't it? This is a container
    > for "content" I guess.


    Yes, indeed

    > Why do you want such a large darkish image in the
    > first place? And as a background, which indicates there is going to be a
    > foreground. What? White text?
    >


    There are links and a text window. White font colour, indeed.
    Have a look at my "old" website, www.fokkenauta.nl.

    Thanks,
    Fokke
    Fokke Nauta, Jan 26, 2011
    #18
  19. Fokke Nauta

    Fokke Nauta Guest

    "Jonathan N. Little" <> wrote in message
    news:ihni83$p4f$-september.org...
    > Fokke Nauta wrote:
    >> "Jonathan N. Little"<> wrote in message
    >> news:ihn849$hcg$-september.org...
    >>> Fokke Nauta wrote:
    >>>
    >>>> centered: horizontally;
    >>>
    >>> There is not CSS property "centered". For list of valid properties
    >>> supported my most browsers currently:
    >>>
    >>> http://www.w3.org/TR/CSS2/propidx.html
    >>>
    >>> --
    >>> Take care,
    >>>
    >>> Jonathan

    >>
    >> OK, so it may be undocumented but it works in all browsers I tested.
    >> Thanks for the link BTW, I bookmarked it.
    >>
    >> But what's wrong with it as long as it works?

    >
    >
    > But it does *not* work. There is no such property. Invalid css rules are
    > ignored.
    >
    > .container {
    > background-image: url(main.jpg);
    > position: relative;
    > height: 525px;
    > width: 980px;
    >
    > margin-left: auto; <-- These two rules are actually doing
    > margin-right: auto; <-- the horizonal centering of container
    >
    > centered: horizontally; <-- These two rules are actually doing
    > centered: vertically; <-- nothing because they are ignored.
    > }
    >
    > I can prove it:
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    >
    > <title>Proof</title>
    >
    > <style type="text/css">
    >
    > .valid { background: #efe; margin: auto; }
    > .invalid { background: #fee; centered: horizontally; centered:
    > vertically; }
    > div { padding: .5em; width: 10em; height: 5em; }
    >
    > </style>
    >
    > </head>
    > <body>
    >
    > <div class="valid">I am centered horizontally</div>
    >
    > <div class="invalid">I am not centered!</div>
    >
    > </body>
    > </html>
    >
    >


    Thanks, I have seen it.
    I have left out the invalid "centered" properties and now use margin: auto;.
    That does the trick.

    I assume it is not possible to center it vertically as well?

    Fokke
    Fokke Nauta, Jan 26, 2011
    #19
  20. Fokke Nauta

    123Jim Guest

    "Fokke Nauta" <> wrote in message
    news:...
    > "Sherm Pendley" <> wrote in message
    > news:...
    >> "Fokke Nauta" <> writes:
    >>
    >>> I check a CSS tutorial site like
    >>> http://www.w3schools.com/css/css_reference.asp which is very
    >>> interesting,

    >>
    >> Despite its misleading name, it has nothing to do with the W3C, and is
    >> well-known here for its very poor-quality tutorials.

    >
    > OK, I was not aware of that.
    >
    >> Is that where you
    >> found the nonexistent "centered" CSS property? It wouldn't surprise me.

    >
    > No, somebody else in this NG came up with that suggestion.
    >



    I wrote it but that was not what I was suggesting as I later pointed out,
    and you already acknowledged .. However, this misunderstanding has run and
    run in this thread .. you have to laugh :)))
    123Jim, Jan 26, 2011
    #20
    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. shruds
    Replies:
    1
    Views:
    747
    John C. Bollinger
    Jan 27, 2006
  2. M Wells
    Replies:
    0
    Views:
    129
    M Wells
    Oct 6, 2004
  3. g3000
    Replies:
    4
    Views:
    115
    g3000
    Dec 8, 2005
  4. visu
    Replies:
    4
    Views:
    277
  5. Replies:
    0
    Views:
    116
Loading...

Share This Page