vertical-align

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

pieter blomme - 27 Mar 2005 09:42 GMT

I'm making a site about Java(programming language). The problem is
that I worked with layers(div). I wanted to make a title in 1 of
these layers and ceter this vertically. But this doesn't look to
work.
This is how I did it:

<html>
<head>
<title>De programmeertaal Java</title>
<style>
h1 {font-size:50; font-family:Times New Roman; text-align:center;}
</style>
</head>
<body>
<div id="logo" style="position:absolute; visibility:inherit;
width:250px; height:250px;
left:5; top:5; z-index:4;
background-image:url('logo_background.png')">
<img src="javalogo.png"></img>
</div>

<div id="header" style="position:absolute; visibility:inherit;
width:740px; height:200px;
left:255; top:5; z-index:2;
background-image:url('header_background.png')">
<h1>De programmeertaal Java</h1>
</div>

</body>
</html>

Somebody has got an idea?

Thanks,
Blomme Thomas

Reply to this Message

David Dorward - 27 Mar 2005 09:20 GMT

> The problem is that I worked with layers(div). I wanted to make a title
> in 1 of these layers and ceter this vertically. But this doesn't look to
> work.

Your technique appears to be based on guesswork as to what font size the
text will end up as. You can't know this for sure, so its bound to fail.

The simple way is:

#container { display: table-cell; vertical-align: middle; }

... but Internet Explorer doesn't support this. If you can afford to have
your style ignored by that overly common user-agent, then that's the way to
go about it. Otherwise, you're rather stuck.

> h1 {font-size:50; font-family:Times New Roman; text-align:center;}

You need to validate your CSS. 50 what? You should probably read
http://css-discuss.incutio.com/?page=FontSize too.

> left:5; top:5; z-index:4;

More syntax errors

> <img src="javalogo.png"></img>

The alt attribute is required, the </img> tag violates the HTML
compatability guidelines.

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

Lauri Raittila - 27 Mar 2005 11:23 GMT

> ce[n]ter this vertically

http://www.student.oulu.fi/~laurirai/www/css/middle/

Signature

Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

Reply to this Message

me - 29 Mar 2005 03:41 GMT

> I'm making a site about Java(programming language). The problem is
> that I worked with layers(div). I wanted to make a title in 1 of
[quoted text clipped - 31 lines]
> Thanks,
> Blomme Thomas

In the following I moved h1 into the div named logo, I also got rid of the
50 in the h1 style, you didn't specify the units and it looked too big to
fit in the div without wrapping. See below:
Good Luck,
me

<html>
<head>
<title>De programmeertaal Java</title>
<style>
h1 {font-family:"Times New Roman"; text-align:center;}
</style>
</head>
<body>
<div id="logo" style="position:absolute; visibility:inherit;
width:250px; height:250px;
left:5; top:5; z-index:4;
background-image:url('logo_background.png')">
<img src="javalogo.png"><img>
<h1>De programmeertaal Java</h1></div>

<div id="header" style="position:absolute; visibility:inherit;
width:740px; height:200px;
left:255; top:5; z-index:2;
background-image:url('header_background.png')"> </div>

</body>
</html>

Reply to this Message

me - 29 Mar 2005 03:47 GMT

> > I'm making a site about Java(programming language). The problem is
> > that I worked with layers(div). I wanted to make a title in 1 of
[quoted text clipped - 60 lines]
> </body>
> </html>

My mistake, I centered it horizontally. If I'm to have any chance of fixing
this I need to see the whole page, post URL please.
Signed,
me

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / March 2005

vertical-align