Five Star rating system. Part II

Introduction

This is the second, final part of the series on creating Five Star rating system. You will need to complete the first part in order to follow this article.

$2.89
- OR -

Overview

Defining CSS

Create the CSS that will define properties of the rating bar.

<style>
.rating_bar {
      background-image:url(images/rate_meter.png); 
      background-repeat: no-repeat; 
      background-color: #24ff00;
      width:125px;
      height:25px;
}
</style>

As you can see the entire bar will be 125 pixels wide (25 pixels –the star width multiplied by 5 -the number of stars) and 25 pixels high (again the height of the star image).
The background image is nothing but a white image with the same dimensions as the rating bar. As we will be dynamically positioning the background image we have to make sure it doesn’t tile (background-repeat: no-repeat).
I have selected bright lime color (#24ff00) to indicate a star with a rating. The meaning of this setup will become clear to you later in the article.

Alex July

Alex JulyAlex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.

When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.

See All Postings From Alex July >>

Reviews

Be the first to write a review

You must me logged in to write a review.