Create star rating page 1/3 with css

Original article:
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, and the translation documents are copyrighted by myself | 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 we will only introduce static technologies, and then we will introduce the system applications. You can also add your own programs to try them and use ajax to make brilliant results.

Step 2: Image | Graphics

To save your space and bandwidth, we use a gif image, which is the button for scoring.

Figure

Step 3: CSS

. Star-rating {
List-style: none;/* turn off the default list image bullets */
Margin: 3px;/* I wan't some space around this thing */
Padding: 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 is 20px, therefore it shoshould be 5 x 20px = 100px wide */
Height: 20px;/* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star .*/
Position: relative;/* Very important. We will 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 will appear to have five stars .*/
}

According to the Code, we know:
Remove ul's margin, padding, and list-style, and define a block with a width of 20 PX and PX.

When the button element is created, the following is css

. Star-rating li {
Padding: 0px;/* no padding at all */
Margin: 0px;/* no margin at all */
/* \ * // * Backslash hack, this causes IE5 Mac NOT to see this rule */
Float: left;/* for any 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 emission and solve IE5 MAC bug

Inherit the above button element style and then define the mouse action. The following is css

. Star-rating li {
Display: block;/* we want a block item, so that 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 the screen using a [url = http://www.mezzoblue.com/tests/revised-image-replacement/]image-replacement technique [/url], we dont want to see the text anymore .*/
Z-index: 20;/* we'll come back to this */
Position: absolute;/* we can now control the exact x and y coordinates of each star, relative to the parent UL */
Padding: 0px;/* once again, we don't need any padding */
Background-image: none;/* we will not show the star */
}

13 .. star-rating li a: hover {
14. background: url(star_rating.gif) left bottom;/* this is where the magic is */
15. z-index: 1;/* move this star to the bottom of the z-index stack */
16. left: 0px;/* move this star all the way to the left, aligned with the side of the UL parent item */
17 .}

Next, we need to consider how we can display different stars, Samsung? Four stars? What is the principle? We will continue to repeat the background image horizontally, and then define the width of a and a: hover to distinguish the selected stars.

The following is 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;
}

At this point, the production is complete.