Posted By

komposition on 04/11/08


Tagged

css textmate


Versions (?)

CSS Navigation Template(2008-04-11)


 / Published in: Other
 

  1. /********************
  2. Navigation
  3. ********************/
  4. ul#navi {
  5. list-style:none;
  6. }
  7.  
  8. #navi li {
  9. float:left;
  10. }
  11.  
  12. #navi li a {
  13. display: block;
  14. width: 105px;
  15. height: 25px;
  16. background: transparent url('images/navigation.png') no-repeat;
  17. text-indent: -9999px;
  18. }
  19.  
  20. #navi #navi01 a:link,
  21. #navi #navi01 a:visited { background-position: -10px 0;}
  22. #page01 #navi #navi01 a { background-position: -10px -75px;}
  23. #navi #navi01 a:hover { background-position: -10px -25px;}
  24. #navi #navi01 a:active { background-position: -10px -50px;}
  25.  
  26. #navi #navi02 a:link,
  27. #navi #navi02 a:visited { background-position: -115px 0;}
  28. #page02 #navi #navi02 a { background-position: -115px -75px;}
  29. #navi #navi02 a:hover { background-position: -115px -25px;}
  30. #navi #navi02 a:active { background-position: -115px -50px;}
  31.  
  32. #navi #navi03 a:link,
  33. #navi #navi03 a:visited { background-position: -220px 0;}
  34. #page03 #navi #navi03 a { background-position: -220px -75px;}
  35. #navi #navi03 a:hover { background-position: -220px -25px;}
  36. #navi #navi03 a:active { background-position: -220px -50px;}
  37.  
  38. #navi #navi04 a:link,
  39. #navi #navi04 a:visited { background-position: -325px 0;}
  40. #page04 #navi #navi04 a { background-position: -325px -75px;}
  41. #navi #navi04 a:hover { background-position: -325px -25px;}
  42. #navi #navi04 a:active { background-position: -325px -50px;}
  43.  
  44. #navi #navi05 a:link,
  45. #navi #navi05 a:visited { background-position: -430px 0;}
  46. #page05 #navi #navi05 a { background-position: -430px -75px;}
  47. #navi #navi05 a:hover { background-position: -430px -25px;}
  48. #navi #navi05 a:active { background-position: -430px -50px;}
  49.  
  50. #navi #navi06 a:link,
  51. #navi #navi06 a:visited { background-position: -535px 0;}
  52. #page06 #navi #navi06 a { background-position: -535px -75px;}
  53. #navi #navi06 a:hover { background-position: -535px -25px;}
  54. #navi #navi06 a:active { background-position: -535px -50px;}
  55.  
  56.  
  57. #navi #navi07 a:link,
  58. #navi #navi07 a:visited { background-position: -640px 0;}
  59. #page07 #navi #navi07 a { background-position: -640px -75px;}
  60. #navi #navi07 a:hover { background-position: -640px -25px;}
  61. #navi #navi07 a:active { background-position: -640px -50px;}
  62.  
  63. #navi #navi07 a:link,
  64. #navi #navi07 a:visited { background-position: -640px 0;}
  65. #navi #navi07 a:hover { background-position: -640px -25px;}
  66. #navi #navi07 a:active { background-position: -640px -50px;}
  67.  
  68. #navi #navi00 a:link,
  69. #navi #navi00 a:visited { background-position: -770px 0;}
  70. #page00 #navi #navi00 a { background-position: -770px -75px;}
  71. #navi #navi00 a:hover { background-position: -770px -25px;}
  72. #navi #navi00 a:active { background-position: -770px -50px;}

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jagannath on April 11, 2008

Posted By: endorphin on November 13, 2008

A source would help me figure out how to use #page01, #page02 feature..?

Posted By: endorphin on November 13, 2008

also:

ul#navi { list-style:none; }

should be:

navi ul{

list-style:none;

}

sorry if the code didn't render correctly..

You need to login to post a comment.