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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    70
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help turning my image into nav using CSS sprites.

    Hi I have a working nav system but it lags when you view it on the net due to the individual images used. Ive searched many sites looking for a sprites tutorial to get my nav to work and have had no success. The image I want to use can be seen here and the top button is the normal and the one underneath is the hover. Heres is the image and html i would like to use:
    Code:
    <div id="menu">
    <ul> 
        <li class="home" ><a href="../index.html" title="Home"><span>Home</span></a></li>
             <li class="clients" ><a href="../clients.html" title="Clients"><span>Clients</span></a></li>
    <li class="professionals"><a href="#" title="Professionals"><span>Professionals</span></a></li>
    <li class="organisation"><a href="#" title="Organisation"><span>Organisation</span></a></li>
     <li class="contact"><a href="#" title="Contact Us"></a><span>Contact Us</span></li> </ul>
    </div>
    The problematic CSS im using for this can be found here:
    Code:
    #menu {
      width:205px;
      height:174px;
      font-size: 9px;
      background-image:url(../Images/Nav/navalllong.jpg);
      margin:0 0 0 25px;
      overflow: hidden;
    }
        
    #menu ul li {
      display: inline;
      margin: 0px;
      padding: 0px;
    }
        
    #menu ul li a {
      display: block;
      position:relative;
      height: 35px;
    }
        
    #menu ul li a:hover {
      background-image:url(../Images/Nav/navalllong.jpg);
    }
        
    #menu ul {
      margin: 0px;
      padding: 0px;
      list-style-type:none;
      height: 36px;
    }
        
    #menu span {
      display: none;
    }
    
    #menu li.home a {background-position: 0px 0px;}
    #menu li.clients a {background-position: 0px -35px;}
    #menu li.professionals a {background-position: 0px -70px}
    #menu li.organisation a {background-position: 0px -105px;}
    #menu li.contact a {background-position: 0px -140px;}
        
    #menu li.home a:hover {background-position: 0px -35px;}
    #menu li.clients a:hover {background-position: 0px -70px}
    #menu li.professionals a:hover {background-position: 0px -105px;}
    #menu li.organisation a:hover {background-position: 0px -140px;}
    #menu li.contact a:hover {background-position: 0px -175px;}
    This is a 3 tier nav so I havent included all the code but I only need this to be turned into a sprites menu.

    Any help will be greatly appreciated.

    thx

    Eddie

  • #2
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    Take a look at this CSS and see if you can draw your changes from it.
    Code:
    #nav {list-style:none; height: 30px; width: 410px; position: relative; margin-left: 480px; margin-top: 25px; font: bold 10px/30px "lucida sans", "trebuchet ms", arial, sans-serif;}
    #nav li { display: inline; /*IE7 fix */ margin-right: 5px;}
    #nav a { float: left; height: 30px; text-align: center; color: #fff; position: relative;background: #006766;}
    #nav li a:hover, #nav li a:focus, #nav li a:active {color:#fff; /*IE fix */
      background: #015152;}
    #nav a span { display: block; height: 30px;position: absolute; top: 0px;left: 0px;background: url(menu.jpg) no-repeat;}
    
    #nav .home,#nav .home span {width: 80px;background-position: 0 0;}
    #nav .home:active span, #nav .home:focus span,#nav .home:hover span {background-position: 0px -30px;}
    #nav .tuts,#nav .tuts span {width: 105px;background-position: -90px 0;}
    #nav .tuts:active span,#nav .tuts:focus span,#nav .tuts:hover span {background-position: -90px -30px;}
    #nav .downloads,#nav .downloads span {width: 127px; background-position: -190px 0;}
    #nav .downloads:active span, #nav .downloads:focus span,#nav .downloads:hover span {background-position: -190px -30px;}
    #nav .contact, #nav .contact span {width: 80px; background-position: -326px 0;}
    #nav .contact:active span, #nav .contact:focus span,#nav .contact:hover span {background-position: -326px -30px;}
    This is from a working sprites menu I found at this address…
    http://csscreator.com/node/29805
    Hope it helps.
    Dedicate some time to Educate your mind

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    70
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yah i finally got my thing to work, thx for link but it was hard to use the example above as this was set for a horizontal nav system, all i had to do for mine was set the top to 0 for all and play with the dimensions.


  •  

    Posting Permissions

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