Ridicule Posted July 20, 2009 Share Posted July 20, 2009 Having problems positioning buttons in a menu layer so that they spread out evenly over the entire menu layer with an automated spacing between them. All buttons are of different sizes in width. I would also prefer that if I changed the size of one button or added/removed one they would align per automagic.The div's just contain the img (.png) and a simple php-script that links to new .php files on the site. With the current CSS, all buttons come directly after one another, except for ButtonFive which I've given an absolute positioning for tests. I've tried margins and spaces without any effect. What am I doing wrong? Here's the CSS: #MenuLayer { position:absolute; width:900px; height:30px; top: 260px; z-index:3; visibility:visible;}#ButtonOne { position:relative; left:auto; border-spacing:inherit; top:0px;}#ButtonTwo { position:relative; left:auto; border-spacing:inherit; top:0px}#ButtonThree { position:relative; left:auto; border-spacing:inherit; top:0px}#ButtonFour { position:relative; left:auto; border-spacing:inherit; top:0px}#ButtonFive { position:absolute; left:575px; top:0px; Link to comment Share on other sites More sharing options...
Hemlock Posted July 20, 2009 Share Posted July 20, 2009 Relative means that the div or concerning tag will follow the path of the default website layout, so from left to right.You could use absolute, but that will mean that you will have to manually position everything.Not sure what you HTML looks like, but once you close a relative div, you should automatically jump on the line under it. Link to comment Share on other sites More sharing options...
Ridicule Posted July 21, 2009 Author Share Posted July 21, 2009 So inherit was not the way to go then, what about relative? I never really learn the difference between these... Link to comment Share on other sites More sharing options...
dsonesuk Posted July 21, 2009 Share Posted July 21, 2009 border-spacing, i'm sure only works for tables, and IE does not recognise this property anyway.the only menu i have, that will do what you require, is this one. <!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><style type="text/css">#MenuLayer {position:absolute;width:900px;height:30px;top: 260px;z-index:3;visibility:visible;}#menu_align{display:table; padding:0; margin:0 auto; }#menu_align div { display:table-cell; }* html #menu_align div { float:left; }#menu_align a { float:left; width:auto; display:block; padding:4px 20px; color:#fff; /*background:#08c; */ text-decoration:none; background:url(menu.png) repeat-x; border-left: 1px solid white; }* html #menu_align a { float:left; }#menu_align a:hover { color:#00FFFF; /*background:#d4d4d4;*/ background:url(menu_h.png) repeat-x; }#MenuLayer {clear:both; text-decoration:none;}* html #MenuLayer {display:inline-block;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/var margin_calc=2;/*--*//*]]>*/</script> <!--[if lt IE 7]><script type="text/javascript">margin_calc=4;</script><![endif]--><script type="text/javascript">/*<![CDATA[*//*---->*/function sortmenu() { var menu_outer_width=document.getElementById("MenuLayer").offsetWidth; var menu_inner=document.getElementById("menu_align"); var menu_anch=menu_inner.getElementsByTagName("a"); var anch_total=menu_anch.length; var total_menu_widths=0; var menu_width; for(i=0;i<anch_total;i++) { menu_width = menu_anch[i].offsetWidth; total_menu_widths=total_menu_widths+menu_width; } end_margin_widths=((menu_outer_width-total_menu_widths)/(anch_total*margin_calc))/(anch_total-1); //alert(end_margin_widths) for(i=0;i<anch_total;i++) { if(anch_total>1) { if(i>0 && i<anch_total-1) { menu_anch[i].style.margin="0 "+(((menu_outer_width-total_menu_widths)/(anch_total*margin_calc))+end_margin_widths)+"px"; } else if(i==0) { menu_anch[i].style.marginRight=(((menu_outer_width-total_menu_widths)/(anch_total*margin_calc))+end_margin_widths)+"px"; } else if(i==anch_total-1) { menu_anch[i].style.marginLeft=(((menu_outer_width-total_menu_widths)/(anch_total*margin_calc))+end_margin_widths)+"px"; } } else { menu_anch[i].style.margin="0 auto"; } } }window.onload=sortmenu;/*--*//*]]>*/</script> </head><body><div id="MenuLayer"><div id="menu_align"><div class="Button"><a href="#">Home</a></div><div class="Button"><a href="#">Abouts Us</a></div><div class="Button"><a href="#">Hobbies</a></div><!--<div class="Button"><a href="#">Other</a></div><div class="Button"><a href="#">Contact Us</a></div><div class="Button"><a href="#">Home</a></div><div class="Button"><a href="#">Abouts Us</a></div><div class="Button"><a href="#">Home</a></div><div class="Button"><a href="#">Home</a></div><div class="Button"><a href="#">Hobbies</a></div> move open comment tag to test--></div></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.