Customizing Kosmos Theme Ajax Rating

[FSGDAG]

Here's the way it currently looks :




Here's the code for it in detail_links.html:

 <div style="float:left;"><b>Average Visitor Rating: </b></div>
           <%if $enable_rating_ajax%>
           <div style="float:left;">
              <ul class="ajax-rating-indexu" style="width:74px;">
              <li class="current" style="width:<%math equation="x * y" x=14.5 y=$rating%>px;"></li>
                    <li><a href="javascript:;;" class="star1" title="1"></a></li>
                    <li><a href="javascript:;;" class="star2" title="2"></a></li>
                    <li><a href="javascript:;;" class="star3" title="3"></a></li>
                    <li><a href="javascript:;;" class="star4" title="4"></a></li>
                    <li><a href="javascript:;;" class="star5" title="5"></a></li>
               </ul>
          </div>
          <div style="float:left;width:100%" id="RatingRange"><span><b><%$rating%></b></span> (out of 5)</div>
          <%else%>
          <div style="float:left;" id="RatingImage"><%$rating_img%></div>
          <div style="float:left;" id="RatingRange"><span><b><%$rating%></b></span> (out of 5)</div>
          <%/if%>
            <%*<div style="float:left;" id="RatingImage"><%$rating_img%></div>*%>
            
            <div style="clear:both;" id="RatingNumber">Number of ratings: <span><%$votes%></span> Votes</div> 

What I'd like to have happen is that instead of it being three lines, have it all in one. I'm imagining that the reason for the three lines is due to the <div> statements. Is there a way I can change this???

[echo@]

Try this, the layers <div>'s needed their widths 100% removed as float would not arrange left if they ocupied 100% of the page. Tested this on bluesmooth template, looks as if its the one. also set the RatingNumber <div> to float left, you may need to add another empty <div> to the bottom to clear the floats, depending how your template works.

<div style="float:left;"><b>Average Visitor Rating: </b></div>
           <%if $enable_rating_ajax%>
           <div style="float:left;">
              <ul class="ajax-rating-indexu" style="width:74px;">
              <li class="current" style="width:<%math equation="x * y" x=14.5 y=$rating%>px;"></li>
                    <li><a href="javascript:;;" class="star1" title="1"></a></li>
                    <li><a href="javascript:;;" class="star2" title="2"></a></li>
                    <li><a href="javascript:;;" class="star3" title="3"></a></li>
                    <li><a href="javascript:;;" class="star4" title="4"></a></li>
                    <li><a href="javascript:;;" class="star5" title="5"></a></li>
               </ul>
          </div>
          <div style="float:left;" id="RatingRange"><span><b><%$rating%></b></span> (out of 5)</div>
          <%else%>
          <div style="float:left;" id="RatingImage"><%$rating_img%></div>
          <div style="float:left;" id="RatingRange"><span><b><%$rating%></b></span> (out of 5)</div>
          <%/if%>
            <%*<div style="float:left;" id="RatingImage"><%$rating_img%></div>*%>
            
            <div style="float: left;" id="RatingNumber">Number of ratings: <span><%$votes%></span> Votes</div> 

[echo@]

Whoops, sorry i don't read everything , the template is kosmos, just tested and you need an extra clear <div> here is the correct html sorry.

 <div style="float:left;"><b>Average Visitor Rating: </b></div>
           <%if $enable_rating_ajax%>
           <div style="float:left;">
              <ul class="ajax-rating-indexu" style="width:74px;">
              <li class="current" style="width:<%math equation="x * y" x=14.5 y=$rating%>px;"></li>
                    <li><a href="javascript:;;" class="star1" title="1"></a></li>
                    <li><a href="javascript:;;" class="star2" title="2"></a></li>
                    <li><a href="javascript:;;" class="star3" title="3"></a></li>
                    <li><a href="javascript:;;" class="star4" title="4"></a></li>
                    <li><a href="javascript:;;" class="star5" title="5"></a></li>
               </ul>
          </div>
          <div style="float:left;" id="RatingRange"><span><b><%$rating%></b></span> (out of 5)</div>
          <%else%>
          <div style="float:left;" id="RatingImage"><%$rating_img%></div>
          <div style="float:left;" id="RatingRange"><span><b><%$rating%></b></span> (out of 5)</div>
          <%/if%>
            <%*<div style="float:left;" id="RatingImage"><%$rating_img%></div>*%>
            
            <div style="float: left;" id="RatingNumber">Number of ratings: <span><%$votes%></span> Votes</div>  
            <div style="clear: both"></div> 

[FSGDAG]

echo... Thanks so much for the help!

We are close, about 99% of the way there, but there is still one issue.



Here is the code:

