how to vertical align a site to the center of the screen

Discussion in 'HTML' started by Eirik Eldorsen, Aug 3, 2005.

  1. I'm trying to vertical align and horisontal align my site to the center of
    the screen.

    I ended up with this code which seems to work in Opera, Firefox and IE:
    <body style="padding:0px;margin:0px;height:100%">
    <table cellpadding="0" cellspacing="0" style="height:98%;width:100%"
    border="0">
    <tr>
    <td valign="middle" align="center">
    THIS IS THE CENTER OF THE SCREEEN
    </td>
    </tr>
    </table>
    </body>

    However this is not valid html, because if I put:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    at the top of the page, the page is not centered any more.

    Is there a valid way to do this? (frames is not an option)


    Eirik
    Eirik Eldorsen, Aug 3, 2005
    #1
    1. Advertising

  2. Eirik Eldorsen

    Els Guest

    Eirik Eldorsen wrote:

    > I'm trying to vertical align and horisontal align my site to the center of
    > the screen.
    >
    > I ended up with this code which seems to work in Opera, Firefox and IE:
    > <body style="padding:0px;margin:0px;height:100%">
    > <table cellpadding="0" cellspacing="0" style="height:98%;width:100%"
    > border="0">
    > <tr>
    > <td valign="middle" align="center">
    > THIS IS THE CENTER OF THE SCREEEN
    > </td>
    > </tr>
    > </table>
    > </body>
    >
    > However this is not valid html, because if I put:
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > at the top of the page, the page is not centered any more.
    >
    > Is there a valid way to do this? (frames is not an option)


    Set a height on the td.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Aug 3, 2005
    #2
    1. Advertising

  3. "Els" <> skrev i melding
    news:1n6npu4dbm9jw$.ly3rs897vevk$...
    > Set a height on the td.


    Nope that did'nt help. Works in IE though. But not in Firefox and Opera.

    My code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Test</title>
    </head>
    <body style="height:100%">
    <table cellpadding="0" cellspacing="0" border="0"
    style="height:100%;width:100%"><tr><td valign="middle" align="center"
    style="height:100%;width:100%" height="100%">
    THE CENTER
    </td></tr></table>
    </body>
    </html>
    Eirik Eldorsen, Aug 3, 2005
    #3
  4. Eirik Eldorsen

    Els Guest

    Eirik Eldorsen wrote:

    > "Els" <> skrev i melding
    > news:1n6npu4dbm9jw$.ly3rs897vevk$...
    >> Set a height on the td.

    >
    > Nope that did'nt help. Works in IE though. But not in Firefox and Opera.


    One tip for debugging problems:
    Add *{border:1px solid red;} to your styles, and see what really
    happens.
    In your case, the text stays at the top, cause the td has 100% height
    of the table, which has 100% height of the body, which has 100% height
    of the html, which you didn't give any height ;-)

    html{height:100%;} (in a styleblock in the <head> or in your
    stylesheet) will help.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Aug 3, 2005
    #4
  5. Eirik Eldorsen

    Els Guest

    cosmic foo wrote:

    > i was just working on a similar problem.
    > the client wants the page to be filled at 800x600,
    > and centered if 1024x768.
    > so i came up with this (which i have a feeling is not so great,
    > but it seems to work in ie and firefox),
    >
    > <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    > 790px;">
    > <script language="JavaScript" type="text/javascript">
    > document.getElementById("abc").style.left = (screen.availWidth -
    > 800)/2 + "px";
    > </script>
    >
    > ..a bunch of absolute positioned divs..
    >
    > </div>


    Not too sure about the script (I don't speak JavaScript), but doesn't
    that mean centered in a maximized window only?
    Like, if my screensize is 1600x1200, and my browserwindow is only
    800x600, I'll only see the top left quarter of the page?

    And out of curiosity, wrt to the 'bunch of absolute positioned divs':
    what does your page look like when I make the text twice as big?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Aug 3, 2005
    #5
  6. Ahhh perfect! :-D

    Thank you!


    "Els" <> skrev i melding
    news:...
    > Eirik Eldorsen wrote:
    >
    >> "Els" <> skrev i melding
    >> news:1n6npu4dbm9jw$.ly3rs897vevk$...
    >>> Set a height on the td.

    >>
    >> Nope that did'nt help. Works in IE though. But not in Firefox and Opera.

    >
    > One tip for debugging problems:
    > Add *{border:1px solid red;} to your styles, and see what really
    > happens.
    > In your case, the text stays at the top, cause the td has 100% height
    > of the table, which has 100% height of the body, which has 100% height
    > of the html, which you didn't give any height ;-)
    >
    > html{height:100%;} (in a styleblock in the <head> or in your
    > stylesheet) will help.
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    Eirik Eldorsen, Aug 3, 2005
    #6
  7. Eirik Eldorsen

    Els Guest

    cosmic foo wrote:

    > "Els" <> wrote in message
    > news:...
    >> cosmic foo wrote:
    >>
    >>> i was just working on a similar problem.
    >>> the client wants the page to be filled at 800x600,
    >>> and centered if 1024x768.
    >>> so i came up with this (which i have a feeling is not so great,
    >>> but it seems to work in ie and firefox),
    >>>
    >>> <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    >>> 790px;">
    >>> <script language="JavaScript" type="text/javascript">
    >>> document.getElementById("abc").style.left = (screen.availWidth -
    >>> 800)/2 + "px";
    >>> </script>
    >>>
    >>> ..a bunch of absolute positioned divs..
    >>>
    >>> </div>

    >>
    >> Not too sure about the script (I don't speak JavaScript), but doesn't
    >> that mean centered in a maximized window only?
    >> Like, if my screensize is 1600x1200, and my browserwindow is only
    >> 800x600, I'll only see the top left quarter of the page?
    >>

    >
    > hey, you're right, thanks.
    > this works a lot better,
    > <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    > 800px;">
    > <script language="JavaScript" type="text/javascript">
    > document.getElementById("abc").style.left =
    > Math.max(0,(document.body.clientWidth - 800)/2) + "px";
    > </script>
    > ...


    Still doesn't mean anything to me - as I said, I don't read
    JavaScript. I'll take your word for it :)

    >> And out of curiosity, wrt to the 'bunch of absolute positioned divs':
    >> what does your page look like when I make the text twice as big?

    >
    > dude, it looks the same.


    You mean the letters are bigger and there is no problem with your
    absolutely positioned boxes? Well done :) URL?

    > when you watch tv, you don't expect things
    > to get larger or smaller by pushing a button, you purchase bigger
    > hardware to solve the problem, or you sit closer or farther away.


    Right! My Mum sits closer to my TV than I do (I have a small TV), to
    read the subtitles.
    However, those subtitles are the same size across all channels and
    programms. Now look at the variaty of websites. Tell me, which monitor
    should my Mum buy? Wouldn't it be much easier if she could just set
    her browser to not accept fonts any smaller than 20px? And if she
    bought a 23inch monitor to make sure she still gets to see whole
    sentences? Then you will just tell her 'sorry, but I prefer absolute
    sizes in my designs, so you can't read what I wrote'.
    That's fine for your personal website, but would your clients like to
    lose my Mum as a customer?

    > so who got the crazy idea that web pages should do all that?


    Someone's missing a clue here.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Human League - Together in Electric Dreams
    Els, Aug 3, 2005
    #7
  8. Eirik Eldorsen

    Guest

    The scary part is that you have clients. That means you're actually
    publishing your garbage somewhere, and someone thinks they're getting a
    usable website from it.

    Of course they're also paying you for this rubbish, but then that's the
    cost of them not recruiting carefully enough.
    , Aug 3, 2005
    #8
  9. Eirik Eldorsen

    Jedi Fans Guest

    cosmic foo wrote:
    > i was just working on a similar problem.
    > the client wants the page to be filled at 800x600,
    > and centered if 1024x768.
    > so i came up with this (which i have a feeling is not so great,
    > but it seems to work in ie and firefox),
    >
    > <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    > 790px;">
    > <script language="JavaScript" type="text/javascript">
    > document.getElementById("abc").style.left = (screen.availWidth -
    > 800)/2 + "px";
    > </script>
    >
    > ..a bunch of absolute positioned divs..
    >
    > </div>


    <div id="abc"
    style="position:absolute;top:50%;width:790px;margin-left:-380px;left:50%;height:500px;margin-top:-250px">
    blah blah blah. ANY content here
    </div>

    hth & gl...
    Kieren - btw i used to be a fixed layout person but now im a fixed width
    only person :p
    Jedi Fans, Aug 3, 2005
    #9
  10. Eirik Eldorsen

    Els Guest

    Jedi Fans wrote:

    > cosmic foo wrote:
    >> i was just working on a similar problem.
    >> the client wants the page to be filled at 800x600,
    >> and centered if 1024x768.
    >> so i came up with this (which i have a feeling is not so great,
    >> but it seems to work in ie and firefox),
    >>
    >> <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    >> 790px;">
    >> <script language="JavaScript" type="text/javascript">
    >> document.getElementById("abc").style.left = (screen.availWidth -
    >> 800)/2 + "px";
    >> </script>
    >>
    >> ..a bunch of absolute positioned divs..
    >>
    >> </div>

    >
    > <div id="abc"
    > style="position:absolute;top:50%;width:790px;margin-left:-380px;left:50%;height:500px;margin-top:-250px">
    > blah blah blah. ANY content here
    > </div>


    I think that you'll have a problem with that method as soon as the
    canvas of the browser is smaller than 790x500px.

    > hth & gl...
    > Kieren - btw i used to be a fixed layout person but now im a fixed width
    > only person :p


    It's a step up, just keep climbing :p

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Something Happens - Parachute
    Els, Aug 3, 2005
    #10
  11. Eirik Eldorsen

    Guest

    Els wrote:
    >> <div id="abc"
    >> style="position:absolute;top:50%;width:790px;margin-left:-380px;left:50%;height:500px;margin-top:-250px">
    >> blah blah blah. ANY content here
    >> </div>

    >
    > I think that you'll have a problem with that method as soon as the
    > canvas of the browser is smaller than 790x500px.


    very true, but if set a width of 100% it wont work with the dead center
    hack [in my experience] -see:
    <URL:http://www.wpdfd.com/editorial/thebox/deadcentre4.html> as im sure
    youve seen before

    >> Kieren - btw i used to be a fixed layout person but now im a fixed width
    >> only person :p

    >
    > It's a step up, just keep climbing :p
    >

    sorry if this more than double posts, tiscali uk is not showing me all
    messages/sending all my messages - aka annoying ¬¬ - having to use
    google groups now :(

    ya i noticed when i was visiting a uni and using a huge high res screen
    on a sun osaris machine how small my site was with a fixed height, and
    hence i redesigned to be variable height with a min-height in css so
    floats dont overlap footer lol, (IE of course doesnt support this - but
    i really couldnt give a monkeys arse lol as it isnt a business-class
    site, just a personal fansite ;) )
    , Aug 4, 2005
    #11
  12. Eirik Eldorsen

    Els Guest

    wrote:

    > Els wrote:
    >>> <div id="abc"
    >>> style="position:absolute;top:50%;width:790px;margin-left:-380px;left:50%;height:500px;margin-top:-250px">
    >>> blah blah blah. ANY content here
    >>> </div>

    >>
    >> I think that you'll have a problem with that method as soon as the
    >> canvas of the browser is smaller than 790x500px.

    >
    > very true, but if set a width of 100% it wont work with the dead center
    > hack [in my experience] -see:
    > <URL:http://www.wpdfd.com/editorial/thebox/deadcentre4.html> as im sure
    > youve seen before
    >
    >>> Kieren - btw i used to be a fixed layout person but now im a fixed width
    >>> only person :p

    >>
    >> It's a step up, just keep climbing :p
    >>

    > sorry if this more than double posts, tiscali uk is not showing me all
    > messages/sending all my messages - aka annoying ¬¬ - having to use
    > google groups now :(
    >
    > ya i noticed when i was visiting a uni and using a huge high res screen
    > on a sun osaris machine how small my site was with a fixed height, and
    > hence i redesigned to be variable height with a min-height in css so
    > floats dont overlap footer lol,


    And what happens on enlarging the text? How does the min-height adjust
    to the text taking up more space?

    >(IE of course doesnt support this - but
    > i really couldnt give a monkeys arse lol as it isnt a business-class
    > site, just a personal fansite ;) )


    min-height is easy to make work for IE: Just set a height, and IE will
    stretch the height when the contents get too high.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: David Bowie - Suffragette City
    Els, Aug 4, 2005
    #12
  13. Eirik Eldorsen

    cosmic foo Guest

    "Eirik Eldorsen" <> wrote in message
    news:dcqfeg$gri$...
    > I'm trying to vertical align and horisontal align my site to the center of
    > the screen.
    >
    > I ended up with this code which seems to work in Opera, Firefox and IE:
    > <body style="padding:0px;margin:0px;height:100%">
    > <table cellpadding="0" cellspacing="0" style="height:98%;width:100%"
    > border="0">
    > <tr>
    > <td valign="middle" align="center">
    > THIS IS THE CENTER OF THE SCREEEN
    > </td>
    > </tr>
    > </table>
    > </body>
    >
    > However this is not valid html, because if I put:
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > at the top of the page, the page is not centered any more.
    >
    > Is there a valid way to do this? (frames is not an option)
    >
    >
    > Eirik
    >
    >


    i was just working on a similar problem.
    the client wants the page to be filled at 800x600,
    and centered if 1024x768.
    so i came up with this (which i have a feeling is not so great,
    but it seems to work in ie and firefox),

    <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    790px;">
    <script language="JavaScript" type="text/javascript">
    document.getElementById("abc").style.left = (screen.availWidth -
    800)/2 + "px";
    </script>

    ..a bunch of absolute positioned divs..

    </div>
    cosmic foo, Aug 4, 2005
    #13
  14. Eirik Eldorsen

    cosmic foo Guest

    "Els" <> wrote in message
    news:...
    > cosmic foo wrote:
    >
    > > i was just working on a similar problem.
    > > the client wants the page to be filled at 800x600,
    > > and centered if 1024x768.
    > > so i came up with this (which i have a feeling is not so great,
    > > but it seems to work in ie and firefox),
    > >
    > > <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    > > 790px;">
    > > <script language="JavaScript" type="text/javascript">
    > > document.getElementById("abc").style.left = (screen.availWidth -
    > > 800)/2 + "px";
    > > </script>
    > >
    > > ..a bunch of absolute positioned divs..
    > >
    > > </div>

    >
    > Not too sure about the script (I don't speak JavaScript), but doesn't
    > that mean centered in a maximized window only?
    > Like, if my screensize is 1600x1200, and my browserwindow is only
    > 800x600, I'll only see the top left quarter of the page?
    >


    hey, you're right, thanks.
    this works a lot better,
    <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    800px;">
    <script language="JavaScript" type="text/javascript">
    document.getElementById("abc").style.left =
    Math.max(0,(document.body.clientWidth - 800)/2) + "px";
    </script>
    ....

    > And out of curiosity, wrt to the 'bunch of absolute positioned divs':
    > what does your page look like when I make the text twice as big?


    dude, it looks the same.
    when you watch tv, you don't expect things
    to get larger or smaller by pushing a button, you purchase bigger
    hardware to solve the problem, or you sit closer or farther away.
    so who got the crazy idea that web pages should do all that?

    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    cosmic foo, Aug 4, 2005
    #14
  15. Eirik Eldorsen

    SpaceGirl Guest

    Els wrote:
    > Eirik Eldorsen wrote:
    >
    >
    >>"Els" <> skrev i melding
    >>news:1n6npu4dbm9jw$.ly3rs897vevk$...
    >>
    >>>Set a height on the td.

    >>
    >>Nope that did'nt help. Works in IE though. But not in Firefox and Opera.

    >
    >
    > One tip for debugging problems:
    > Add *{border:1px solid red;} to your styles, and see what really
    > happens.
    > In your case, the text stays at the top, cause the td has 100% height
    > of the table, which has 100% height of the body, which has 100% height
    > of the html, which you didn't give any height ;-)
    >
    > html{height:100%;} (in a styleblock in the <head> or in your
    > stylesheet) will help.
    >


    Use the outlining feature in Firefox Web Dev bar... much easier!

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    # this post (c) Miranda Thomas 2005
    # explicitly no permission given to Forum4Designers
    # to duplicate this post.
    SpaceGirl, Aug 4, 2005
    #15
  16. Eirik Eldorsen

    Els Guest

    SpaceGirl wrote:

    > Els wrote:


    >> One tip for debugging problems:
    >> Add *{border:1px solid red;} to your styles, and see what really
    >> happens.

    >
    > Use the outlining feature in Firefox Web Dev bar... much easier!


    True. If you have Firefox and the Web Dev plugin ;-)
    (I'm so used to the * rule, that I usually forget I can use the
    outlining feature}

    Btw, there is a difference too. Try the Edit CSS feature in the same
    Web Dev bar adding *{border:1px solid red} to the stylesheet, and
    compare it to the outlining feature. Each has its advantages I think.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Isley Brothers - Harvest For The World
    Els, Aug 4, 2005
    #16
  17. Eirik Eldorsen

    cosmic foo Guest

    <> wrote in message
    news:...
    > The scary part is that you have clients. That means you're actually
    > publishing your garbage somewhere, and someone thinks they're getting a
    > usable website from it.
    >
    > Of course they're also paying you for this rubbish, but then that's the
    > cost of them not recruiting carefully enough.
    >


    that's the spirit lad!
    cosmic foo, Aug 4, 2005
    #17
  18. Eirik Eldorsen

    cosmic foo Guest

    "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    news:...
    > cosmic foo wrote:
    > > i was just working on a similar problem.
    > > the client wants the page to be filled at 800x600,
    > > and centered if 1024x768.
    > > so i came up with this (which i have a feeling is not so great,
    > > but it seems to work in ie and firefox),
    > >
    > > <div id="abc" style="position: absolute; top: 0px; left: 0px; width:
    > > 790px;">
    > > <script language="JavaScript" type="text/javascript">
    > > document.getElementById("abc").style.left = (screen.availWidth -
    > > 800)/2 + "px";
    > > </script>
    > >
    > > ..a bunch of absolute positioned divs..
    > >
    > > </div>

    >
    > <div id="abc"
    >

    style="position:absolute;top:50%;width:790px;margin-left:-380px;left:50%;hei
    ght:500px;margin-top:-250px">
    > blah blah blah. ANY content here
    > </div>
    >
    > hth & gl...
    > Kieren - btw i used to be a fixed layout person but now im a fixed width
    > only person :p


    good going.
    is that style supposed to work or something?
    cosmic foo, Aug 4, 2005
    #18
    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. Kay
    Replies:
    2
    Views:
    7,137
  2. Rabbit
    Replies:
    1
    Views:
    2,744
    Shimon Sim
    Feb 12, 2006
  3. shank

    vertical-align: bottom

    shank, Oct 2, 2003, in forum: HTML
    Replies:
    9
    Views:
    20,900
    brucie
    Oct 3, 2003
  4. Allison McGhee

    vertical-align: center

    Allison McGhee, Apr 13, 2006, in forum: HTML
    Replies:
    3
    Views:
    12,529
    Neredbojias
    Apr 13, 2006
  5. Steve Richter
    Replies:
    1
    Views:
    884
    Mark Rae
    Jun 24, 2007
Loading...

Share This Page