Posted By

gamblelyn on 05/31/11


Tagged

css html


Versions (?)

nav sprites


 / Published in: HTML
 

sprite is 300px x 300px

/REVIEW OF POSITIONING: The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions/

  1. /*---css--- sprite is 300px x 300px with 100px by 100px shapes*/
  2.  
  3. #nav{position: relative; top: 15px; max-height: 120px; left: -25px;}
  4.  
  5. #nav ul {display: block; max-height: 100px;}
  6.  
  7. #nav ul li { font-family: 'Arial Black', sans-serif; font-size: 15px;
  8. letter-spacing: 3px; text-decoration: none; text-transform: capitalize; line-height: 20px; text-align:center; }
  9.  
  10. #nav ul li a {display: block; color: #fff; width: 100px; height: 100px; background: url("images/homepagenavsprite.png") no-repeat; float: left;
  11. }
  12. #nav ul li a span{display: block; margin-top: 35px; margin-left: 18px;}
  13.  
  14. #nav li.home a, #nav li.home a:link, #nav li.home a:visited {background-position: 0 0; outline:0; }
  15. #nav li.home a:hover {background-position: 0 -100px;}
  16. #nav li.home a:focus, a:active {background-position: 0 -200px;border: none; outline:0;}
  17.  
  18. #nav li.work a, #nav li.work a:link, #nav li.work a:visited {background-position:0 0; }
  19. #nav li.work a:hover {background-position: 0px -100px;}
  20. #nav li.work a:focus, a:active {background-position: 0 -200px;border: none; outline:0;}
  21.  
  22. #nav li.blog a, #nav li.blog a:link, #nav li.blog a:visited {background-position:0 0; }
  23. #nav li.blog a:hover {background-position: 0px -100px;}
  24. #nav li.blog a:focus, a:active {background-position: 0 -200px; border: none; outline:0;}
  25.  
  26. ------------html
  27.  
  28. <div id="nav">
  29. <ul id="navsprite">
  30. <li class="home"><a href="#"><span>About</span></a></li>
  31. <li class="work"><a href="#"><span>Work</span></a></li>
  32. <li class="blog"><a href="#"><span>Blog</span></a></li>
  33. </ul>
  34. </div>

Report this snippet  

You need to login to post a comment.