0

Possible Duplicate:
Progress bar layout using CSS and HTML

I'm making a game that involves energy, EXP, level, missions, etc. Well, When you do missions it costs energy and you recieve cash and EXP once you do a mission. Well, it requires EXP to level up. Leveling up works, but I'm wanting to add a progress bar to show how close you are to level up. An example is Exp: 26,175/27,100. Each time you level the max_exp raises up 250, but was wanting a bar behind the text to show how close they are to level up instead of just seeing text. Here's the leveling coding below..

<?php
if ($exp >= $max_exp)
    {
    $sql = "UPDATE users SET level=(level + 1) , max_exp=(max_exp + 250) WHERE id='".$id."' LIMIT 1";
    $res = mysql_query($sql);
if ($exp >= $max_exp)
        echo '';
    }
    else
    {
    } 
    ?>
Community
  • 1
  • 1
Charles Moore
  • 103
  • 8
  • 2
    This has nothing to do with SQL, it would seem. If you have the numbers already, you just need to visually style them using HTML/CSS. – deceze Nov 22 '12 at 11:45
  • Well, I'm not using a percentage.. I'm using larger numbers that change frequently once you rank up. So kinda confused on how to do this. – Charles Moore Nov 22 '12 at 11:49
  • *Math.* `next_level = 750, current_points = 523`, calculate what percentage 523 of 750 is. I'll leave this exercise up to you. – deceze Nov 22 '12 at 13:46

2 Answers2

3

You can echo your ratio as inline css.

An example:

css:

div#value
{
    display: block; 
    z-index: 2;
    height: 10px;
}

php/html:

$value = 35;

//this line will give you "width: 35%"
<div id="value" style="width:<?php echo $value; ?>%;">
Erik Klop
  • 135
  • 1
  • 1
  • 6
1

It's just an HTML/CSS issue: make a table with just one row and TWO column (say one fullgreen, one white), then move the width ratio of the two columns according to your value

Gianluca Ghettini
  • 11,129
  • 19
  • 93
  • 159