|
||||
"Umfragebalken" wie am besten erstellen?
Moin,
ihr kennt ja alle bei Umfragen diese Balken, die in % und mit passender Länge irgendwelche Ergebnisse anzeigen. Da dies ja dynamisch erstellt wird, überlege ich mir gerade, wie ich diese Balken am besten erzeuge via CSS. Die "simple" Variante wäre ein billiges DIV mit Farbfüllung, in das ich pro Balken direkt die Breite reinsetze, z.B. <div style="width: 24px;>12%</div> <div style="width: 12px;>6%</div> Das ist allerdings alles andere als "schön". Eine andere Methode wäre es, ein Bild zu nehmen und das entsprechend zu strecken, also <img src="balkenbild.png" width="132" height="12" /> <img src="balkenbild.png" width="64" height="12" /> Wie würdet ihr es machen vom Markup + CSS her?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic Geändert von Boris (05.05.2010 um 14:55 Uhr) |
Sponsored Links |
|
||||
Die Anzahl der Antworten ist allerdings variabel. Wie willst du das dann "individuell" machen, zumal die Balkenlänge ebenso variabel ist?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
||||
Dagegen spricht nix, ich sammle nur weitere Ideen
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
||||
Hab' gerade mal danach gesucht und bin sofort auf diesen Link gestossen: 16 Usable CSS Graph and Bar Chart Tutorials and Techniques - Speckyboy Design Magazine
Da sind ein paar Charts aufgelistet, leider funktioniert nicht mehr jeder Link, aber ich denke für ein paar Ideen reicht's. Generell würde ich die Balken eher in ein Element wrappen, welches dann die Ausmaße in z.B. Pixel erhält, aber die Balken selbst per Prozentangaben ausrichten, wäre wohl deutlich schöner, wenn das Diagramm in den Ausmaßen geändert werden soll, einfach den Wrapper anpassen und fertig. |
|
||||
Merci
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
||||
Ich würde es auch mit einer Liste versuchen. Die Innen- und Aussenabstände würde ich zurücksetzen und der Liste <ul> eine bestimmte Breite verpassen. Die einzelnen Punkte <li> sind dann jeweils mit einem Hintergrundbild bestückt und die berechneten Prozente werden als Längenangabe und Text benutzt.
Zu Beispiel: HTML-Code:
<ul style="width:40em;"> <li style="width:10%;">10%</li> <li style="width:25%;">25%</li> <li style="width:15%;">15%</li> <li style="width:50%;">50%</li> </ul>
__________________
Mit freundlichen Grüssen "Pascolo" Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese Geändert von Pascolo (07.05.2010 um 15:41 Uhr) Grund: Korrektur des Textes |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Webseite erstellen | Electrohunter | (X)HTML | 2 | 12.03.2010 13:12 |
erste page erstellen | dude91 | (X)HTML | 10 | 25.01.2010 11:18 |
Drucklayout erstellen, wie am besten vorgehen? | uooao388d99 | CSS | 1 | 20.09.2009 22:04 |
Faux Columns Hintergrund erstellen | SPMan | CSS | 24 | 25.05.2007 16:58 |
möchte gerne eine laufleiste mit bildern erstellen. | GateKay | (X)HTML | 0 | 02.02.2005 21:17 |