Für alle die ein ganz simples Balkendiagramm suchen, dass rein mit CSS und ohne Bilder umgesetzt wird und in allen Browsern funktioniert, gibt es nun die Easy CSS Bar Charts. Das ganze gibts in einer horizontalen und vertikalen Version, wobei der HTML Quelltext beinahe ident bleiben kann.
Example
Check out the Example | Beispiel ansehen
Works with: IE6, IE7, IE8, Latest Firefox, Chrome, Safari and Opera Versions
Easy CSS Bar Chart – Horizontal Style
HTML
<dl class="horizontal"> <dt>Avatar</dt> <dd><span style="width:100%;">$ 2.740 Mio.</span></dd> <dt>Titanic</dt> <dd><span style="width:80%;">$ 1.843 Mio.</span></dd> <dt>Lord of the Rings</dt> <dd><span style="width:43%;">$ 1.119 Mio.</span></dd> <dt>Pirates of the Caribbean</dt> <dd><span style="width:40%;">$ 1.066 Mio.</span></dd> <dt>Alice in Wonderland</dt> <dd><span style="width:38%;">$ 1.021 Mio.</span></dd> <dt>The Dark Knight</dt> <dd><span style="width:35%;">$ 1.00 Mio.</span></dd> </dl>
CSS
dl.horizontal {font-size:12px; font-family:Arial; width:500px;} dl.horizontal dt {float:left; width:150px; clear:both; margin:0 0 5px 0; padding:3px;} dl.horizontal dd {float:left; width:300px; border:1px solid #aaaaaa; margin:0 0 5px 0; padding:2px; -moz-box-shadow: 1px 1px 3px #aaaaaa;} dl.horizontal dd span {background:#1770d3; display:block; color:#ffffff; text-indent:4px;}
Easy CSS Bar Chart – Vertical Style
HTML
<dl class="vertical"> <dt>Avatar</dt> <dd><span style="height:100%;">$ 2.740 Mio.</span></dd> <dt>Titanic</dt> <dd><span style="height:80%;">$ 1.843 Mio.</span></dd> <dt>Lord of the Rings</dt> <dd><span style="height:43%;">$ 1.119 Mio.</span></dd> <dt>Pirates of the Caribbean</dt> <dd><span style="height:40%;">$ 1.066 Mio.</span></dd> <dt>Alice in Wonderland</dt> <dd><span style="height:38%;">$ 1.021 Mio.</span></dd> <dt>The Dark Knight</dt> <dd><span style="height:35%;">$ 1.00 Mio.</span></dd> </dl>
CSS
dl.vertical {font-size:12px; font-family:Arial;} dl.vertical dt {float:left; width:60px; margin:260px 0 0 0; text-align:center;} dl.vertical dd {float:left; width:60px; height:200px; margin:50px 15px 0 -60px; padding:0px 2px 0px 2px; border:1px solid #aaaaaa; position:relative; -moz-box-shadow: 1px 1px 3px #aaaaaa;} dl.vertical dd span {width:60px; display:block; position:absolute; bottom:0px; background:#d3179c; color:#ffffff; text-align:center;
Der einzige Unterschied zwischen Horizontal & Vertical im HTML ist, dass bei der Horizontalen Version der span eine Breite bekommt und bei der vertikalen Version eine Höhe.
Download Horizontal & Vertical Version
Easy CSS Bar Chart (1,0 KiB, 2.018 hits)
Mellissa Flater schreibt:
Your weblog is so informative … sustain the great paintings!!!!