...

View Full Version : vertical-align !



angiras
01-04-2004, 09:36 PM
why this code os not working !?

elements are allways on top ! (for MOzilla or IE)



<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>vertical-align</title>
<style type="text/css" media="all">
.vAlignM
{
width:50%;
height:48px;
text-align:center;
vertical-align:middle;
background-color:tan;
}
.vAlignB
{
width:50%;
height:48px;
text-align:center;
vertical-align:bottom;
background-color:tan;
}
</style>
</head>
<body>
<div class="vAlignM"><input type="button" value="ok"/></div>
<br />
<div class="vAlignB">!! Bottom !!</div>
</body>
</html>

coothead
01-04-2004, 10:23 PM
Hi there angiras
why this code os not working !?
elements are allways on top ! (for MOzilla or IE)
Of course, I am only guessing, but do you
want something a bit like this...:D
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>vertical-align</title>
<style type="text/css" media="all">
<!--
.vAlignM
{
width:50%;
height:48px;
text-align:center;
position:absolute;top:0;
background-color:tan;
}
.vAlignB
{
width:50%;
height:48px;
text-align:center;
position:absolute;top:1000px;
background-color:tan;
}
//-->
</style>
</head>
<body>
<div class="vAlignM"><input type="button" value="ok"onclick="location.href='#one'"/></div>
<div class="vAlignB"><a id="one">!! Bottom !!</a></div>
</body>
</html>

c:cool::cool:thead

ReadMe.txt
01-04-2004, 10:48 PM
i dont think thats what he's wanting at all.

take a look at this:

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

basically it specifies the alignemtn of an inline box wrelative to the line height, or the vertical alignment of a table-cell.

you can fix this by setting the display property to table-cell but this isn't supported by IE at all. Altho i think IE does vertical align on any elements if you put it in standards mode (hah)

the <?xml> declaration at the top of your page will actually put IE back into quirks mode, lose then then set the display to table cell and use the underscore hack to set it back for IE.

the other way of doing it involves setting up a box inside your container, then using abs pos to move it down 50% then a setting negative top margin equal to half of the hieght.

angiras
01-05-2004, 06:46 AM
thanks coothead but as said readme.txt that was not my problem ; -)

yes I must try with a box into a box ... and I prefer not to remove xml declaration

the same code is perfectly working for a tableCell



<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>vertical-align</title>
<style type="text/css" media="all">
.vAlignM
{
width:50%;
height:48px;
text-align:center;
vertical-align:middle;
background-color:tan;
}
.vAlignB
{
width:50%;
height:48px;
text-align:center;
vertical-align:bottom;
background-color:tan;
}
</style>
</head>
<body>
<div class="vAlignM"><input type="button" value="ok"/></div>
<br />
<div class="vAlignB">!! Bottom !!</div>
<table>
<tr>
<td class="vAlignM"><input type="button" value="ok"/></td>
<td class="vAlignB">!! Bottom !!</td>
</tr>
</table>
</body>
</html>


thx for all

angiras
01-05-2004, 07:28 AM
it works ..... but it's a hard job only to get nearlly the middel



<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>vertical-align</title>
<style type="text/css" media="all">
.Align
{
width:50%;
height:64px;
background-color:tan;
}
.Middle
{
width:24%;
height:50%;
text-align:center;
position:relative;
top:25%;
left:38%;
}
.btn
{
width:100%;
height:100%;
background-color:ivory;
}
.Bottom
{
width:26%;
height:28%;
text-align:center;
position:relative;
top:34%;
left:38%;
background-color:transparent;
}
</style>
</head>
<body>
<div class="Align"><div class="Middle"><input type="button" value="ok" class="btn"/></div></div>
<br />
<div class="Align"><div class="Bottom">!! Bottom !!</div></div>
</body>
</html>


the problem is the render of the text ...different for each browser
if you have a better method ?

thank you

ReadMe.txt
01-05-2004, 07:45 PM
<style type="text/css">
#center {
position: relative;
height: 20em;
width: 100%;
background: red;
color: black;
}
#center div {
position: absolute;
top:50%;
height: 2em;
width: 100%;
margin-top: -1em;
text-align: center;
background: white;
color: black;
}
</style>

<div id="center">
<div>
Vertically Centered Content
</div>
</div>



have a go with that, if you explictly set the height of the element, then give it a negative top margin equal to half the width while positioning it absolutely 50% down with respect to the relatively positioned parent, it should just about work.

angiras
01-05-2004, 07:58 PM
yes it works fine !

I keep the code :-))

thank you



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum