Posted By

komposition on 03/15/08


Tagged

css textmate


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

adamsimms
basicmagic
rasitozcan


1 image navigtion CSS sprite sample


 / Published in: Other
 

  1. #sideNavi li a{
  2. display: block;
  3. width: 150px;
  4. height: 25px;
  5. background: transparent url('../images/some_image.jpg') no-repeat;
  6. text-indent: -9999px;
  7. }
  8.  
  9. #page1 #sideNavi .navi1 a{ background-position: -450px 0;}
  10. #sideNavi .navi1 a:link, #sideNavi .navi1 a:visited{background-position: 0 0;}
  11. #sideNavi .navi1 a:hover{background-position: -150px 0;}
  12. #sideNavi .navi1 a:active{background-position: -300px 0;}
  13.  
  14. #page1 #sideNavi .navi1 a{ background-position: -450px -25px;}
  15. #sideNavi .navi2 a:link, #sideNavi .navi2 a:visited{background-position: -770px -25px;}
  16. #sideNavi .navi2 a:hover{background-position: -150px -25px;}
  17. #sideNavi .navi2 a:active{background-position: -300px -25px;}
  18.  
  19. #page1 #sideNavi .navi1 a{ background-position: -450px 0;}
  20. #sideNavi .navi3 a:link, #sideNavi .navi3 a:visited{background-position: -770px -50px;}
  21. #sideNavi .navi3 a:hover{background-position: -150px -50px;}
  22. #sideNavi .navi3 a:active{background-position: -300px -50px;}
  23.  
  24. #page1 #sideNavi .navi1 a{ background-position: -450px 0;}
  25. #sideNavi .navi4 a:link, #sideNavi .navi4 a:visited{background-position: -770px -75px;}
  26. #sideNavi .navi4 a:hover{background-position: -150px -75px;}
  27. #sideNavi .navi4 a:active{background-position: -300px -75px;}
  28.  
  29. #page1 #sideNavi .navi1 a{ background-position: -450px 0;}
  30. #sideNavi .navi5 a:link, #sideNavi .navi5 a:visited{background-position: -770px -100px;}
  31. #sideNavi .navi5 a:hover{background-position: -150px -100px;}
  32. #sideNavi .navi5 a:active{background-position: -300px -100px;}
  33.  
  34. #page1 #sideNavi .navi1 a{ background-position: -450px 0;}
  35. #sideNavi .navi6 a:link, #sideNavi .navi6 a:visited{background-position: -770px -125px;}
  36. #sideNavi .navi6 a:hover{background-position: -150px -125px;}
  37. #sideNavi .navi6 a:active{background-position: -300px -125px;}
  38.  

Report this snippet  

You need to login to post a comment.