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
breeze351Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
0
breeze351Author 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
0
breeze351Author Commented:
I don't know what happened but the site is:
http://mrbreeze.net/test/index.php
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
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.
0
breeze351Author 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;
}
0
Julian HansenCommented:
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

0
breeze351Author 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
0
breeze351Author 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
0
Julian HansenCommented:
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

0
breeze351Author Commented:
Julian
No joy! Doesn't have to do with something on all the other "has.sub" tags?
Thanks for your patience.
0
Julian HansenCommented:
Looks fine to me - try doing a cache refresh Shift + F5
ss108.jpg
0
breeze351Author Commented:
No. Scroll down on data entry and you'll see what I mean.
0
Julian HansenCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
breeze351Author Commented:
Thanks.  And it gets my partner off my ass
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.