Complex CSS Bar Graph
01
Price:free
<style>
dl {
&n bsp; margin: 0;
&n bsp; padding: 0; &n bsp; &nbs p;
}
dt {
&n bsp; position: relative; /* IE is dumb */
&n bsp; clear: both;
&n bsp; display: block;
&n bsp; float: left;
&n bsp; width: 104px;
&n bsp; height: 20px;
&n bsp; line-height: 20px;
&n bsp; margin-right: 17px; ; &nb sp;
&n bsp; font-size: .75em;
&n bsp; text-align: right;
}
dd {
&n bsp; position: relative; /* IE is dumb */
&n bsp; display: block; &nbs p; &n bsp;
&n bsp; float: left;
&n bsp; width: 197px;
&n bsp; height: 20px;
&n bsp; margin: 0 0 15px;
&n bsp; background: url("g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */
dd div {
&n bsp; position: relative;
&n bsp; background: url("g_colorbar2.jpg");
&n bsp; height: 20px;
&n bsp; width: 75%;
&n bsp; text-align:right;
}
dd div strong {
&n bsp; position: absolute;
&n bsp; right: -5px;
&n bsp; top: -2px;
&n bsp; display: block;
&n bsp; background: url("g_marker.gif");
&n bsp; height: 24px;
&n bsp; width: 9px;
&n bsp; text-align: left;
&n bsp; text-indent: -9999px;
&n bsp; overflow: hidden;
}
</style>
<dl>
<dt>Love Life</dt>
<dd>
&n bsp; <div style="width:25%;"><stro ng>25%</strong></div>
</dd>
<dt>Education</dt>
<dd>
&n bsp; <div style="width:55%;"><stro ng>55%</strong></div>
</dd>
<dt>War Craft 3 Rank</dt>
<dd>
&n bsp; <div style="width:75%;"><stro ng>75%</strong></div>
</dd>
</dl>
Comments
IxbIMdMiEpcjzZrtKS
Post new comment