Wie Sie mit CSS einfache Fortschrittsbalken und Diagramme erstellen

Mit CSS relativ einfach Fortschrittsbalken und Diagramme erstellen

Wenn Sie manchmal verschiedenartige Diagramme für die Darstellung bestimmter Statistiken benötigen, machen Sie vielleicht mit irgendeinem Programm ein Bild, welches Sie danach auf Ihrer Webseite/Ihrem Blog veröffentlichen.

Das Problem dabei ist aber folgendes:

Ändern sich Ihre ursprünglichen Daten, müssen Sie natürlich wieder zuerst das Bild neu abspeichern und neu veröffentlichen – ein Vorgang der oft sehr mühsam sein kann. Um auf das Bild verzichten zu können, gibt es diverse CSS Techniken, mit denen Sie auch relativ einfach wunderbare Diagramme erstellen können, welche dann einfacher zu warten sind.

Außerdem verlangsamt jede Grafik die Ladezeiten Ihrer Webseite – der Einsatz von CSS kann Ihnen somit auch helfen, diese zu kurz wie möglich zu halten!

Fertiges Beispiel ansehen [ Grafik oder Link anklicken!]

Super Simple CSS Bar – einfaches CSS-Diagramm

Erstellung der CSS-Diagramme

HTML-Formatierung:

Im Quellcode wird das HTML-Element-<fieldset>, welches normalerweise in Formularen eingesetzt wird, zu Hilfe genommen. In diesem wird danach durch das <legend>-Element die Diagramm-Überschrift festgelegt. Danach erfolgt die Festlegung von 2 <div>-Boxen.

Die div-Box div.progress-container wird mit Hilfe von CSS formatiert, bekommt jedoch auch einen Inline-Style, mit welchem die Gesamt-Breite/Länge des Diagrammes festgelegt werden soll.

In diese div-Box (div.progress-container) wird nun eine leere div-Box eingefügt. In dieser legen Sie mit einem Inline-Stylesheet den Prozentsatz des Diagrammes fest, welches Sie farbig darstellen möchten. Mit der Festlegung der Hintergrundfarbe können Sie hier die Farbe des Diagrammes (%-Anteil) festlegen.

HTML-Beispiel für ein Diagramm-Feld:

1
2
3
4
5
6
7

<fieldset>
<legend>200px 40% orange</legend>
<div class="progress-container" style="width: 200px">
<div style="width: 40%; background: orange;"></div>
</div>
<br/>
</fieldset>

Formatierung der Cascading Style Sheets:

Im CSS legen Sie mit der CSS-Klasse div.progress-container die äußere Form des Diagrammes fest.
Mit der CSS-Regel div.progress-container > div definieren Sie danach die leere div-Box. Mit der Festlegung der Hintergrundfarbe geben Sie dem Diagramm (%) erst das gewünschte Aussehen. Sie können die Hintergrundfarbe aber auch als Inline-Style bereits im HTML-Element <fieldset> definieren (siehe Erklärung zu HTML-Quellcode!)

Stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12

div.progress-container {
  border: 1px solid #ccc; 
  margin: 2px 5px 2px 0; 
  padding: 1px; 
  float: left; 
  background: white;
}
div.progress-container > div {
  background-color: #ACE97C; 
  height: 12px
}
fieldset { margin-bottom: 10px; }

In meinem Beispiel habe ich die Festlegung der Diagramm-Farben absichtlich vermischt, um Ihnen die beiden Möglichkeiten anschaulich vorzuführen. Die beiden ersten Diagramme werden direkt über den CSS-Befehl div.progress-container > div farblich dargestellt. Die Diagramme 3, 4, und 5 hingegen bekommen ihre Farbe über die Inline-Styles.

Fertiges Beispiel ansehen [ Grafik oder Link anklicken!]

Super Simple CSS Bar – einfaches CSS-Diagramm

Quelle: http://blog.leetsoft.com/2006/8/22/super-simple-css-bars

Ähnliche Artikel:

Wie Sie mit CSS schöne Bilderrahmen gestalten können
Wie Sie einen animierten Fortschrittsbalken mit CSS erstellen
CSS/HTML-Tricks: Unterschied zwischen relativer und absoluter Positionierung
CSS/HTML-Tricks: Float mit mehreren div-Boxen
5 Beispiele, wie Sie ungeordnete Listen formatieren können

Tags: CSS, CSS-Bar, Diagramm, Fortschrittsbalken, Statistik