Fix a css menu for width

breeze351
breeze351 used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Author

Commented:
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

Author

Commented:
I don't know what happened but the site is:
http://mrbreeze.net/test/index.php
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Author

Commented:
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;
}
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Author

Commented:
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

Author

Commented:
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
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Author

Commented:
Julian
No joy! Doesn't have to do with something on all the other "has.sub" tags?
Thanks for your patience.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Looks fine to me - try doing a cache refresh Shift + F5
ss108.jpg

Author

Commented:
No. Scroll down on data entry and you'll see what I mean.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Two small changes
#cssmenu ul .has-sub li:hover > a::after {
	border-left: 0 none;
	background-color: #c35f54;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ea5f51), color-stop(1, #a9463b));
	background-image: -webkit-linear-gradient(top, #ea5f51, #a9463b);
	background-image: -moz-linear-gradient(top, #ea5f51, #a9463b);
	background-image: -o-linear-gradient(top, #ea5f51, #a9463b);
	background-image: linear-gradient(#ea5f51, #a9463b);
	-moz-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
	-webkit-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
	box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
	content: '';
	height: 100%;
	width: 6px;
	position: absolute;
	right: 0;
	top: 0;
	left: 0; /* <=== ADD THIS */
}
#cssmenu ul ul li {
	float: none;
	width: 100%; /* ADD THIS */
}

Open in new window

Author

Commented:
Thanks.  And it gets my partner off my ass
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial