horizontal menu

[mike316]

Hello
I have downloaded a template and I am trying to make some changes to it. I don't know much css, so I couldn't figure this out.
on the top, there is horizontal menu, like welcome, about us, contact us, etc.
The problem I am having is that the menu changes its width based on what words I write in the menu. For example, if I change "Contact Us" to just "Contact", the menu's width becomes smaller, because there are fewer letters in "contact us" than "contact". I want the menu's width to stay the same, not get smaller. Is that possible? Here is the relevant css code.

/***** menu *****/
.menu {
	padding:0 0 0 0; 
	width:100%;
	overflow:hidden;
}
#page1 .menu {margin-bottom:50px;}
.menu li {
	float:left; 
	position:relative;
	padding-left:2px;
	background:url(../images/menu-spacer.gif) left top no-repeat;
}
.menu li:first-child {background:none;}
.menu li a {
	display:block;
	height:55px; 
	font-size:16px; 
	line-height:51px; 
	padding:0 64px 0 63px; 
	color:#42413D; 
	background:url(../images/menu-a.png) left bottom repeat-x #fff;
}
.menu li:first-child > a {border-radius:12px 0 0 12px; padding:0 67px;}
.menu li.last > a {border-radius:0 12px 12px 0; padding:0 66px 0 64px; }
.menu li.active a,
.menu > li > a:hover {
	background-position:left top; 
	background-color:#e82d02;
	color:#fff;
}

[Excavator]

Hello mike316,
Try giving .menu li a width. You will need to figure out what the ul's 100% width is and divide by however many li menu items you have to figure out what fits.
Adding text-align: center might help appearances for a wider li with a smaller word in the anchor.


.../add
The way you have it now the width is determined by the anchor text and the padding highlighted in red below -

.menu li a {
	display:block;
	height:55px; 
	font-size:16px; 
	line-height:51px; 
	padding:0 64px 0 63px; 
	color:#42413D; 
	background:url(../images/menu-a.png) left bottom repeat-x #fff;
}

When you figure out some width for your li, you should probably remove that padding.

[mike316]

Originally Posted by Excavator

Hello mike316,
Try giving .menu li a width. You will need to figure out what the ul's 100% width is and divide by however many li menu items you have to figure out what fits.
Adding text-align: center might help appearances for a wider li with a smaller word in the anchor.


.../add
The way you have it now the width is determined by the anchor text and the padding highlighted in red below -

.menu li a {
	display:block;
	height:55px; 
	font-size:16px; 
	line-height:51px; 
	padding:0 64px 0 63px; 
	color:#42413D; 
	background:url(../images/menu-a.png) left bottom repeat-x #fff;
}

When you figure out some width for your li, you should probably remove that padding.

Hello Excavator,
sorry, but this is all Greek to me. can you please tell me what I have to change in that code? I will remove the part that you highlighted in red. but what do I add, and where? the calculation is not a big deal, I can try different numbers and see what works, but can you tell me the basic code that i have to insert, and where do I insert this? thanks in advance for your help.

[Carterr]

.menu li a {
display:block;
height:55px;
width:75px;
font-size:16px;
line-height:51px;
padding:0 64px 0 63px;
color:#42413D;
background:url(../images/menu-a.png) left bottom repeat-x #fff;
}


Try that. You have to add the width itself - ALternativly you can lower the padding, BUt the previous advice given was good enough.

[Excavator]

Originally Posted by mike316

Hello Excavator,
sorry, but this is all Greek to me. can you please tell me what I have to change in that code? I will remove the part that you highlighted in red. but what do I add, and where? the calculation is not a big deal, I can try different numbers and see what works, but can you tell me the basic code that i have to insert, and where do I insert this? thanks in advance for your help.

Just remove the padding I highlighted in red and play around with a width for you li's til you get one that works. Messing around with the CSS like this is a good way to figure out what each thing does. Just make sure you have a backup of your original version to go back to.