Skip to content Skip to sidebar Skip to footer
Home / Html

HTML Vertical Bar Of Two Different Colors

Post a Comment
I want to make in HTML some statistic bar charts, to represent in the same bar two different values using two different colours, for example: from an exam of 10 questions, 6 questi

Solution 1:

You could try to do this:

PHP

<?php
$max = 300;
$mistakes = 100;
$scale = 1;
?>

HTML

<div style="height:<?=$max ?>px;" class="bar1"></div>
<div style="height:<?=$max-(mistakes*scale) ?>px;" class="bar2"></div>

CSS

.bar1{
    width:40px;
    background-color:red;
    position: absolute;
}
.bar2{
    width:40px;
    background-color:green;
    position: fixed;
}

http://jsfiddle.net/BDNXS/


Solution 2:

To make this code work properly, Make another class like:

.container {
       width : 40px;
       height: 100px;
       position: relative
 }

And make bar1 position relative and bar2 position absolute, bottom: 0px and z-index: 100. Now add your two divs inside the container class and set bar2 'top' instead of height in php.


Solution 3:

Does this match what you're looking for?

<?php
$max = 100;
$mistakes = 40;
$scale = 1;
?>
<html>
<style>
.bar1{
    width:40px;
    background-color:green;
    float:left;
        z-index:1;
        position: absolute;
}
.bar2{
    width:40px;
    background-color:red;
    float:left;
    z-index:2;
        position: absolute;
}
</style>
<div style="height:<?php echo $max ?>px;" class="bar1"></div>
<div style="height:<?php echo $max -($mistakes*$scale) ?>px;" class="bar2"></div>
</html>

I added an echo and got rid of the margin-top because it messes up the layout I think you're going for.


Post a Comment for "HTML Vertical Bar Of Two Different Colors"