#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0

    problem CSS Horizontal nav w/image swap not working


    Can't figure out what I did wrong...I am trying to have a horizontal nav bar with background image swap (text for link is build into the image) and I cannot get the image to swap or the link to be active. Can someone help me figure out what I did wrong?

    Here is a link to the test page:
    http://tacticaloffen...om/indexNew.php

    Here is my HTML:
    Code:
          <div id="headerTopNav">
          	<ul id="topNav">
            	<li id="home"><a href="index.php" class="home">Home</a></li>
              <li id="spacer"></li>
              <li id="about"><a href="about.php" class="about">About</a></li>
              <li id="spacer"></li>
              <li id="products"><a href="shop/index.php" class="products">Products</a></li>
              <li id="spacer"></li>
              <li id="wpNews"><a href="news/index.php" class="wpNews">News</a></li>
              <li id="spacer"></li>
              <li id="contact"><a href="contact.php" class="contact">Contact</a></li>
            </ul>
          </div>
    Here is my css:

    Code:
    #headerTopNav {
    	position:absolute;
    	top:11px;
    	left:520px;
    	height:30px;
    }
    #topNav {
    	height:30px;
    	padding:0;
    	margin:0;
    	display:inline;
    }
    #topNav li {
    	list-style:none;
    	float:left;
    }
    ul#topNav #spacer {
    	background:url(../img/nav/navSpacer.png) no-repeat;
    	background-repeat:no-repeat;
    	width:1px;
    	height:30px;
    }
    
    #topNav a {
    	display:inline-block;
    	height:30px;
    	text-indent:-9000px;
    }
    #topNav #home, #topNav a.home,
    #topNav #about, #topNav a.about,
    #topNav #products, #topNav a.products,
    #topNav #wpNews, #topNav a.wpNews,
    #topNav #contact, #topNav a.contact {
    	height:30px;
    }
    #topNav #home, #topNav a.home {
    	width:77px;
    }
    #topNav #about, #topNav a.about {
    	width:102px;
    }
    #topNav #products, #topNav a.products {
    	width:99px;
    }
    #topNav #wpNews, #topNav a.wpNews {
    	width:72px;
    }
    #topNav #contact, #topNav a.contact {
    	width:92px;
    }
    
    #topNav #home {	
    	background:url(../img/nav/nav_map.png) no-repeat -246px 0px;
    }
    #topNav #home:hover {
    	background-position: -246px -30px;
    }
    #topNav #about {
    	background:url(../img/nav/nav_map.png) no-repeat 0px 0px;
    }
    #topNav #about:hover {
    	background-position: 0px -30px;
    }
    #topNav #products {
    	background:url(../img/nav/nav_map.png) no-repeat -570px 0px;
    }
    #topNav #products:hover {
    	background-position: -570px -30px;
    }
    #topNav #wpNews {
    	background:url(../img/nav/nav_map.png) no-repeat -447px -60px;
    }
    #topNav #wpNews:hover {
    	background-position: -447px -90px;
    }
    #topNav #contact {
    	background:url(../img/nav/nav_map.png) no-repeat -140px -60px;
    }
    #topNav #contact:hover {
    	background-position: -140px -90px;
    }
    Any help would be greatly appreciated!!! Thank you

    Clint
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Resolved. My logo was in the way.

IMN logo majestic logo threadwatch logo seochat tools logo