Рейтинг материала на ucoz

[tema]

Ребят подскажите! Вот у меня есть скрипт рейтинга материалов для ucoz

<script type="text/javascript" src="http://helper.ucoz.ru/_ld/0/47_rate.js"></script>  
<?if($RATE_FORM$)?><a href="#" onclick="rateForm(-1,$ID$);return false">-</a><?endif?>
<b title="Голосов: $RATED$" id="rate_$ID$" class="<?if(($RATING$*$RATED$-2*$RATED$)=0)?>nullRate<?else?><?if(($RATING$*$RATED$-2*$RATED$)<0)?>negativeRate<?else?>positiveRate<?endif?> <?endif?>"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b>
<?if($RATE_FORM$)?><a href="#" onclick="rateForm(1,$ID$);return false">+</a><?endif?>

Выглядит сейчас он так: -30+ где 30 (к примеру) это колич голосов

Как сделать чтобы он выглядел совершенно иначе! Вот так

Заранее спасибо!

[hedgehog]

Плюс/минус внутри <a></a> заменить на картинки с изображением стрелок или сделать ссылки блочными и присвоить им бекграунд со стрелками. Перед стрелками дописать "Рейтинг:", обернуть все в div и оформить как надо при помощи css.

[tema]

То что так надо сделать я и так знал! Но у меня получилось что слова Рейтинг и 30 получились не по центру как на скрине а внизу! Я вот и хотел попросить помочь правильно оформить!

[hedgehog]

То что так надо сделать я и так знал!

Значит, нужно яснее выражать свои мысли.

Но у меня получилось что слова Рейтинг и 30 получились не по центру как на скрине а внизу! Я вот и хотел попросить помочь правильно оформить!

Ну так надо же показать код того, что получилось.

Edited January 4, 2012 by hedgehog

[tema]

В CSS написал это

.bgrating { background:url(http://3245236.ucoz.ru/rating/bg.png); width:145px;height:25px; border-radius: 1px solid #000ff;}

В html это

 <div class="bgrating"><script type="text/javascript" src="http://helper.ucoz.ru/_ld/0/47_rate.js"></script><div align="center"; margin-bottom: 5px;> 
 Рейтинг:<a href="#" onclick="rateForm(-1,$ID$);return false"><img src="http://3245236.ucoz.ru/rating/down.png"/></a>
 <b title="Голосов: $RATED$" id="rate_$ID$" class="<!--%IFTH2%1%-->nullRate<!--%IFEN2%1%--><!--%IFEL3%1%--><!--%IFTH4%2%-->negativeRate<!--%IFEN4%2%--><!--%IFEL5%2%-->positiveRate<!--%IFEN5%2%--> <!--%IFEN3%1%-->"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b>
 <a href="#" onclick="rateForm(1,$ID$);return false"><img src="http://3245236.ucoz.ru/rating/up.png"/></a></div><?if($RATE_FORM$)?><?endif?><?if($RATE_FORM$)?><?endif?></div>

Получилось вот че

[hedgehog]

http://jsfiddle.net/RPx9u/

(топорно, исключительно в показательных целях)

Edited January 4, 2012 by hedgehog

[tema]

Так как ты сделал фона нет серого и рейтинг встает по центру всего материала! А если ставишь фон то вот че получается!

html

<div class="bgrating"><script type="text/javascript" src="http://helper.ucoz.ru/_ld/0/47_rate.js"></script>
 Рейтинг:<a href="#" onclick="rateForm(-1,$ID$);return false"><img src="http://3245236.ucoz.ru/rating/down.png"/></a>
 <b title="Голосов: $RATED$" id="rate_$ID$" class="<!--%IFTH2%1%-->nullRate<!--%IFEN2%1%--><!--%IFEL3%1%--><!--%IFTH4%2%-->negativeRate<!--%IFEN4%2%--><!--%IFEL5%2%-->positiveRate<!--%IFEN5%2%--> <!--%IFEN3%1%-->"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b>
 <a href="#" onclick="rateForm(1,$ID$);return false"><img src="http://3245236.ucoz.ru/rating/up.png"/></a><?if($RATE_FORM$)?><?endif?><?if($RATE_FORM$)?><?endif?></div>

CSS

.bgrating * {background:url(http://3245236.ucoz.ru/rating/bg.png); width:145px;height:25px;vertical-align: middle;}

Edited January 4, 2012 by tema

[hedgehog]

Это не раздел "сделайте мне" Я сделал всего лишь набросок по примеру, а стилизовать по уму - это уже делай сам. Вот вариант с изображениями: http://jsfiddle.net/cqePy/

.bgrating * я использовал только для того, чтобы задать вертикальное выравнивание всем дочерним элементам.

Если нужно стрелки бекграундом, то этот бекграунд надо присваивать ссылкам:

какой-нибудькласс {
  background: url('стрелка-вверх') no-repeat;
  display: inline-block;
  height: Xpx;
  width: Ypx;
}

inline-block у ссылки для того, чтобы можно было задать ей размеры. А если задать высоту родительскому элементу (.bgrating) то перестанет работать vertical-align, так как это не таблица. Почерпнуть информацию о вертикальном выравнивании в блоке с заданной высотой можно в этой теме: http://forum.htmlbook.ru/index.php?showtopic=28411&st=0