Oct 26, 2010

Rating value presentation

For an item's rating, a common way to show it is using star picture. Since rating is always a decimal figure after taking average, it needs a 1/2 star picture, or even 1/3 star. The following picture shows rating 7.4 in star picture


Another way is using CSS. Define the inner div's width as the percentage of the rating value, see the bold.

<div style="width: 100px; background-color: #EEEEEE; border: 1px solid #444444;">
<div style="width: 74%; height: 20px; background-color: #FF0000"></div>
</div>
7.4/10
The output is


i like the latter bar style since i m not good at doing picture editing. To display rating value in bar style is also more precise.

No comments:

Post a Comment