HTML рейтинг, а точней как сделать заполняющуюся полоску

KASPERZzz KASPERZzz
10.03.2012
Как с помощью HTML и css забацать полоску которая бы заполнялась в зависимости от цифры? Допустим цифра 31 из 100. И полоска котороя бы определяла себя как 100 из 100 показывала бы 31.
Наподобие рейтинга вконтакте. Только нужна полоска.

Гость Гость
10.03.2012
Хм. Ну как вариант можно попробовать сделать таблицу определенного размера… Со 100 ячейками и в зависимости от цифры окрашивать эту полоску цветом

Гость Гость
10.03.2012
А данные вы откуда брать будете?
В зависимости от ответа будет либо жаба-скрипт либо пых.

Raik Raik
10.03.2012
Попробуй использовать картинку, меняя ее width.

Реализовал на php, если вдруг подойдет такой вариант: http://pastebin.com/eutxZkxW

rogallic (Андрей Рогов rogallic (Андрей Рогов
10.03.2012
лучший ответ
Приведу очень неправильную реализацию (хотелось реализовать нестандартно):
<html>
 <head>
   <style type="text/css">
     .rate {
       background: #AAA;
       text-align: center;
       height: 1.6em;
     }
     .rate.numVal {
       z-index: 1;
       height: 100%;
       position: relative;
     }
     .rate.linVal {
       background: #66E;
       height: 100%;
       top: -100%;
       position: relative;
     }
   </style>
 </head>
 <body>
   <div class="rate">
     31%
     <script type="text/javascript">
       (function() {
         var arr = document.getElementsByTagName('script');
         var prev = arr[arr.length - 1].parentNode;
         prev.innerHTML = '<div class="numVal">' + prev.innerHTML + '</div><div class="linVal" style="width: ' + parseInt(prev.innerText) + '%"></div>';
       })()
     </script>
   </div>
 </body>
</html>

Добавить комментарий | Похожие обсуждения

Вопросы и ответы по Вконтакте
Вопросы и ответы

Популярные вопросы и ответы о социальной сети www.vkontakte.ru (vk.com)