1

im new to css and html i wanna cr8 a product box value like this

https://i.stack.imgur.com/GPKTD.png

I tried with these but didn't get any result.
I want .fill class to be dynamically modifiable.
Anyone can help me ?

.box {
  width: 250px;
  height: 30px;
  background: grey;
  color: white
}
.box .fill {
  float: left;
  width: 78%;
  background: orange;
  height: 100%;
}
.box .empty {
  position: absolute;
  white-space: nowrap;
  right: 10px
}
.box .fill-badge {
  position: absolute;
  padding-left: 10px;
  line-height: 30px
}
.box .empty-badge {
  padding-right: 10px;
  line-height: 30px;

}
<div class="box">
  <div class="fill"><div class="fill-badge">Radeon 7870</div></div>
  <div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>

2
  • what's fill-badge, what's empty-badge? Oct 24, 2014 at 9:23
  • text badge of orange score , and empty is text of unit score that i want to be right side Oct 24, 2014 at 9:27

3 Answers 3

0

You just need to look at your absolute and relative positioning. Make sure that all elements that are absolutely positioned are inside an element with relative defined as a position. So in this case you just need to add position: relative; to the .box.

    .box {
      width: 250px;
      height: 30px;
      background: grey;
      color: white;
      position: relative;
    }

    .box .fill {
      float: left;
      background: orange;
      height: 100%;
    }

    .box .empty {
      float: right;
      white-space: nowrap;
      right: 10px
    }

    .box .fill-badge {
      position: absolute;
      left: 0;
      padding-left: 10px;
      line-height: 30px
    }

    .box .empty-badge {
      position: absolute;
      right: 0;
      padding-right: 10px;
      line-height: 30px;
    }
<div class="box">
  <div class="fill" style="width:60%;">
    <div class="fill-badge">Radeon 7870</div>
  </div>
  <div class="empty">
    <div class="empty-badge">125.6 GB/S</div>
  </div>
</div>

Edited to show inline style.

6
  • it's doesnt show 125.6 GB/s unit when fill's width sets to +60% Oct 24, 2014 at 9:30
  • Not sure if you posted this before i edited, but works with .fill at 60%
    – roughcoder
    Oct 24, 2014 at 9:32
  • Changed to 60% in the demo.
    – roughcoder
    Oct 24, 2014 at 9:34
  • how can i use it with dynamically values ? like 90% or 100% i want at this scores shows unit thanks Oct 24, 2014 at 9:37
  • Setting the width with CSS almost prevents this. You have to either use JS and read from an data-attribute etc. Or you can inline style width: 60%; and have the number set on page load, i am updated the example to show this.
    – roughcoder
    Oct 24, 2014 at 9:39
0

You must set the .box position to relative. http://jsfiddle.net/Lzmop76a/

.box {
    width: 250px;
    height: 30px;
    background: grey;
    color: white
    position: relative;
}
0

I would do it using a background color and a background image for the same element like:

.box {
    width: 240px;
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
    background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
    color: white;
}
.box span{
    float:right;
}
<div class="box">
    Radeon 7870 <span>125.6 GB/S</span>
</div>

3
  • works but i cant change the value score background , i want it dynamically Oct 24, 2014 at 9:34
  • @jessieomline you mean the orange one? :) have you tried to invert the logic? (gray background at 200px left and orange background color?) Oct 24, 2014 at 9:36
  • @jessieomline ... edited. now you can dynamically change the #fa0 color. Oct 24, 2014 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.