Parent Directory | Revision Log
add CSS area graph from http://www.khanate.co.uk/graph/
1 | /* style graph */ |
2 | |
3 | ul.graphon |
4 | { |
5 | float: left; |
6 | display: block; |
7 | border: 1px solid #ccc; |
8 | margin: 0px; |
9 | padding: 1em 2.5em; |
10 | background: #fff; |
11 | position: relative; |
12 | list-style-type: none; |
13 | } |
14 | |
15 | /* |
16 | * html ul.graphon { |
17 | padding-bottom: 25px; |
18 | } |
19 | */ |
20 | |
21 | ul.graphon:after |
22 | { |
23 | content: '.'; |
24 | display: block; |
25 | height: 0px; |
26 | width: 0px; |
27 | visibility: hidden; |
28 | clear:both; |
29 | } |
30 | |
31 | ul.graphon li |
32 | { |
33 | float:left; |
34 | width: 0px; |
35 | color: #f00; |
36 | background: #f00; |
37 | position: relative; |
38 | border-width: 0px; |
39 | border-color: #f00; |
40 | border-right-width: 50px; |
41 | border-style:solid; |
42 | border-top-color: #fff; |
43 | padding: 0px; |
44 | margin: 0px; |
45 | } |
46 | |
47 | ul.graphon li.down |
48 | { |
49 | border-right-width: 0px; |
50 | border-left-width: 50px; |
51 | } |
52 | |
53 | ul.graphon li.last |
54 | { |
55 | border-width: 0px; |
56 | } |
57 | |
58 | ul.graphon li span.val |
59 | { |
60 | display: block; |
61 | position: absolute; |
62 | top: -17px; |
63 | left: -20px; |
64 | width: 40px; |
65 | font-size: 10px; |
66 | border: 1px solid #000; |
67 | text-align: center; |
68 | background: #fdd; |
69 | color: #000; |
70 | height: 15px; |
71 | } |
72 | ul.graphon li.down span.val |
73 | { |
74 | top: -67px; |
75 | left: -70px; |
76 | } |
77 | ul.graphon li span.name |
78 | { |
79 | position: absolute; |
80 | bottom: -22px; |
81 | display: block; |
82 | left: -20px; |
83 | height: 20px; |
84 | width: 40px; |
85 | font-weight: bold; |
86 | text-align: center; |
87 | color: #000; |
88 | } |
89 | |
90 | ul.graphon li.down span.name |
91 | { |
92 | left: -70px; |
93 | } |
94 | |
95 | |
96 | |
97 | /* style unorderd list into table */ |
98 | |
99 | ul.graph { |
100 | float: left; |
101 | margin: 0px; |
102 | padding: 0px; |
103 | background: #fff; |
104 | /* |
105 | height: 20em; |
106 | overflow: auto; |
107 | */ |
108 | border: 1px solid #ccc; |
109 | border-bottom: 0px; |
110 | } |
111 | |
112 | /* table rows */ |
113 | .graph li |
114 | { |
115 | display: block; |
116 | clear: both; |
117 | width: 20em; |
118 | border: 0px; |
119 | border-bottom: 1px solid #ccc; |
120 | padding: 0; |
121 | margin: 0; |
122 | } |
123 | .graph li:after |
124 | { |
125 | content: '.'; |
126 | display: block; |
127 | height: 0px; |
128 | width: 0px; |
129 | visibility: hidden; |
130 | clear:both; |
131 | } |
132 | |
133 | /* left column */ |
134 | .graph .name { |
135 | width: 10em; |
136 | text-align: left; |
137 | float: left; |
138 | border-right: 1px solid #ccc; |
139 | } |
140 | |
141 | .graph .val { |
142 | float:left; |
143 | } |
ViewVC Help | |
Powered by ViewVC 1.1.26 |