Jump to content

Problems With Space Between Button-divs In Menu-div.


Ridicule
 Share

Recommended Posts

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;

Edited by Ridicule
Link to comment
Share on other sites

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

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...