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

E

Eirik Eldorsen

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
 
E

Els

Eirik said:
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)
Click to expand...

Set a height on the td.
 
E

Eirik Eldorsen

Els said:
Set a height on the td.
Click to expand...

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>
 
E

Els

Eirik said:
Nope that did'nt help. Works in IE though. But not in Firefox and Opera.
Click to expand...

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

Els

cosmic said:
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>
Click to expand...

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?
 
E

Eirik Eldorsen

Ahhh perfect! :-D

Thank you!


Els said:
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.
Click to expand...
 
E

Els

cosmic said:
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>
...
Click to expand...

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

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.
Click to expand...

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?
Click to expand...

Someone's missing a clue here.
 
D

dingbat

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

Jedi Fans

cosmic said:
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>
Click to expand...

<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
 
E

Els

Jedi said:
<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>
Click to expand...

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
Click to expand...

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

jedifans

Els said:
I think that you'll have a problem with that method as soon as the
canvas of the browser is smaller than 790x500px.
Click to expand...

very true, but if set a width of 100% it wont work with the dead center
hack [in my experience] -see:
It's a step up, just keep climbing :p
Click to expand...
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 ;) )
 
E

Els

Els said:
I think that you'll have a problem with that method as soon as the
canvas of the browser is smaller than 790x500px.
Click to expand...

very true, but if set a width of 100% it wont work with the dead center
hack [in my experience] -see:
It's a step up, just keep climbing :p
Click to expand...
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,
Click to expand...

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 ;) )
Click to expand...

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

cosmic foo

Eirik Eldorsen said:
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
Click to expand...

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>
 
C

cosmic foo

Els said:
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?
Click to expand...

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 =
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?
Click to expand...

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?
 
S

SpaceGirl

Els said:
Eirik Eldorsen wrote:




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.
Click to expand...

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

Els

SpaceGirl said:
Els wrote:

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

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

cosmic foo

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.
Click to expand...

that's the spirit lad!
 
C

cosmic foo

Jedi Fans said:
<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
Click to expand...

good going.
is that style supposed to work or something?
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image shifts to the right when export the page to pdf 4
How to use PDF-lib and how to center each line of texts on the page? 1
How to wrap <td> content . 16
SendGrid email issue in responsive Gmail 1
Aligned to the left 3
How to have two html audio players on one page? 0
Help with Visual Lightbox: Scripts 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7

Members online

Total: 61 (members: 2, guests: 59)
Robots: 330

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top