Link to home
Avatar of breeze351
breeze351

asked on

Fix a css menu for width

I'm really not good with css.  I purchased a menu maker plug in for DreamWeaver.  The plug in works.  My problem is with the results.  I would like to have the menu buttons spaced evenly across the top of the display.  I'm not sure what I have to change in the css.

I'm attaching a screen print as well as the css file in question.

Thanks
Glenn
Screen.jpg
styles.css
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Difficult to make recommendations without having access to the page.

Guessing I would do this
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* <=== CHANGE THIS FROM content-box TO border-box */
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
  width: 12.5%;    /* <=== ADD THIS */
  text-align: center;    /* <=== ADD THIS */
}

Open in new window


Changing the box-sizing means that you can set a width without having the padding / border affect how that fits on the page. So a width of 12.5% means that it will only take up 12.5% of the screen irrespective of borders and padding. This is useful as it allows us to set a size on the container and still specify a border and padding and not have to worry about those interfering with the width.
Avatar of breeze351
breeze351

ASKER

Works for the most part.  I changed the css as you described but I had to change the width to "10.99%".  Anything larger (ie. 11%) wraps the last button (Logout) onto a new line.

My new problem with the fix is that the drop down under "Data Entry" is screwed up.  It shows up as black with a red line.

Take a look.  The site is
I don't know what happened but the site is:
http://mrbreeze.net/test/index.php
There are a few things you need to do to fix this.

1. Change the margin on the li to padding
#cssmenu > ul > li {
  padding: 0 10px;   /* <=== CHANGE TO THIS */
}

Open in new window


2. Remove the height of the ul
#cssmenu > ul {
  border-bottom: 1px solid #252A30;
  border-top: 1px solid #252A30;
  -moz-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);
  background-color: #566171;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e7d8f), color-stop(1, #404854));
  background-image: -webkit-linear-gradient(top, #6e7d8f, #404854);
  background-image: -moz-linear-gradient(top, #6e7d8f, #404854);
  background-image: -o-linear-gradient(top, #6e7d8f, #404854);
  background-image: linear-gradient(#6e7d8f, #404854);
  height: 27px; /* <=== REMOVE THIS === */
  padding: 15px 15px 15px 5px;
}

Open in new window


3. change the height back to 12.5%
#cssmenu ul li {
	float: left;
	min-height: 1px;
	vertical-align: middle;
	width: 12.5%; /* <=== CHANGE TO THIS */
	text-align: center;
}

Open in new window


4. Change box-sizing on ul and li to border box
#cssmenu ul, #cssmenu li {
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* <=== CHANGE TO THIS */
}

Open in new window


The problem with using 10.99% is that it won't always work. 12.5% is the right value - you just need to massage the rest of the CSS to make the 12.5% work.

The key things were that the margin on your li was outside the box so increasing the space used - changing to padding and the box-sizing to border-box put the padding inside the container.
I did as directed, but I'm still having the problem with the drop down at mrbreeze.net "Data Entry" with the black/red.
Is this the code that's screwing me up

#cssmenu > ul > li.has-sub:hover > a {
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
You need to take into account the padding
#cssmenu ul ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	right: 0; /* <=== ADD THIS */
/*    width: 100%;  REMOVE THIS */
}

Open in new window


Then the border-radius has one too many curved bits
#cssmenu ul .has-sub ul {
	-moz-border-radius: 0 3px 3px 3px;
	-webkit-border-radius: 0 3px 3px 3px;
	border-radius: 0 0 3px 3px;  /* <=== REMOVE THE TOP RIGHT (2nd) VALUE MAKE IT 0 */
        ...
}

Open in new window


And give the <ul><ul> a margin to bring it in to match  the button
#cssmenu ul ul {
/*	margin-top: 0; REMOVE THIS */
	margin: 0 10px;
}

Open in new window

Remove the width: 170px
#cssmenu ul ul {
	width: 170px;
}

Open in new window

I followed the instructions but I'm still getting the same results when I scroll down on "Data Entry".
Attached is the new css
styles.css
I know this has to do with <li class="has-sub"><a href="#">Data Entry</a> and the "has-sub" in the style.css. But where is it?  I just want the drop down display to look like it does on the menu.  I've attached the css
style.css
You didn't do the last one - add the margin: 0 10px;

#cssmenu ul ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	right: 0;
	margin: 0 10px; /* <== ADD THIS */
}

Open in new window

Julian
No joy! Doesn't have to do with something on all the other "has.sub" tags?
Thanks for your patience.
Looks fine to me - try doing a cache refresh Shift + F5
User generated image
No. Scroll down on data entry and you'll see what I mean.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Thanks.  And it gets my partner off my ass
You are welcome.