Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: horizontal menu

  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    19
    Thanks
    7
    Thanked 0 Times in 0 Posts

    horizontal menu

    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.

    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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    .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.
    Last edited by Excavator; 02-08-2013 at 12:42 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mike316 (02-08-2013)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    19
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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 -
    Code:
    .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.

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .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.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mike316 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •