By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,214 Members | 2,066 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,214 IT Pros & Developers. It's quick & easy.

vertical-align

P: n/a
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
Jul 21 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
pieter blomme wrote:

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.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 21 '05 #2

P: n/a
in comp.infosystems.www.authoring.stylesheets, pieter blomme wrote:
ce[n]ter this vertically


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

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #3

P: n/a
me
"pieter blomme" <bl**********@hotmail.com> wrote in message
news:5f**************************@posting.google.c om...
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


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>
Jul 21 '05 #4

P: n/a
me
"me" <anonymous@_.com> wrote in message
news:11************@corp.supernews.com...
"pieter blomme" <bl**********@hotmail.com> wrote in message
news:5f**************************@posting.google.c om...
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


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>


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
Jul 21 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.