[Sg-webseite] Fortschrittsbalken fuer 100k-Seite

[Wolfgang Wiese <pirat AT xwolf.de>]

Hi Bernd,


Für die rechte Spalte würde ich folgenden Code verwenden:
(zu sehen auf stagings2)

Einzutragen im Custom Field "Rechte Spalte".

======

<div style="width: 279px; margin: 0 auto;" >
<style>
table#itspende {width: 100%; margin: 0; padding: 0;}
table#itspende progress { width: 160px };
table#itspende td { text-align: right; }
table#itspende tr.gesamt{ background: rgba(0,0,0,0.1); }
</style>
<h2>Spendenstand</h2>
<table id="itspende">
<tr><th>Storage</th><td style="text-align: right"><progress max="36000" 
value="0"></progress><br> 0 / 36.000 € </td></tr>
<tr><th>Switch</th><td style="text-align: right"><progress max="6000" 
value="0"></progress><br> 0 / 6.000 € </td></tr>
<tr><th>Festplatten</th><td style="text-align: right"><progress 
max="1500" value="0"></progress><br> 0 / 1.500 €</td></tr>
<tr><th>Firewall</th><td style="text-align: right"><progress max="1600" 
value="0"></progress><br> 0 /  1.600 €</td></tr>
<tr><th>KVM</th><td style="text-align: right"><progress max="3600" 
value="0"></progress><br> 0 / 3.600 €</td></tr>
<tr><th>Software</th><td style="text-align: right"><progress max="325" 
value="0"></progress><br> 0 / 325 €</td></tr>
<tr class="gesamt"><th>Gesamt</th><td style="text-align: 
right"><progress max="100000" value="0"></progress><br> 0 / 120.000 
€</td></tr>
</table>
</div>

======

Bei nicht modernen Browsern sieht man zwar keinen Fortschrittsbalken,
aber dafür trotzdem noch die Zahlenwerte.
Wir könnten zwar als Ersatzdarstellung noch ein flexibles Bild 
einstellen, dies würde aber in der Praxis jedesmal wenn wir die
Werte aktualisieren, einen heftigen Änderungsaufwand nach sich ziehen - 
da ist es so gut wie sicher, das man dann irgendwann mal was übersieht 
und Fehler macht.


Wenn die ersten Spenden eingehen, muss man um die Balken anzupassen nur
in den jeweiligen Tabellenzeilen gehen und den Attribut
 max=""  anpassen, sowie dahinter nochmal denselben Wert in der
Textform "x / Y &euro;"

Wenn mehr Zeit wäre, hätte man dafür vielleicht ein nettes Plugin
coden können, aber IMHO ist wichtiges es tut, als das es 
Informatikerschön ist :=)


Ciao,
 Wolfgang