labaude Posted August 25, 2009 Share Posted August 25, 2009 On the left menu on the following page, i can not align the text verticaly in the middle :http://labaude.dyndns.org/test2/test2.htmlWhatever i try, the text in the menu stays at the top of the cell.vertical-align: middle;<td valign="middle">Anyone can help ? Any idea ?RegardsEric Link to comment Share on other sites More sharing options...
dsonesuk Posted August 25, 2009 Share Posted August 25, 2009 tables tut, tut, multiple id with same name, when they should unique.anyway when you have corrected the id (use class)below is similar to what you are trying to achieve<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#mytable td.menucell {vertical-align:middle; padding: 0; line-height: 13px; font-size:12px;font-family:sans-serif;font-size:11px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;height:31px;margin:0;padding-left:5px;padding-right:2px;width:155px;}#mytable td.menucell a{text-decoration:none; color: #000;}#mytable td.menucell a:hover{color: #fff;}</style></head><body><table width="980" border="1" cellspacing="0" cellpadding="0" id="mytable"> <tr> <td class="menucell"><a href="a">menu 1</a></td> <td rowspan="4"> </td> </tr> <tr> <td class="menucell"><a href="b">menu 2</a></td> </tr> <tr> <td class="menucell"><a href="c">menu 3</a></td> </tr> <tr> <td class="menucell"><a href="d">menu 4<br />Line2</a></td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
labaude Posted August 25, 2009 Author Share Posted August 25, 2009 I can see that your code is working but your style is applied to the td.Mine is applied to the TR and is different because it calls a different style due to the javascript behindI need those line being differents :<tr id='menu1'><tr id='menu2'>Is this what i need to change ? Because if this is the case i can't see how or can i also apply the code you sent below on the TD ?Thanks for your reply. tables tut, tut, multiple id with same name, when they should unique.anyway when you have corrected the id (use class)below is similar to what you are trying to achieve<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#mytable td.menucell {vertical-align:middle; padding: 0; line-height: 13px; font-size:12px;font-family:sans-serif;font-size:11px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;height:31px;margin:0;padding-left:5px;padding-right:2px;width:155px;}#mytable td.menucell a{text-decoration:none; color: #000;}#mytable td.menucell a:hover{color: #fff;}</style></head><body><table width="980" border="1" cellspacing="0" cellpadding="0" id="mytable"> <tr> <td class="menucell"><a href="a">menu 1</a></td> <td rowspan="4"> </td> </tr> <tr> <td class="menucell"><a href="b">menu 2</a></td> </tr> <tr> <td class="menucell"><a href="c">menu 3</a></td> </tr> <tr> <td class="menucell"><a href="d">menu 4<br />Line2</a></td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 25, 2009 Share Posted August 25, 2009 by assign the anchors as a block element height of <td>cell you cannot use a cells vertical align, to vertical align the text within that block.instead using display: block; and assigning background image to the anchor, assign the image to the cell itself.now that the anchor is no longer a block element that is same height of the cell, but the height of the text it can now be vertical align as required.example below:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#mytable td.menucell {vertical-align:middle; padding: 0; line-height: 13px; font-size:12px;font-family:sans-serif;font-size:11px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;height:31px;margin:0;padding-left:5px;padding-right:2px; color: #000;width:155px;background-image:url(tabBut_norm.png);}#mytable td.menucell a{ text-decoration:none;color: #000;}#mytable td.menucell:hover{ background-image:url(tabBut_hover.png);}#mytable td.menucell:hover a{ color: #fff;}</style></head><body><table width="980" border="1" cellspacing="0" cellpadding="0" id="mytable"> <tr> <td class="menucell"><a href="a">menu 1</a></td> <td rowspan="4"> </td> </tr> <tr> <td class="menucell"><a href="b">menu 2</a></td> </tr> <tr> <td class="menucell"><a href="c">menu 3</a></td> </tr> <tr> <td class="menucell"><a href="d">menu 4<br />Line2</a></td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
labaude Posted August 27, 2009 Author Share Posted August 27, 2009 Thanks a lot, I'm going to modify my code. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.