advanced search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

designerd on 10/11/06


Tagged

css ajax javascript rating


Versions (?)


Who likes this?

6 people have marked this snippet as a favorite

luman
oso96_2000
mdavie
Hollow
vali29
Xek


star-rating

Published in: HTML 

Plain TextExpand 
  1. /*             styles for the star rater                */
  2. .star-rating{
  3. 	list-style:none;
  4. 	margin: 0px;
  5. 	padding:0px;
  6. 	width: 100px;
  7. 	height: 20px;
  8. 	position: relative;
  9. 	background: url(star_rating.gif) top left repeat-x;		
  10. }
  11. .star-rating li{
  12. 	padding:0px;
  13. 	margin:0px;
  14. 	/*\*/
  15. 	float: left;
  16. 	/* */
  17. }
  18. .star-rating li a{
  19. 	display:block;
  20. 	width:20px;
  21. 	height: 20px;
  22. 	text-decoration: none;
  23. 	text-indent: -9000px;
  24. 	z-index: 20;
  25. 	position: absolute;
  26. 	padding: 0px;
  27. }
  28. .star-rating li a:hover{
  29. 	background: url(star_rating.gif) left bottom;
  30. 	z-index: 1;
  31. 	left: 0px;
  32. }
  33. .star-rating a.one-star{
  34. 	left: 0px;
  35. }
  36. .star-rating a.one-star:hover{
  37. 	width:20px;
  38. }
  39. .star-rating a.two-stars{
  40. 	left:20px;
  41. }
  42. .star-rating a.two-stars:hover{
  43. 	width: 40px;
  44. }
  45. .star-rating a.three-stars:hover{
  46. 	width: 60px;
  47. }
  48. .star-rating a.three-stars{
  49. 	left: 40px;
  50. }
  51. .star-rating a.four-stars{
  52. 	left: 60px;
  53. }	
  54. .star-rating a.four-stars:hover{
  55. 	width: 80px;
  56. }
  57. .star-rating a.five-stars{
  58. 	left: 80px;
  59. }
  60. .star-rating a.five-stars:hover{
  61. 	width: 100px;
  62. }
  63.  
  64.  
  65. <ul class='star-rating'>
  66.   <li><a href='#' title='Rate this 1 star out of 5' class='one-star'>1</a></li>
  67.   <li><a href='#' title='Rate this 2 stars out of 5' class='two-stars'>2</a></li>
  68.   <li><a href='#' title='Rate this 3 stars out of 5' class='three-stars'>3</a></li>
  69.   <li><a href='#' title='Rate this 4 stars out of 5' class='four-stars'>4</a></li>
  70.   <li><a href='#' title='Rate this 5 stars out of 5' class='five-stars'>5</a></li>
  71. </ul>

Report this snippet 

You need to login to post a comment.