Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Creating a Star Ranking System

Problem

You want to display a star rating system that allows users to visually pick their own ratings.

Solution

The first step is to set up the HTML to include an unordered list with five options, as shown in Figure 6-30:

<div class="product" id="prod345781">
<h1>CSS Cookbook</h1>
<p>Submit your review:</p>
 <ul class="rating">
  <li class="one"><a href="#">1 Star</a></li>
  <li class="two"><a href="#">2 Stars</a></li>
  <li class="three"><a href="#">3 Stars</a></li>
  <li class="four"><a href="#">4 Stars</a></li>
  <li class="five"><a href="#">5 Stars</a></li>
 </ul>
</div>

Next, create an image containing every combination of star ratings, along with an active hover state, as shown in Figure 6-31. (You may want to make each star a square shape, as it makes coding the CSS a little bit easier.)

Default rendering of the star ranking HTML

Figure 6-30. Default rendering of the star ranking HTML

Every combination of star rankings in one image

Figure 6-31. Every combination of star rankings in one image

With the star image set, use CSS rules to restrict the width and height of the unordered list and bring in the star matrix:

.rating  {
 margin: 0;
 padding: 0;
 list-style: none;
 clear: both;
 width: 75px;
 height: 15px;
 background-image: url(stars.gif);
 background-repeat: no-repeat;
 position: relative;
}

Next, float each list item (for IE6 support) while removing its text ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required