0 Replies Latest reply: Mar 27, 2011 5:58 AM by broomeGirl RSS

    Cant get background images to line up properly in navigation

    broomeGirl Community Member

      Hi I am trying to place an image behind a list item for my navigation  and as you can see not having great success.  I would appreciate any  help.  This is my code:

       

      TabbedNavigation.png

       

      HTML

       

      <div id="navigation">
      <ul>
      <li><a href="index.html" >Home</a></li>
      <li><a href="aboutUs.html">About Us</a></li>
      <li><a href="ourAircraft.html">Our Aircraft</a></li>
      <li><a href="safaris.html">Air Safaris</a></li>
      <li><a href="charterFlights.html">Charter Flights</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="photoGallery.html">Photo Gallery</a></li>
      <li><a href="contactUs.html" class="first">Contact Us</a></li>
      </ul>
      </div><!--END of navigation-->


      CSS
      #navigation {
      width:900px;
      padding: 0 0 0 0;
      margin: -28px auto 10px;
      border-bottom-width: 20px;
      border-bottom-style: solid;
      border-bottom-color: #000;
      }

      #navigation ul{
      margin:0 auto;
      padding:0;
      height:2em;
      list-style:none;}

      #navigation li{
      display:inline;
      background-image:url(../images/tabBg.png);
      background-repeat: no-repeat;
      margin:0;
      padding:5px 12px 8px 12px;}

      #navigation li a{
      text-decoration:none;
      font:  .8em/1em Verdana, Arial, Helvetica, sans-serif;
      color: #000;
      height:30px;
      padding: 10px;
      margin: 0;}