Форум PHP

Есть 4 значения:

<? $arr[1] = 90 $arr[2] = 75 $arr[3] = 42 $arr[4] = 122

и табличка

<? <table> for($i=0;$i<count($arr);$i++) { <tr><td width=100>$arr[$i]</td></tr> } </table>

Так вот я хочу что бы <tr><td width=100>$arr[$i]</td></tr> закрашывалась на количество процентов, которое составляет от максимального значения.
Например есть 2 значения, 30 и 100.
Получаеться первое число равно 30% а другому 100%.
Следовательно первую строчку закрашываем на 30% слева-направо, а вторую строчку на 100%.
И все это надо делать без Gdlib.
Вот.. ктонить понял что я хочу? :)

Вставьте в ячейку еще одну таблицу с двумя столбцами и одной строкой. Задайте левой ячейке этой, внутренней, таблицы нужную ширину в процентах и закрасьте ее.

можно вставить в ячейку картинку (нужного цвета) шириной в один пиксель и растягивать ее в процентном соотношении.

я так делала:

<td valign="bottom" align="center"><img src="images/1x2.gif" width="10" height="<?=round($ena_percent*150/100)?>"></td>

где 150 - это максимальное значение ширины.

Если я правильно понял вопрос, то:

<? $arr[] = 90; $arr[] = 75; $arr[] = 42; $arr[] = 122; $max=$arr[0]; foreach ($arr as $key=>$value) {     if ($value>$max) {         $max=$value;     } } $width=$max/10; ?> <table cellpadding=0 cellspacing=0 border=1 width="<?=$width;?>"> <? foreach ($arr as $key=>$value) {     $percent=$value*100/$max;     echo "<tr><td><div style=\"background: #CCCCCC; width: ".$percent."\">".$value."</div></td></tr>"; } ?> </table>

А вот что получилось у меня...

<?php $arr[0] = 90;  $arr[1] = 75;  $arr[2] = 42;  $arr[3] = 122;         for($i=0; $i<count($arr); $i++)                {          echo "<table width=500>";           echo '<tr><td width='.$arr[$i].' bgcolor=#000000>&nbsp;</td><td bgcolor=#fe56ce>&nbsp;</td></tr>';                 echo "</table>";         } ?>

тоже вариант, я решал задачу относительно нахождения процента числа по отношению к максимальному.

а там уж - что пригодится))))

aexb respect ;)
остальным так же большое спасибо. Все молодцы :)

Еще 1 вопрос, а как теперь сделать что бы текст со значением, всегда был посередине таблички, независсимо перекрывает цыфру или нет.

up... Ничего в голову не приходит, полагаю как то надо создать прозрачный td и на нем уже писать буквы?...

HE td, A div

Я не понимаю :)

Делай не таблицами, а стилями
т.е. не td, а div

Млин, да я понял что надо Div использовать, но еслиб я знал как их использовать, можно мне уже простой пример как сделать то что я сказал выше, больше мне ничего не надо.

Сегодня нет времени (сорки), если до завтра никто не поможет, то постараюсь)

Помогите мне уже )))

Не думай я не издеваюсь, но расскажи поподробнее где это будет использоваться? Может это лучше реализовать при помощи Ява Скрипт?

А можно? Конечно тогда давай с ява, мне главное просто чтоб это работало как я описал выше. Невважно каким способом оно будет работать.

необходимо для этого в ячейке таблицы сделать бэкгроундом картинку с соответствующей закраской процентов...
и отформатировать текст в ячейке по центру

как-то так:

<td background="proc55.gif" align=center valign=top width=100px>55%</td>

необходимо для этого в ячейке таблицы сделать бэкгроундом картинку
ну это вы загнули... моя голова конешна способна на шальные идеи, но тут вы меня переплюнули, вы никогда не пробовали плавать с гантелями?
Бамси, дико извеняюсь, но у меня госэкзамены во вторник, вы представляете что такое госы для заочника?)) А над решением вашей задачи надо подумать...
Всё-таки я настаиваю!!!)) Откройте секрет, где и как будет применяться скрипт, от этого завист как и чем решать вашу "проблему")