<div style="float:left;"><b>Visitor Rating: </b></div> 
           <%if $enable_rating_ajax%> 
           <div style="float:left;"> 
              <ul class="ajax-rating-indexu" style="width:74px;"> 
              <li class="current" style="width:<%math equation="x * y" x=14.5 y=$rating%>px;"></li> 
                    <li><a href="javascript:;;" class="star1" title="1"></a></li> 
                    <li><a href="javascript:;;" class="star2" title="2"></a></li> 
                    <li><a href="javascript:;;" class="star3" title="3"></a></li> 
                    <li><a href="javascript:;;" class="star4" title="4"></a></li> 
                    <li><a href="javascript:;;" class="star5" title="5"></a></li> 
               </ul> 
          </div> 
          <div style="float:left;" id="RatingRange">&nbsp;<span><b><%$rating%></b>&nbsp;</span>out of 5 </div> 
          <%else%> 
          <div style="float:left;" id="RatingImage"><%$rating_img%></div> 
          <div style="float:left;" id="RatingRange">&nbsp;<span><b><%$rating%></b>&nbsp;</span>out of 5 </div> 
          <%/if%> 
            <%*<div style="float:left;" id="RatingImage"><%$rating_img%></div>*%> 
             
            <div style="float:left;" id="RatingNumber">&nbsp;&nbsp;Votes = <span><%$votes%></span></div> 

As you can see, for some reason <%$votes%> keeps displaying the value down one line. Whats weird is that no matter what I do, I cant get it to display on the same line. You'll notice that I've changed the text so that there is less characters being displayed. At first I thought it was an issue with the table not being wide enough, but that doesn't seem to be it. Is there a way that the table ( and I know its not technically in a table ) can be stretched so that its as wide as the line above it?

Any help is greatly appreciated!

[echo@]

It works fine on the default kosmos template unmodified, with 5 rating.
there might be some other code you are missing out like a contaning <div> or table thats set to a particular size?

[echo@]

It does not look like you added the <div style="clear: both"></div>
on the end either.

[echo@]

Detail_link.html SVN differs from the normal 5.4.0 Detail_link.html, and your using the SVN ver. Rating system is in a table on the new SVN kosmos thats why it has a blue/purple background bgcolor="#D3D3D3".
Your detail_link should look like this bellow, delete this

  <div align="left">
  <table cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <form action="rating.php" method="post">
      <input type="hidden" name="id" value="<%$link_id%>" />
      <table bgcolor="#D3D3D3" cellpadding="5">
      <tr>
        <td colspan="2">
          <b>Average Visitor Rating: </b> <%$rating_img%>
          <b><%$rating%></b> (out of 5)<br />
          Number of ratings: <%$votes%> Votes
        </td>
      </tr>
      <tr>
        <td width="100">
          <b>Visitor Rating</b>
        </td>
        <td>
          <select name="rating">
            <option value="">Select Your Rating</option>
            <option value="5">Excellent!</option>
            <option value="4">Very Good</option>
            <option value="3">Good</option>
            <option value="2">Fair</option>
            <option value="1">Poor</option>
          </select>
          <input type="submit" value="Rate It!" />
        </td>
      </tr>
      </table>
      </form>

    </td>
  </tr>
  </table>
  </div> 

and replace with

<div style="float:left;"><b>Visitor Rating: </b></div> 
           <%if $enable_rating_ajax%> 
           <div style="float:left;"> 
              <ul class="ajax-rating-indexu" style="width:74px;"> 
              <li class="current" style="width:<%math equation="x * y" x=14.5 y=$rating%>px;"></li> 
                    <li><a href="javascript:;;" class="star1" title="1"></a></li> 
                    <li><a href="javascript:;;" class="star2" title="2"></a></li> 
                    <li><a href="javascript:;;" class="star3" title="3"></a></li> 
                    <li><a href="javascript:;;" class="star4" title="4"></a></li> 
                    <li><a href="javascript:;;" class="star5" title="5"></a></li> 
               </ul> 
          </div> 
          <div style="float:left;" id="RatingRange">&nbsp;<span><b><%$rating%></b>&nbsp;</span>out of 5 </div> 
          <%else%> 
          <div style="float:left;" id="RatingImage"><%$rating_img%></div> 
          <div style="float:left;" id="RatingRange">&nbsp;<span><b><%$rating%></b>&nbsp;</span>out of 5 </div> 
          <%/if%> 
            <%*<div style="float:left;" id="RatingImage"><%$rating_img%></div>*%> 
             
            <div style="float:left;" id="RatingNumber">&nbsp;&nbsp;Votes = <span><%$votes%></span></div>  
<div style="clear: both"></div> 

[FSGDAG]

Will give this a try tonight echo... Thanks for all the help with this