Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Horizontal Nav with image swap not working

    Can't figure out what I did wrong... The image swap does not work and neither does the link. Can someone help me out here and help me figure out what I did wrong?

    http://tacticaloffense.com/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 cod that pertains to the nav:

    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 as I am at a loss...

    Thanks,

    Clint
    Last edited by clint6998; 11-29-2012 at 06:30 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello clint6998,
    That menu works fine for me, links and rollovers both. You must have fixed it?
    Both the Home/About Us/Products/News/Contact and the Cart Contents/Checkout/My Account work.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •