Make star rating with CSS 1th/3 page _ Experience Exchange

Original:
Creating a Star rater using CSS

Link:
http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/

Copyright:
Copyright belongs to the original author, the translation of the document copyright |GREENGNN, and Blueidea.

First look at the effect

Step 1:xhtml

<ul class= "Star-rating" >
<li><a href= "#" title= "Rate this 1 star out of 5" class= "One-star" >1</a></li>
<li><a href= "#" title= "Rate this 2 stars out of 5" class= "Two-stars" >2</a></li>
<li><a href= "#" title= "Rate this 3 stars out of 5" class= "Three-stars" >3</a></li>
<li><a href= "#" title= "Rate this 4 stars out of 5" class= "Four-stars" >4</a></li>
<li><a href= "#" title= "Rate this 5 stars out of 5" class= "Five-stars" >5</a></li>
</ul>

Here only static technology, and then give the application of the system, you also add a program to try it, you can use Ajax to make a gorgeous effect

Step 2: Image | Graphics

To save your space and broadband, we use a GIF image, which is the scoring button.

Figure

Step 3:CSS

   . star-rating{
    list-style:none;/* Turn off the default List image bullets*/
    margin:3px/*i Wan ' t some spaces around this thing*/
    pad ding:0px; /* I ' m anal. I ' m pretty sure OL ' s have a default padding of 0px, but we ' ll set it to 0px just to be safe*/
    width: 100px; /*this list is 5 stars, each star are 20px, therefore it should be 5 x 20px = 100px wide*/
    height:20 px /* The height of each star is 20px. Since This is a horizontal list, we are set the list height to the height of the star.*/
    position: relative; /*very important. We'll be using absolute positioning later. We want to use Relatively-absolute positioning.*/
    background:url (star_rating.gif) top left Repeat-x; /* By repeating this image horizontally, the list would appear to have five stars.*/
   }

According to the code we know:
Removed the UL margin and padding as well as list-style, defined a high 20px wide 100px of a block

Down when the button elements are made, the following is the CSS

. star-rating li{
padding:0px; /* No padding at all*/
margin:0px; /* No margin at all*/
/*\*//*backslash hack, this causes IE5 Mac isn't to "this rule*/
Float:left; /* For all other browser, we are going to float left, this makes a horizontal list*/
* */////* End the IE5 backslash hack*/
}

This code allows Li to implement horizontal emissions and solve IE5 MAC bugs

Inherits the button element style above, then defines the mouse action, the following is the CSS

. star-rating Li A{
Display:block; /* We want a block item, so we can mess with its height and width*/
width:20px; /* Easy stuff, we want the "width to be" the same as the star width*/
height:20px; /* Same as the width*/
Text-decoration:none; /* Remove the underline from the link*/
Text-indent: -9000px; /* Indent the text off of the screen using a [url=http://www.mezzoblue.com/tests/revised-image-replacement/] Image-replacement Technique[/url], we dont want to the text anymore.*/
z-index:20; /*we ' ll come back to this*/
Position:absolute; /*we can now control the exact x and Y coordinates all Star, relative to the parent ul*/
padding:0px; /*once again, we don ' t need any padding*/
Background-image:none; /* We won't show the star*/
}

Star-rating Li a:hover{
Background:url (star_rating.gif) left bottom; /*this is where the magic is*/
Z-index:1; /*move this star to the bottom of the Z-index stack*/
left:0px; /*move This star all "way to" left, aligned with the side of the UL parent item*/
17.}

Down we have to consider how to show different stars, Samsung? What is the principle, we continue to display the background picture horizontally, then define the width of a and a:hover to differentiate between the selected stars.

Here is the CSS

   .star-rating a.one-star{
    left:0px;
   }  
   .star-rating a.one-star:hover{
    width : 20px;
   }
   .star-rating a.two-stars{
    left:20px;
  }
   star-rating a.two-stars:hover{
   width:40px
  }
   star-rating a.three-stars{
   left:40px
  }
   star-rating a.three-stars:hover{
   width:60px
  }
   star-rating a.four-stars{
   left:60px
  }
   star-rating a.four-stars:hover{
   width:80px
  }
   star-rating a.five-stars{
   left:80px
  }
   star-rating a.five-stars:hover{
   width:100px
  }

Here, this production is done

Current 1/3 page 123 Next read the full text