the css behind steepster's rating system

if you're looking to build something like steepster's sliders (which uses jquery ui), you can pull it off using technique #4 from this css position guide.

- iterate over a list of scores

- for each score, create a new div, like this:

<div id="tick" style="position:absolute; left: <%= item.score %>px;">&nbsp;</div>

- when you're finished, wrap everything in a container, like this:

<div id="ticks_container" style="position:relative"></div>

 

so the finished product would look like this in ruby on rails:

<div id="ticks_container" style="position:relative">

<% for item in @items %>

<div id="tick" style="position:absolute; left: <%= item.score %>px;">&nbsp;</div>

<% end %>

</div>

calculating the scores could be done with a case statement, or some multiplication and addition.  this is a really cool rating system, big ups to steepster.