CODEWITHSUNDEEP
csshtml
devika
devika

Reputation: 11

html 5 star rating css

Below is my code for a 5 star rating system.

    <span id="rateStatus"></span>
    <div id="rateMe">   

        <a onclick="rateIt(this)" id="_1" title="1 - Customers do not like/want it (idea / solution / service)" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_2" title="2 - Customers will consider it only if the price is better" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_3" title="3 - Customers want it and will buy if the quality is superior to competition" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_4" title="4 - Customers need it – will share development cost if necessary" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_5" title="5 - Unique offering - Customers will buy it immediately" onmouseover="rating(this)" onmouseout="off(this)"></a>

    </div>
    <span id="ratingSaved"> </span>


    <style type="text/css">
    #rateStatus{float:left; clear:both; width:100%; height:20px;}
    #ratingSaved{display:none;}
    .saved{color;brown; }

    #rateMe{float:left; clear:both; width:100%; height:auto; padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on {background:url('/resource/1314262224000/green_star') no-repeat;}
    #rateMe a{float:left;background:url('/resource/1314262035000/white_star') no-repeat;width:40px; height:40px;}




    </style>

This displays for 1 row of 5 stars ...but I require 3 more rows...how can I modify the css to get the same.

Thnks in advance

Upvotes: 1

Views: 5964

Answers (2)

zet
zet

Reputation: 11

Id is for unique, class if for elements which appear more than once. You can use id to differentiate between those rows.

<div class='rateMe' id='row1' / >
<div class='rateMe' id='row2' / >
<div class='rateMe' id='row3' / >
...

Upvotes: 1

Karel-Jan Misseghers
Karel-Jan Misseghers

Reputation: 807

You could just copy the code but instead of using id = "rateMe" you should use class = "rateMe" (as juhana said)

this way you can have 3 rows of 5 stars (this is what you wanted right?)

Upvotes: 0

Related Questions