Code: Select all
<style>
#stats {
margin-left:305px;
background:url(../images/bg.png);
width:200px;
height:170px;
font:bold Arial, Helvetica, sans-serif;
color:rgb(255, 255, 255);
color:white;
}
#hpointsback {
position:relative;
margin-left:10px;
z-index:1;
}
#hpoints {
position:relative;
margin-left:10px;
z-index:2;
}
#expback {
position:relative;
margin-left:10px;
z-index:1;
}
#experience {
position:relative;
margin-left:10px;
z-index:2;
}
</style>
Code: Select all
<!-- THIS IS THE HEALTH BAR CODE-->
<?php
$username = $_SESSION["username"];
$sql = "SELECT * FROM users WHERE username='$username' AND activated='1' LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);
// Now make sure that user exists in the table
$numrows = mysqli_num_rows($user_query);
$row = mysqli_fetch_array($user_query, MYSQLI_ASSOC);
?>
<!-- THIS IS THE HEALTH BAR CODE-->
<div id="stats">
<div id= "hpointsback">
<?php
echo "<img src='images/barback1.png'>";
?>
</div>
<div id= "hpoints">
<?php
$width = ($row['hpoints'] / $row['maxhp']) * 150;
echo "<img src='images/hpoints1.png' width='$width' height='10'>";
?>
<!-- THIS IS THE EXPERIENCE BAR CODE-->
</div>
<div id= "expback">
<?php
echo "<img src='images/barback1.png'>";
?>
</div>
<div id= "experience">
<?php
$width = ($row['userexp'] / $row['maxexp']) * 150;
echo "<img src='images/experience.png' width='$width' height='10'>"; ?>
</div>
</div>
EDIT*****************
I also didn't put any margin-top to line them up on top of one another, because it doesn't work. All they do is just go right under one another... they will not overlap grrrr