Если я скажу просто так, я думаю тебя это не очень обрадует :)
Допустим есть игра, 4 игрока, они играют в конце некоторые результаты, допустим сколько построил и сполько сломал. И вот просто выводить тупые цыфры, очень плохо понимаеться, приходиться всматриваться и напригать мозг, а там кинул взгляд, у того у кого линия длиннее тот и больше сломал.. а потом уже смотришь на цыфры по необходимости.

Боюсь мне не надо знать кто, кому и чего сломал))))))
Ок. Задача ясна. Буду думать, но только после госов, извеняйте бананив нема))))
кстати если проценты вывести справа от полосы, тоже будет красиво

да, по фиг с гантелями или с гирями,
предложенное решение подходит под заявленное условие: "как теперь сделать что бы текст со значением, всегда был посередине таблички, независсимо перекрывает цыфру или нет."

С гирями я бы вам даже не советовал и пробовать.
1) вы готовы рисовать 100 фоновых картинок?
2) в вопросе ничего не сказано о размерах полосок, масштабе называйте как хотите, а с бэкграундом прийдется к этому привязываться.
3) на следующей неделе собираюсь сделать "это" с помощью слоёв с контейнерами DIV, к такому скрипту потом можно будет прикрутить Яву Скрипт (хотя я в нем слабоват)
4) жду решения задачи от вас с таблицами и непременно с бэкгроундом.

Вот набросал на скорую руку)

<html> <style type="text/css"> #layer1    {     position: relative;     background-color: transparent;     z-index: 2;     text-align: center;     font-weight: 700;     color: red;     border: solid 1px green;     } #layer2    {     position: relative;     top: -21px;     z-index: 1;     background-color: #000000;     border: solid 1px black;     } </style> <body> <?php function line($per)     {     // Коэф. длинны полоски     $kdl=3;     echo "<div id=layer1 style='width: ".(100*$kdl)."'>".$per."%</div>";     echo "<div id=layer2 style='width: ".($per*$kdl)."'></div>";     } $arr[0] = 90;  $arr[1] = 75;  $arr[2] = 50;  $arr[3] = 100; $arr[4] = 47;  $arr[5] = 15;         for($i=0; $i<count($arr); $i++)     {      line($arr[$i]);         } ?> </body> </html>

Правда работает только в IE

"Красиво" (с разным цветом цифр при переходе прогресс-бара через 50%) получится только в MSIE с использованием свойства стиля clip - см. прикрепленный файл или, например, - http://xpoint.ru/forums/programming/javascript/misc/thread/9372.xhtml#3

В остальных браузерах код много проще, но визуальное качество будет похуже. Надо?

Действительно красиво только в MSIE в других вообще никак)

В остальных браузерах код много проще, но визуальное качество будет похуже. Надо?
Мне - нет, пусть Бамси решает.

З.Ы. Почему всё время Петя быстрее? Петя - негр?

Попробуйте так

<? $arr = array(200, 90, 75, 42, 122); ?> <html><body> <style> #tPos td { width:100px; background-color:#FF0000; text-align:left } .sPos { height:50px; background-color:#00FF00; } </style> <table id="tPos"> <? for($i = 1; $i <= count($arr); $i++)  echo "<tr><td><span class=\"sPos\" style=\"width:".round(100*$arr[$i]/$arr[0])."\"></span></td></tr>"; ?> </table>  </body> </html> ?>

в объявлении массива нулевой элемент - это максимальное значение (аля 100%) - а остальные соответственно заполненность...

ZuArt результат скрипта в браузёрах отличних от ослика смотрели?

если вы про <span> - то..
1) можно поиграть стилями....
2) можно использовать вместо <span></span> картинку <img> - высота она и есть высота, а при растяжении однотонного изображения его цвет не поменяется никак

Я не про спан, я про результат))
Конечному пользователю всё равно как, ему главное чтобы всё работало.

