...

View Full Version : Need help with CSS Menu



voloproductions
04-01-2011, 05:34 PM
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.



<!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>

sunfighter
04-02-2011, 02:22 AM
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:


<!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>

voloproductions
04-02-2011, 04:08 PM
This doesnt really work that great it's still screwy...

Mooseman
04-02-2011, 08:41 PM
The link is not valid.

sunfighter
04-02-2011, 09:04 PM
voloproductions, what's wrong with it?

voloproductions
04-03-2011, 01:18 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum