there is an account, let's say for 100 rubles, but the payment on the account is not complete and 30 rubles is entered in the cell.

how to make a block so that its background matches the bill payment percentage. Ie in the block, in the cell of the table is the number of 30 rubles, it is 30% of 100 rubles, how to make the block paint over the background from left to right to 30%

  1. I was offered to make different pictures, they say 5 by 10, 15 and so on, and insert them into the background depending on the amount
  2. I was offered to use 1 more div, but as I will deduce the sum, if the diva changes its width, the sum will not fit there. (although right now I thought about the amount as absolutely positioned, but the div will be inside ... I'll try)

If anyone has a more competent solution - write!

  • Another option is to create a php image in a style diva insert a background image with the width parameter fon.php? width = 33 - armenka
  • Made php picture. In general, what we need is cool! Thanks for the advice. - armenka
  • It does not always react quickly, especially at 2 am. Even on StackOverflow, questions happen for half a day without an answer. - drdaeman


3 answers 3

When I wanted to make a progress bar, I was advised to have this solution: http://jsfiddle.net/ehb3x/ :

HTML:

<div id="container"> <div class="wrapper" style="width: 53%;"> <div class="white-on-black" style="width: 188.7%;"> <span>This is a test</span> </div> </div> <div class="black-on-white"> <span>This is a test</span> </div> </div>​

CSS:

 #container { position: relative; border: 1px solid; text-align: center; width: 400px; height: 32px; line-height: 32px; } .black-on-white { height: 32px; color: #000; } .white-on-black { height: 32px; color: #fff; background-color: #44a; } .wrapper { overflow: hidden; position: absolute; top: 0; left: 0; } .black-on-white { width: 100%; }

The option with a dynamically generated image is not always good because it depends on the width of the container in pixels.

  • Such a thermometer is much more semantic than an image. jsfiddle.net/vYLXF - karmadro4
  • Well, in this embodiment, I understand you need to calculate the percentage of progress and based on it lengthen the inscription in percent, so that it either stretches or shrinks? <div class = "wrapper" style = "width: 53%;"> <div class = "white-on-black" style = "width: 188.7%;"> this is if there is another percentage (53) that needs to be recalculated value (188.7) by the way, cool service jsfiddle.net/ehb3x - armenka
  • There is also <progress> , it is ideal semantically, but raw. I tried to stylize it cross-browser half a year ago, but nothing came of it. - drdaeman

If the width of the container is known, then make the background image exactly to its size, and place it with an offset. Assume a container width of 100px:

 <div style="background:url(fon.png) y-repeat -70px 0">30%</div>

It is logical to make such a bar of a fixed width, especially if there are several of them on the page next to each other.

If the width is not fixed, you need to use JS, which will determine the width of the container on the fly and shift the background by (100 - value)% to the left.

    For modern browsers:

     <progress min=0 max=100 value=30 />

    Standard solution:

     .progress { display: inline-block; overflow: hidden; height: 1em; width: 10em; border: 1px solid black; box-sizing: border-box; } .progress > div { float: left; height: 100%; background: blue; } 
     <div class=progress><div style=width:30%></div></div>

    Gradient option:

     div { display: inline-block; height: 1em; width: 10em; border: 1px solid black; box-sizing: border-box; background: -moz-linear-gradient(left, blue 0%, blue 30%, white 30%, white 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, blue), color-stop(30%, white), color-stop(30%, white), color-stop(100%, white)); background: -webkit-linear-gradient(left, blue 0%, blue 30%, white 30%, white 100%); background: -o-linear-gradient(left, blue 0%, blue 30%, white 30%, white 100%); background: -ms-linear-gradient(left, blue 0%, blue 30%, white 30%, white 100%); background: linear-gradient(to right, blue 0%, blue 30%, white 30%, white 100%); } 
     <div></div>

    Theoretically, it is possible to load a value from an attribute into a gradient, but in practice, browsers do not support dragging attributes from something other than text from attributes.