Startseite > Sterne-Bewertungen
Sterne-Bewertungen für Testberichte
Bewertungs-Sterne: Wer gelegentlich Testberichte schreibt, möchte vielleicht seine Bewertung auch grafisch ausdrücken. Dafür sind Sterne ein beliebtes Mittel. Hierzu eignet sich die CSS-Klasse stern mit den Unterklassen stern1 (1 Stern) bis stern6 (6 Sterne). Die sechs Bilder sind in einer Sprite-Datei gespeichert (das erfordert nur eine Anfrage an den Server statt sechs Anfragen) und werden daraus ausschnittweise als Hintergrundbilder angezeigt. Die div-Behälter für die Sterne werden mit float: left; positioniert. Ausführliche Informationen zu CSS-Sprites erhalten Sie in meinem Blog.
Hier als Beispiele die Anzeige von drei (ausreichend) und sechs Sternen (sehr gut):
3 Sterne: ausreichend
6 Sterne: sehr gut
HTML-Quelltext (für 6 Sterne):
<div class="stern"> <div class="stern6"> </div> <div class="note">6 Sterne: sehr gut </div> </div>