CSS Code
1 | /* UI Object */ |
2 | .v_graph{ padding : 20px 0 } |
3 | .v_graph ul{ height : 200px ; margin : 0 ; padding : 0 ; border : 1px solid #ddd ; border-top : 0 ; border-right : 0 ; font-size : 11px ; font-family : Tahoma , Geneva, sans-serif ; list-style : none } |
4 | .v_graph ul:after{ display : block ; clear : both ; content : "" } |
5 | .v_graph li{ display : inline ; float : left ; position : relative ; width : 8% ; height : 100% ; margin : 0 3% ; text-align : center ; white-space : nowrap } |
6 | .v_graph .g_term{ display :inline- block ; position : relative ; width : 100% ; height : 20px ; margin : 0 -100% -20px 0 ; padding : 200px 0 0 0 ; font-weight : bold ; color : #767676 ; line-height : 20px ; vertical-align : bottom } |
7 | .v_graph .g_bar{ display :inline- block ; position : relative ; width : 100% ; margin : -1px 0 0 0 ; border : 1px solid #ccc ; border-bottom : 0 ; background : #e9e9e9 ; vertical-align : bottom } |
8 | .v_graph .g_bar span{ position : absolute ; top : -20px ; left : 0 ; width : 100% ; color : #767676 } |
9 | /* //UI Object */ |
HTML Code
01 | <!-- UI Object --> |
02 | < div class = "v_graph" > |
03 | < ul > |
04 | < li >< span class = "g_term" >SUN</ span >< span class = "g_bar" style = "height:0%" >< span >0%</ span ></ span ></ li > |
05 | < li >< span class = "g_term" >MON</ span >< span class = "g_bar" style = "height:20%" >< span >20%</ span ></ span ></ li > |
06 | < li >< span class = "g_term" >TUE</ span >< span class = "g_bar" style = "height:30%" >< span >30%</ span ></ span ></ li > |
07 | < li >< span class = "g_term" >WED</ span >< span class = "g_bar" style = "height:40%" >< span >40%</ span ></ span ></ li > |
08 | < li >< span class = "g_term" >THU</ span >< span class = "g_bar" style = "height:50%" >< span >50%</ span ></ span ></ li > |
09 | < li >< span class = "g_term" >FRI</ span >< span class = "g_bar" style = "height:60%" >< span >60%</ span ></ span ></ li > |
10 | < li >< span class = "g_term" >SAT</ span >< span class = "g_bar" style = "height:100%" >< span >100%</ span ></ span ></ li > |
11 | </ ul > |
12 | </ div > |
13 | <!-- //UI Object --> |