O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required