Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

trouble with menu backgrounds

Discussion in 'Website Coding & Programming Forum:' started by bigdave, Apr 30, 2013.

  1. bigdave

    bigdave Moderator Staff Member

    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:

     <div id="navbar">
             <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>
    #navbar ul{
    	width: 990px;
    	height: 47px;
    	margin: auto;
    	padding: 0px;
    	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-size:100% 100%;
  2. bigdave

    bigdave Moderator Staff Member

    padding-top: 17px;

    fixes all!! :icon_biggrin:

  3. Katedesign

    Katedesign Well-Known Member

    I was going to suggest padding - but you got there!!

Share This Page