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
CSS

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

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.
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
breeze351

ASKER
I don't know what happened but the site is:
http://mrbreeze.net/test/index.php
Your help has saved me hundreds of hours of internet surfing.
fblack61
Julian Hansen

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.
breeze351

ASKER
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;
}
Julian Hansen

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

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
breeze351

ASKER
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
breeze351

ASKER
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
Julian Hansen

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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
breeze351

ASKER
Julian
No joy! Doesn't have to do with something on all the other "has.sub" tags?
Thanks for your patience.
Julian Hansen

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

ASKER
No. Scroll down on data entry and you'll see what I mean.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION 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
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
breeze351

ASKER
Thanks.  And it gets my partner off my ass
Julian Hansen

You are welcome.