Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

vertical & horizontal centering not working with doctype

Status
Not open for further replies.
Stoemp

Stoemp

Programmer
Sep 25, 2002
389
BE
Hello there

I'm having a bit of a positioning problem. I want to center the content of my splash page horizontally and vertically. I managed to do so, but only when not including a doctype. Even loose HTML 4 doesn't work. Could anyone figure out for me what's wrong in my code?

Here's the link

Thanks

Steven
 
Sort by date Sort by votes
vertical-align will not do what you expect. this aspect of css only works the way you'd expect it to if the object's parent has an explicity set (static) height.

you'll need to use a little javascript if you really want this to be centered on the vertical axis.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
You cannot achieve vertical centering of your page if you use a DOCTYPE (and HTML/CSS with modern layout concepts) -- across multiple browser/operating system combinations. Horizontal centering will work with almost any DOCTYPE (and with none) - many different ways exist to achieve this.

Your page shows you are using tables for your layout. You may be able to achieve some semblence of vertical centering using table row and cell alignment.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Thank you guys for the tips. I will indeed try to fix it with aligning my table rows.

S.
 
Upvote 0 Downvote
I had a bit of a play. Here's a table-free solution that you can use if you know the height of the box you're centering:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <title>Example</title>

  <style type="text/css">
     html,body {
        min-height: 5em;
        height: 100%;
        margin: 0;
        padding: 0;
     }

     #spacer {
        height: 50%;
     }

     #box {
        margin: -2.5em auto 0;
        height: 5em;
        width: 20em;
        border: 1px solid black;
     }
  </style>
</head>
<body>
  <div id="spacer"></div>
  <div id="box">Stuck in the middle with You</div>
</body>
</html>
This isn't necessarily any "better" than using a table - I'll never understand why CSS is so rubbish at vertical alignment - but it seems to work in IE and FF.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Hi Chris

Thanks for the example. I played a bit around with it and I got it the right measures to fit my design. But I stumbled onto a problem: I use a fixed height and that makes the box to be too much down. Could you check out this code?
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <title>Example</title>

  <style type="text/css">
     html,body {
	background-color: #4f5f4d;
        min-height: 5em;
        height: 100%;
        margin: 0;
        padding: 0;
     }

     #spacer {
        height: 50%;
     }

     #box {
        margin: -2.5em auto 0;
        height: 300px;
        width: 100%;
        border-top: 1px solid black;
	border-bottom: 1px solid black;
	text-align: center;
     }
  </style>
</head>
<body>
  <div id="spacer"></div>
  <div id="box"><img src="[URL unfurl="true"]http://users.telenet.be/stoemp/tuinenameel/images/splash.jpg"[/URL] alt="Splash screen" /></div>
</body>
</html>

It must have something to do with the fixed height of my block and the 50% height of the spacer. How can I set a dynamic value for my spacer that will always center the box of 300 pixels high?

Best regards

Steven
 
Upvote 0 Downvote
In that case it would need to be
Code: 
     #box {
        margin: [red]-150px[/red] auto 0;
        height: 300px; ...
It works by setting the <div id="spacer"> to have a height of 50% of the screen - so the <div id="box"> will have its top aligned along the halfway point.

Then we give <div id="box"> a negative top margin of one half of its own height - this shifts it up enough to be properly vertically centred.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Dear Chris

Now I see the whole picture here. I started playing a bit and now I understand how the story goes. Thanks a lot for the help!

Steven
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
778
PeDa
PeDa
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
892
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top