why is my ratings thing vertical?

[inhuman-comic]

i asked the very, very nice tygermon to make me a layout for my short zombie comic. and it's gorgeous! but there's one funky little tweak i don't want to bother tygermon with

my rating feature is vertical. i'd like it to just be horizontal and centered, but i have no idea how to do it. maybe this is because i'm running Chromium as a browser, or maybe not?

Any help would be appriciated. here's the site in question and here's the guilty (i think) snippet of code.

<br>
<script language="JavaScript">

var dir = "http://www.smackjeeves.com/templates/default/images/";
var pic_unselected = "star-unselected.gif";
var pic_selected = "star-selected.gif";

// "Buffers" the image to the browser
document.write('<img style="display: none" src="' + dir + pic_unselected + '" />');
document.write('<img style="display: none" src="' + dir + pic_selected + '" />');

<!-- BEGIN switch_user_has_voted -->
var default_rating = {switch_user_has_voted.RATING};
var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/your-rating-2.gif";
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/rate-it.gif";
<!-- END switch_user_hasnt_voted -->

function build_vote()
{
document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');
for (n = 1; n<= 5; n++)
{
if (n <= default_rating)
{
default_pic = pic_selected;
} else {
default_pic = pic_unselected;
}

document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '"></a></li>');
}
document.write('</ul>');
}

function rateover(star_num)
{

for (n = 1; n <= 5; n++)
{
if (n <= star_num)
{
da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
} else {
da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
}

eval(da_code);
}
}

function vote(rating)
{
var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
new_window.focus();
}

</script>


<center>
<table width="60%"><tr><td><center>

<h1>{COMIC_TITLE}</h1>

any help is appriciated D:

[Asj]

It's in your overall layout code, probably.
I'll look in my code for a second to find the exact way of doing what you want.

Oh, I forgot until I looked at mine, but a lot of rating stars have code like this a little below what you posted (it's in the html part of the comic layout):

Code: Select all

   <table border="0" width="100%" align="center">

   <tr><td align="left"></td>

       <td align="right"><img src="http://www.smackjeeves.com/templates/default/images/avg-rating.gif" alt="Average Rating:" />

        <strong>{AVERAGE_RATING}</strong><br />

      <script language="JavaScript" type="text/javascript">/* <![CDATA[ */build_vote();/* ]]> */</script></td>

   </tr>

   </table>


I think this is the average horizontal rating star code. Where it says "<td align="left"> just change "left" to "center".
But since your's is vertical, it's probably in the css in the overall layout, and I'll look that up soon.

[inhuman-comic]

thank you asj! i'm surprised, though, it doesn't appear like there's a small table forcing them into a vertical column.

[Asj]

found it. It was in what you originally posted afterall. Oops. ^_^" I didn't think to look there.

Code: Select all

document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '"></a></li>');


This is the way your stars are set up (along with the <ul>'s above and below it). It's how lists usually show up. To get rid of the normal list look... I think this would work. Try it and see.

look for this.

Code: Select all

document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');

replace it with this.

Code: Select all

document.write('<img id="text" src="' + rate_it_pic + '" /><ul class="ratingstars">');

and in your Overall Layout code, add this:

Code: Select all

.ratingstars {
   list-style:none;
   margin:0;
   padding:0;
}

.ratingstars li {
    display:inline;
   margin:0;
   padding:0;
}

   .ratingstars a {
   text-decoration: none;
}

If that doesn't work, I'll fix it.

[inhuman-comic]

that does not appear to have done anything. :< try try again?

[Asj]

it works for me...
The stuff I said to add to the overall layout, you need to put with the similar stuff already there, if you didn't. Like, where it says

Code: Select all

body {
        background-color:#363636;
        background-image: url("http://img40.imageshack.us/img40/4391/grudgel.png");
   background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: top center
   }

put it right after that.

But, when I tried looking at your site's source code, it looks like the ability to make the rating stars horizontal is already partly there, but some stuff's missing.
Where it says this...

Code: Select all

<h3 class="comic-date-header">20 Sep 2011 06:55 pm</h3>
<table id="comic-container" width="500"><tr><td>
<div id="comic-header">
<div id="rating">
<img src="http://www.smackjeeves.com/templates/default/images/avg-rating.gif" alt="Average Rating:"> <b>None</b>
</div>
<div id="rate">
<script language="JavaScript">build_vote();</script>
</div>
</div>


I didn't find a "comic-date-header", "comic-container", "comic-header", "rating", or "rate" elsewhere.
If these are in the comic page template, they should be in the overall layout template.
And since it looks like you already have a rate id in the comic page, instead of doing what I said earlier, just add this to the overall layout (like after the body{...} part):

Code: Select all

#rate ul {
   list-style:none;
   margin:0;
   padding:0;
}

#rate ul li {
    display:inline;
   margin:0;
   padding:0;
}

   #rate ul a {
   text-decoration: none;
}

[inhuman-comic]

as i said, i didn't make the layout and i have no concrete idea of how SJ's layouts work (i'm much more tables than i am divs, since i'm a geezer) so, yeah. i wasn't the one who put this thing together.

that did fix it, though. thank you!

my next question is this:
how do i move the next/last arrows ABOVE the bordering box around the comics? the rating system too, if possible. they all seem to be default aligned to the left, and i would rather they were centered. aka instead of this:

[-------------------------]
[**** VOTE ............]
[< << >> > ............]
[.......(comic)........]
[-------------------------]
.......< << >> >

i would like

.......**** VOTE
.......< << >> >
[-------------------------]
[........(comic).......]
[-------------------------]
.......< << >> >

i'm sure it's possible, it's just a question of how!

[Asj]

try adding this in the same area in the overall layout template:

Code: Select all

#rating {
   text-align: center;
}

.comicnav {
   text-align: center;
}