Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    vertical-align !

    why this code os not working !?

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

    Code:
    <?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>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    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...
    Code:
    <?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>
    cthead

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i dont think thats what he's wanting at all.

    take a look at this:

    http://www.w3.org/TR/REC-CSS2/visude...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.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #4
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    <?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
    Last edited by angiras; 01-05-2004 at 06:50 AM.

  • #5
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts

    nearlly but ......

    it works ..... but it's a hard job only to get nearlly the middel

    Code:
    <?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
    Last edited by angiras; 01-05-2004 at 07:32 AM.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #7
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes it works fine !

    I keep the code :-))

    thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •