Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > how to vertical align a site to the center of the screen

Reply
Thread Tools

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

 
 
Eirik Eldorsen
Guest
Posts: n/a
 
      08-03-2005
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


 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      08-03-2005
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 vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
 
 
 
Eirik Eldorsen
Guest
Posts: n/a
 
      08-03-2005
"Els" <(E-Mail Removed)> skrev i melding
news:1n6npu4dbm9jw$.ly3rs897vevk$(E-Mail Removed).. .
> 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>


 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      08-03-2005
Eirik Eldorsen wrote:

> "Els" <(E-Mail Removed)> skrev i melding
> news:1n6npu4dbm9jw$.ly3rs897vevk$(E-Mail Removed).. .
>> 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 vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      08-03-2005
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 vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
Eirik Eldorsen
Guest
Posts: n/a
 
      08-03-2005
Ahhh perfect!

Thank you!


"Els" <(E-Mail Removed)> skrev i melding
news:(E-Mail Removed)...
> Eirik Eldorsen wrote:
>
>> "Els" <(E-Mail Removed)> skrev i melding
>> news:1n6npu4dbm9jw$.ly3rs897vevk$(E-Mail Removed).. .
>>> 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 vo. O resto imperfeito.
> - Renato Russo -



 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      08-03-2005
cosmic foo wrote:

> "Els" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> 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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Human League - Together in Electric Dreams
 
Reply With Quote
 
dingbat@codesmiths.com
Guest
Posts: n/a
 
      08-03-2005
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.

 
Reply With Quote
 
Jedi Fans
Guest
Posts: n/a
 
      08-03-2005
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;margi n-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
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      08-03-2005
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;margi n-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


It's a step up, just keep climbing

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Something Happens - Parachute
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div align=center> also affects align of dynamic dropdown item text Steve Richter ASP .Net 1 06-24-2007 07:11 PM
vertical-align: center Allison McGhee HTML 3 04-13-2006 01:23 PM
can a table align vertical-center on the web form Rabbit ASP .Net 1 02-12-2006 03:09 AM
text-align vs align tshad HTML 1 06-23-2005 10:29 PM
how to Align text left & vertical align middle Kay ASP .Net 2 07-25-2003 08:32 AM



Advertisments