how do I display rating icons to the right of some text

Question

I have a paranormal site where each investigation write up has a rating. In this situation my client wants to use skulls (not that it really matters). The site address is:

http://theripfiles.tv/j3upgrade/index.php/case-files/season-1

I need to display the phrase "PAL Rating:" with 1 to 5 skull icons to the right of it.

I attached the image I'm using to the site page above.

Image dimensions: width:102px height 135px 5 rows of icons 27px in height Top row has 5 icons. bottom row has 1 icon.

Here is what I have so far:

.pal-rating-static 
{
    background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
    width: 102px;
    height: 27px;
    display: block;
}

.pal-rating-5 { background-position: 0 0; }
.pal-rating-4 { background-position: -27px 0; }
.pal-rating-3 { background-position: -54px 0; }
.pal-rating-2 { background-position: -81px 0; }
.pal-rating-1 { background-position: -108px 0; }

I tried using similar CSS from this simple example but it doesn't seem to work. What am I missing?

http://www.itsalif.info/content/displaying-star-rating-using-css-sprites

Answer 1

On your site you have

.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
float: right;
}

Change that to

.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: inline-block;
}

Answer 2

i dont think you need to mess with background position for this one

.pal-rating-static {
    background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
    width: 102px;
    height: 27px;
    display: block;
}

if this is your bar with 5 'skulls' visible . then all that you need to do is make the container smaller when you want to display less 'skulls'

you can do this by adding an extra CSS class for numer of 'skulls'

so you will end up with something like this

.pal-rating-static.cat1 {
  width: 20px;
}

.pal-rating-static.cat2 {
  width: 40px;
}

.pal-rating-static.cat3 {
  width: 60px;
}

.pal-rating-static.cat4 {
  width: 80px;
}

hopefully this will solve your problem .. a fiddle would be very useful