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 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Need help with CSS Menu

    Hello all I need help fixing up the following menu.

    http://www.webstaurantstore.com/test...site/menu.html

    What I need to accomplish is the following:

    1. Centering the text and spacer's within the green bar
    2. text with double lines should lineup the same way as one line <li> text items.
    3. remove the last spacer image

    Please note I have a background mouse over image as well in place.

    You HELP is greatly appreciated.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell" />
    </head>
    
    <style type="text/css">
    #M1, #M3, #M8  {
    	height: 53px; 
    	text-align:center;
    	line-height: 14px !important;
    	white-space: normal;
    	
    }
    
    #Menu_Left { width: 5px; height: 53px; background: url(images/menu_left.jpg); float: left; }
    #Menu_Right { width: 5px; height: 53px; background: url(images/menu_right.jpg); float: right; }
    #MainMenu_Center {  display:inline-block; margin: auto 0;}
    .indentmenu a.li.last-child{ background-image:none; }
    
    .indentmenu{
    margin: 0 auto; /*main center of menu*/
    font-size: 12px;
    color: #fff;
    font-family: 'Cantarell', serif;
    font-weight: normal;
    width: 959px;
    height: auto;
    overflow: hidden;
    }
    
    .indentmenu ul{
    display:inline-block;
    margin: auto 0;
    padding: 0;
    width: 949px; /*width of menu*/
    height: 53px;
    background: black url(images/menu_bg.jpg) center center repeat-x;
    }
    
    .indentmenu ul li{
    display:inline;
    }
    
    .indentmenu  li a{
    float: left;
    color: white; /*text color*/
    text-decoration: none;
    padding-right: 17px;
    padding-left: 17px;
    background-image: url(images/spacer.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    line-height: 53px;
    }
    
    .indentmenu ul li a:hover, .indentmenu ul li .current{
    color: white !important; /*text color of selected and active item*/
    background: url(images/menu_mouse_over.jpg) center center repeat-x;
    }
    
    </style>
    
    <div class="indentmenu">
    
    
    <div id="MainMenu_Center">
    <ul class="indentmenu">
    	<li><a href="#" id="M1">RESTURANT<br />EQUIPMENT</a></li>
        <li><a href="#">SMALLWARES</a></li>
    	<li><a href="#" id="M3">STORAGE/<br />TRANSPORT</a></li>
    	<li><a href="#">TABLETOP</a></li>
    	<li><a href="#">DISPOSABLES</a></li>
        <li><a href="#">FURNITURE</a></li>
        <li><a href="#">CONSUMABLES</a></li>
        <li class="last-child"><a href="#" id="M8">JANITORIAL<br />SUPPLIES</a></li>
    </ul>
    </div>
    <div id="Menu_Left"></div>
    <div id="Menu_Right"></div>
    
    
    
    <body>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Basically I used padding to the left and top of the menu. I did cheat and entered a <br /> to turn the single lines into doubles. Here's the down and dirty code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell" />
    <style type="text/css">
    #M1, #M2, #M3, #M4, #M5, #M6, #M7, #M8  {
    padding-top: 12px;
    	height: 53px;
    	text-align:center;
    	line-height: 14px !important;
    	white-space: normal;
    }
    #M1{
    	padding-left: 41px;
    }
    #Menu_Left { width: 5px; height: 53px; background: url(images/menu_left.jpg); float: left; }
    #Menu_Right { width: 5px; height: 53px; background: url(images/menu_right.jpg); float: right; }
    #MainMenu_Center {  display:inline-block; margin: auto 0;}
    .indentmenu a.li.last-child{ background-image:none; }
    
    .indentmenu{
    margin: 0 auto; /*main center of menu*/
    font-size: 12px;
    color: #fff;
    font-family: 'Cantarell', serif;
    font-weight: normal;
    width: 959px;
    height: auto;
    overflow: hidden;
    }
    
    .indentmenu ul{
    display: block;;
    margin: auto 0;
    padding: 0;
    width: 949px; /*width of menu*/
    height: 53px;
    background: black url(images/menu_bg.jpg) center center repeat-x;
    }
    
    .indentmenu ul li{
    display:inline;
    }
    
    .indentmenu  li a{
    float: left;
    color: white; /*text color*/
    text-decoration: none;
    padding-right: 17px;
    padding-left: 17px;
    background-image: url(images/spacer.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    line-height: 53px;
    }
    
    .indentmenu ul li a:hover, .indentmenu ul li .current{
    color: white !important; /*text color of selected and active item*/
    background: url(images/menu_mouse_over.jpg) center center repeat-x;
    }
    
    </style>
    </head>
    <body>
    <div class="indentmenu">
    	<div id="MainMenu_Center">
    		<ul class="indentmenu">
    			<li><a href="#" id="M1">RESTAURANT<br />EQUIPMENT</a></li>
    		    <li><a href="#" id="M2"><br />SMALLWARES</a></li>
    			<li><a href="#" id="M3">STORAGE<br />TRANSPORT</a></li>
    			<li><a href="#" id="M4"><br />TABLETOP</a></li>
    			<li><a href="#" id="M5"><br />DISPOSABLES</a></li>
    		    <li><a href="#" id="M6"><br />FURNITURE</a></li>
    		    <li><a href="#" id="M7"><br />CONSUMABLES</a></li>
    		    <li class="last-child"><a href="#" id="M8">JANITORIAL<br />SUPPLIES</a></li>
    		</ul>
    	</div>
    </div>
    <div id="Menu_Left"></div>
    <div id="Menu_Right"></div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    This doesnt really work that great it's still screwy...

  • #4
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    The link is not valid.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    voloproductions, what's wrong with it?

  • #6
    New Coder
    Join Date
    Sep 2010
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    for starters it was not working with the nice rounded corners on firefox4 it was out of line on my screen so I will assume the same with IE...

    however its been revamped... but I still need to figure out how to remove the last spacer image...

    www.voloproductions.com/test.html


  •  

    Posting Permissions

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