CSS Stacked Bar Graphs
00
Price:free
<p>< ;dl id="csschart">& lt;br />
<dt>Mon</dt&g t;<br />
<dd class="p36">&am p;lt;span><b>36& ;lt;/b></span>& lt;/dd><br />
<dd class="sub p30" ><span><b&am p;gt;30</b></span&a mp;gt;</dd><br />
</dl></p>
<p> </p>
<p>dl#csschart, dl#csschart dt, dl#csschart dd{<br />
margin:0;<br />
padding:0;<br />
}<br />
dl#csschart{<br />
background:url(../images/bg_chart.gif) no-repeat 0 0;<br />
width:454px;<br />
height:360px;<br />
padding-left:11px;<br />
}<br />
dl#csschart dt{<br />
display:none;<br />
}<br />
dl#csschart dd{<br />
position:relative;<br />
float:left;<br />
display:inline;<br />
width:33px;<br />
height:330px;<br />
margin-top:22px;<br />
}<br />
dl#csschart span{<br />
position:absolute;<br />
display:block;<br />
width:33px;<br />
bottom:0;<br />
left:0;<br />
z-index:1;<br />
color:#555;<br />
text-decoration:none;<br />
}<br />
dl#csschart span b{<br />
display:block;<br />
font-weight:bold;<br />
font-style:normal;<br />
float:left;<br />
line-height:200%;<br />
color:#fff;<br />
position:absolute;<br />
top:5px;<br />
left:3px;<br />
text-align:center;<br />
width:23px;<br />
}<br />
<br />
/* Styling the Bars. */<br />
<br />
dl#csschart span{<br />
height:50%;<br />
background:url(../images/bar.png) repeat-y;<br />
}<br />
dl#csschart .sub{<br />
margin-left:-33px;<br />
<br />
}<br />
dl#csschart .sub span{<br />
background:url(../images/subBar.png) repeat-y;<br />
}<br />
<br />
dl#csschart .p0 span{height:0%}<br />
dl#csschart .p1 span{height:1%}<br />
dl#csschart .p2 span{height:2%}<br />
dl#csschart .p3 span{height:3%}<br />
dl#csschart .p4 span{height:4%}<br />
dl#csschart .p5 span{height:5%}<br />
<br />
/*This continues until 100%*/<br />
</p>
<p><ul class="yAxis">& lt;br />
<li>100</li&g t;<br />
<li>90</li> ;<br />
<li>80</li> ;<br />
<li>70</li> ;<br />
<li>60</li> ;<br />
<li>50</li> ;<br />
<li>40</li> ;<br />
<li>30</li> ;<br />
<li>20</li> ;<br />
<li>10</li> ;<br />
</ul><br />
</p>
<p><ul class="xAxis">& lt;br />
<li>Mon</li&g t;<br />
<li>Tue</li&g t;<br />
<li>Wed</li&g t;<br />
<li>Thu</li&g t;<br />
<li>Fri</li&g t;<br />
<li>Sat</li&g t;<br />
<li>Sun</li&g t;<br />
</ul><br />
</p>
<p>ul.xAxis{<br />
margin:0 0 0 27px;<br />
padding:0;<br />
float:left;<br />
clear:left;<br />
display:inline;<br />
width:454px;<br />
}<br />
ul.yAxis{<br />
margin:14px 0 0 0;<br />
padding:0;<br />
display:inline;<br />
float:left;<br />
}<br />
ul.xAxis li{<br />
float:left;<br />
list-style:none;<br />
width:33px;<br />
text-align:center;<br />
}<br />
ul.yAxis li{<br />
list-style:none;<br />
height:33px;<br />
text-align:right;<br />
float:left;<br />
clear:left;<br />
}<br />
</p>
Comments
Post new comment