• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

trouble with menu backgrounds


bigdave

Moderator
Staff member
#1
I'm pretty sure Toby will be fed up of me by now so thought I'd give him a break.

I'm building a site with a glassy menu bar running across the top of the page. The bar itself is set as a background image and the list within, that forms the menu has rollover images. The menu bar is 47px high but I cannot for the life of me get the list to sit vertically centered within the bar or get the rollover images to fill the 47px height. Anyone able to offer a solution?

menu bar as it is with one rollover active:


HTML:
HTML:
 <div id="navbar">
        <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="aerials.html">Aerials</a></li>
         <li><a href="satellites.html">Satelites</a></li>
         <li><a href="tvmounting.html">TV Mounting</a></li>
         <li><a href="portfolio.html">Portfolio</a></li>
         <li><a href="links.html">Links &amp Reviews</a></li>
        </ul>
       </div>
CSS:
Code:
#navbar ul{
	width: 990px;
	height: 47px;
	margin: auto;
	padding: 0px;
    list-style-type:none;
	background-image: url("../images/menubar.jpg");
	overflow: hidden;
}

#navbar li{
	float: left;
	padding: 0 10px;
	margin-left: 5px;
	}

#navbar li a{
	display: block;
	font-family: "Helvetica", Arial, Helvetica Neue, Geneva, sans-serif;
	text-decoration: none;
	color: #000000;
}
#navbar li a:hover{
	display: block;
	color: #000000;
	background-image:url("../images/menuhover.jpg");
	background-repeat:no-repeat;
	background-size:100% 100%;
}