<html> <style type="text/css"> #wrap    {     background-color: #eee;     color: #fff;     border: solid 1px #000;     margin-top: 2px;     overflow: hidden;     } #golosa    {     background-color: #c0c0c0;     font-size: 8pt;     display: block;     padding-left: 10px;     } </style> <body> <?php function line($per)     {     // Коэф. длинны полоски     $kdl=3;     echo "<div id=wrap style='width: ".(100*$kdl)."'>";     echo "<span id=golosa style='width: ".($per*$kdl)."'>".$per."%</span></div>";     } $arr[0] = 90;  $arr[1] = 75;  $arr[2] = 50;  $arr[3] = 100; $arr[4] = 47;  $arr[5] = 15;         for($i=0; $i<count($arr); $i++)     {      line($arr[$i]);         } ?> </body> </html>

Можно попробывать так, работает в ИЕ 6 и ФФ 2.0.0.2. Чистый ЦСС :), при желании можно и по центру выровнять.

Двойка вам с минусом, попробуйте указать 0, 1, 2, 3 процента....

В ФФ всё ок в ИЕ - действительно все строчки приняли одинаковую длину, но вроде бы это не ошибка вёрстки, хотя если только в ИЕ :(, надо думать дальше...

Согласен вёрстка тут ни причем, но факты вещь упрямая)) Надо обдумать использование паддинга, идея у вас хорошая
И вообще если честно я бы не стал выводить проценты на полосе, только лишь из-за дизайна... но задача поставлена и решить её уже становиться интересно)

<style type="text/css"> .wrap    {     background-color: #eee;     color: #000;     border: solid 1px #000;     margin-top: 2px;     overflow: hidden;     } .golosa    {     background-color: #c0c0c0;     font-size: 8pt;     display: block;     height:15px;     } .proc    {         padding-left: 45px;     position: absolute; } </style> <? $arr[] = 2; $arr[] = 0; $arr[] = 10; $arr[] = 30; $max=$arr[0]; foreach ($arr as $key=>$value) {     if ($value>$max) {         $max=$value;     } } $width=$max/10; foreach ($arr as $key=>$value) {     $percent=$value*100/$max;     echo "<div class=\"wrap\" style=\"width:100px\">\n";     echo "<span class=\"golosa\" style=\"background: #CCCCCC; width: ".round($percent,-1)."px;\"><span class=\"proc\">".$value."</span></span>\n";     echo "</div>\n"; } ?> Вот ещё один вариант, ищем баги тут :).

-

и все таки двойка Вам... я же грил - поиграть со стилями... + чуток поправил код, а то малешко в алгоритме ступил - выделяю поправки

<? $arr = array(200, 90, 75, 42, 122); ?> <html><body> <style> #tPos td { width:<?echo $arr[0];?>px; background-color:#FF0000; text-align:left } .sPos { height:50px; background-color:#00FF00; display:block; } </style> <table id="tPos"> <? for($i = 1; $i < count($arr); $i++)  echo "<tr><td><span class=\"sPos\" style=\"width:".$arr[$i]."px\"></span></td></tr>"; ?> </table>  </body> </html>

Проверил в осле, лисе и опере...

как и писал выше - $arr[0] - это ширина таблицы и она же эквивалент 100%

а тут еще и текста добавил + парочку параметров для более гибкой настройки...

$w и $h - ширна и высота ползунка в пиксах
$arr - массив значений, 0-ое - аля 100%

Кто короче и проще?

<? $w = 150; $h = 20; $arr = array(200, 90, 75, 42, 122); ?> <html><body> <style> #tPos td { width:<?echo $w;?>px; background-color:#FF0000; text-align:left } .sPos { height:<?echo $h;?>px; background-color:#00FF00; display:block; } .sTxt { position:absolute; z-index:10; width:<?echo $w;?>px; border:1px solid #0000FF; display:block; text-align:center } </style> <table id="tPos"> <? for($i = 1; $i < count($arr); $i++)  echo "<tr><td><span class=\"sTxt\">".(100*$arr[$i]/$arr[0])."%</span><span class=\"sPos\" style=\"width:".round($w*$arr[$i]/$arr[0])."px\"></span></td></tr>"; ?> </table>  </body> </html>

пашет под IE, FF, Opera

Мне был бы интересен вариант, при котором числовое значение стояло ровно посередине общей полосы, независимо от того, какая часть полосы закрашена....

Это есть и в моём варианте, в варианте ZuArt'a тоже не сложно сделать.

ДЕйствительно. Гуд. Идет в IE, Opera, FF, Mozilla

код перед Вашим постом вообще-то и размещает текст-надписи по центру... может просто не ту версию смотрели =)...
Но в последнем варианте точно включено отображение текста.

