Help with css bars

[jcvenom]

i need help with css bars i have never done this before

this is my energy bar and i want to make it css

 

<table width='99%' cellpadding='0' cellspacing='0'>
      <tr><td align = 'left' colspan = '2' height = '8px'></td></tr>
      <tr><td width = '40%' align = 'left'><b><span  rel = 'tooltip' title = '<b>Energy</b><img src = \"images/energy.gif\"><br/>Use energy for attacking and in the gym.'>Energy:</span></b> </td><td align = 'left'><span id = 'mie'><small>",$pl['my_energy'],"/",$pl['my_maxenergy'],"(";
      $loadtime = date('i')+1;
      if($pl['my_energy'] >= $pl['my_maxenergy'])
      {
      echo "full";
      }
      else
      {
      if($pl['my_dondays'])
      {
           if($loadtime > '50') { echo (60-$loadtime); }
      else if($loadtime > '40') { echo (50-$loadtime); }
      else if($loadtime > '30') { echo (40-$loadtime); }
      else if($loadtime > '20') { echo (30-$loadtime); }
      else if($loadtime > '10') { echo (20-$loadtime); }
      else if($loadtime > '00') { echo (10-$loadtime); }
      }
      else
      {
           if($loadtime > '45') { echo (60-$loadtime); }
      else if($loadtime > '30') { echo (45-$loadtime); }
      else if($loadtime > '15') { echo (30-$loadtime); }
      else if($loadtime > '00') { echo (15-$loadtime); }
      }
      echo "m:".(60-date('s'))."s";
      }
      echo ")</small></span></td></tr>

 

and here is my css

[css]

<div class="meter">

<span style="width: 25%"></span>

</div>

[/css]

i want to change this into a css bar can you help me please

[jcvenom]

anyone help dave, dayo ?

[a_bertrand]

Did you checked the forums? I'm pretty sure it has already been asked multiple times.

[jcvenom]

Did you checked the forums? I'm pretty sure it has already been asked multiple times.

i checked everything theres nothing there

Edited July 12, 2013 by jcvenom

[Zettieee]

Why not do something like:

$width = $energy/100

and then on the ccs side of things: width="$width"

[jcvenom]

Why not do something like:

$width = $energy/100

and then on the ccs side of things: width="$width"

maybe something like

 

$energy = $pl['my_energy'] / $pl['my_maxenergy'] * 100;
<div class="meter">
    <span style="width: <?php echo $energy; ?>%</span>
</div>

[Alan]

I seem to remember doing this 4+ years ago; I even used a neat trick that changed the color of the span depending on the width of it - but I'll leave that as an exercise. http://jsfiddle.net/2edJF/

[jcvenom]

I seem to remember doing this 4+ years ago; I even used a neat trick that changed the color of the span depending on the width of it - but I'll leave that as an exercise. http://jsfiddle.net/2edJF/

cheers thanks alan

[jcvenom]

this is annoying i cant get it

[KyleMassacre]

Looks like you used the snippets from css tricks so here is what i did:

Code

Execution Results

Feel free to play around with it

[jcvenom]

Looks like you used the snippets from css tricks so here is what i did:

Code

Execution Results

Feel free to play around with it

i like it kyle thanks i will see what i can do with it

[spikereloaded]

I thought you said in a different topic that you knew CSS3 venom?

Either way, simplest way to do it is have a parent div set to 100px wide with a background colour of your choice, then a child div floating left with a variable width (which is obviously your current percentage). Set this divs background to green, orange, whatever, close both divs and your done....well that's how I've done it

Purely css though, no fancy bells or whistles...personal preference I suppose.

Edited July 14, 2013 by spikereloaded

[jcvenom]

I thought you said in a different topic that you knew CSS3 venom?

Either way, simplest way to do it is have a parent div set to 100px wide with a background colour of your choice, then a child div floating left with a variable width (which is obviously your current percentage). Set this divs background to green, orange, whatever, close both divs and your done....well that's how I've done it

Purely css though, no fancy bells or whistles...personal preference I suppose.

thanks but see i really need someone to code it it my file

[KyleMassacre]

it shouldn't be that hard to do. I really suck at html/css but I did that in just about a minute on my phone. it is just simple copy and paste but if you need help real quick I can do it just send me the file or whatever here or hit me up on skype or I'm usually in irc

[spikereloaded]

ok simplest method :

 

<div class='parent_container' style='width:100px; height:10px; background:grey;'>//preferably style this in the head section as it will be the same for all bars

  <div class='child_progress' style='background:#33CC33; width:{percentage full variable here}px; height:10px; float:left;'></div>

</div>

[lucky3809]

Torn.com uses this with css... exactly like spikereloaded has posted... the first div is the background under it when it is used, and the second div is the color of the bar and the percentage left ..

[jcvenom]

ok guys i will see what i can do i am good at css but i usually work on website etc but now im trying game engines thanks guys :)

[spikereloaded]

ok guys i will see what i can do i am good at css but i usually work on website etc but now im trying game engines thanks guys :)

Hmm not sure how much that makes sense...the code I posted is nothing you couldnt put in a normal html file. But glad to have helped!