CODEWITHSUNDEEP
htmlcss
h2O
h2O

Reputation: 544

CSS for making simple graph

I have to make a graph using simple CSS. In this graph, a background color of grey is displayed and on top of it, varying a background color of blue is displayed of varying width showing the number of items loaded. Please refer to my jsfiddle for this example. It is located at http://jsfiddle.net/mzCdb/1/ .

The problem with my code is that I want the "4/10" overlapping between teh blue and the grey portion when the width of the blue portion is 50% unlike the second graph in my fiddle. The following is my html code :-

<div class="graph">
<div class="graph-within">
</div>
<div style="text-align:center;float:left;color:#888;font-weight:bold;
font-family:Tahoma;font-size:15px;">4/10</div>
</div>

Please view the CSS code from the fiddle. Any help will be appreciated. Thanks in advance.

Upvotes: 0

Views: 955

Answers (3)

Nick R
Nick R

Reputation: 7784

JSFiddle Demo

Position the 4/10 element absolutely.

CSS

.graph {
    background:#e5e5e5;
    height:25px;
    width:100px;
    position:relative;
}
.graph-within {
    background:#0088cc;
    height:100%;
    width:40%;
    float:left;
}
span {
    position:absolute;
    top:2px;
    left:0;
    width:100%;
    text-align:center;
    float:left;
    color:#888;
    font-weight:bold;
    font-family:Tahoma;
    font-size:15px;
}

HTML

<div class="graph">
    <div class="graph-within"></div>
<span>4/10</span>

</div>
<br>
<br>
<div class="graph">
    <div class="graph-within" style="width:70%;"></div>
<span>4/10</span>

</div>

Upvotes: 0

skrat
skrat

Reputation: 5562

Use negative margins to make the blur bar occupy no space.

.graph{
background:#e5e5e5;
height:25px;
width:100px;
overflow: hidden;
}
.graph-within{
background:#0088cc;
margin-right: -100%;
height:100%;
width:40%;
float:left;
}
.label{
text-align:center;
margin-right: 5px;
color:#888;
font-weight:bold;
font-family:Tahoma;
font-size:15px;
}

http://jsfiddle.net/mzCdb/2/

Upvotes: 0

Turnip
Turnip

Reputation: 36632

You could absolutely position the text within the graph:

.graph .text {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 25px;
    text-align: center;
    width: 100px;
}

DEMO

Upvotes: 1

Related Questions