Молодой человек, вы наверное не поняли в том-то вся и фишка, чтобы сделать слоями без использования таблиц, тут я немного противоречу сам себе:
Конечному пользователю всё равно как, ему главное чтобы всё работало.
но на это можно не обращать внимание:)
И в Опере лично для меня не пашет, сдвиг на пару пикселей лично для меня критичен, но на это тоже не стоит обращать внимания, потому как я не програмист и не дизайнер, я тупо глупый юзер)
З.Ы. Бамси, ну и заварил ты кашу)))

Хотите без таблиц??? Пожалуйста - исправил всего 3 строчки... Тестил под IE, FF. Opera.

<? $w = 150; $h = 20; $arr = array(200, 90, 75, 42, 122); ?> <html><body> <style> #tPos { width:<?echo $w;?>px; background-color:#FF0000; text-align:left } .sPos { height:<?echo $h;?>px; background-color:#00FF00; display:block; } .sTxt { position:absolute; z-index:10; width:<?echo $w;?>px; border:1px solid #0000FF; display:block; text-align:center } </style> <div id="tPos"> <? $tr = array(); for($i = 1; $i < count($arr); $i++)  echo "<span class=\"sTxt\">".(100*$arr[$i]/$arr[0])."%</span><span class=\"sPos\" style=\"width:".round($w*$arr[$i]/$arr[0])."px\"></span>"; ?> </div>  </body> </html>

ЕЩЕ РАЗ поясняю...
$w - ширина в пиксах отображения в браузере (типа ширина 100%)
$h - высота полоски
$arr - массив значений, где НУЛЕВОЙ индекс - значение, эквивалентное 100%

т.е. в данном случае 200 ~ 100%, соответственно все остальные значения должны быть НЕ БОЛЬШЕ 200...

У меня Ваш пример, только со значениями :

$arr = array("110","102","214","356","400");

"поплыл".

Nemesis? поставте width:<?echo $w;?>px; border:0px solid #0000FF; и будет счастье, этот скрипт работает приемлимо, но мы же люди исскуства!))) даёшь ДИВ без ТАБЛЕ!!!!))

ВНИМАТЕЛЬНО читаем описание... в массиве 0 элемент = 100% в числовом отображении... т.е. В ПРИНЦИПЕ все остальные значения не могут быть БОЛЬШЕ чем 1 число!!! (110 < 214 и 110 < 400 - некорректные значения)

Ого... отошел на 2 дня.
Всем бооольшое спасибо, очень понравились ответы каждого, и собственно сама дискуссия :)
Больше всего понравился вариант Nemesis'а по мойму он идеален, и это именно то что мне было нужно.

<style type="text/css">  .wrap    {      background-color: #eee;      color: #000;      border: solid 1px #000;      margin-top: 2px;      overflow: hidden;      }  .golosa    {      background-color: #c0c0c0;      font-size: 8pt;      display: block;      height:15px;      }  .proc    {          padding-left: 45px;      position: absolute;  }  </style>  <?  $arr[] = 2;  $arr[] = 0;  $arr[] = 10;  $arr[] = 30;  $max=$arr[0];  foreach ($arr as $key=>$value) {      if ($value>$max) {          $max=$value;      }  }  $width=$max/10;  foreach ($arr as $key=>$value) {      $percent=$value*100/$max;      echo "<div class=\"wrap\" style=\"width:100px\">\n";      echo "<span class=\"golosa\" style=\"background: #CCCCCC; width: ".round($percent,-1)."px;\"><span class=\"proc\">".$value."</span></span>\n";      echo "</div>\n";  }  ?>

Как сделать что бы надпись всегда была ровно по середине ячейки?

Я не знаю :)