zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden "Umfragebalken" wie am besten erstellen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.05.2010, 14:50
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard "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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.05.2010, 15:07
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

ich würde wohl ne ul nehmen.
Die li's bekommen jeweils eine andere id, mit der ich unterschiedlich gestalten kann.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.05.2010, 15:19
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 05.05.2010, 18:17
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Boris Beitrag anzeigen
Die Anzahl der Antworten ist allerdings variabel. Wie willst du das dann "individuell" machen, zumal die Balkenlänge ebenso variabel ist?
dann hab ich dich falsch verstanden.
Das gehört dann wohl eher in den Scriptbereich.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 05.05.2010, 18:30
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Was spricht denn gegen die Methode des gestreckten Bildes? Könnte doch eine kleine, einfarbige Grafik sein. Das hat den Vorteil, dass es nur ein Request benötigt, im Cache bleibt und beliebig skalierbar ist.
__________________
github | http://dnaber.de
Mit Zitat antworten
  #6 (permalink)  
Alt 05.05.2010, 21:35
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 07.05.2010, 14:34
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 07.05.2010, 14:59
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Merci
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #9 (permalink)  
Alt 07.05.2010, 15:21
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

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>
So zumindest würde ich es machen. Ich schaue immer darauf, dass die berechneten Prozente mit den Längenangaben bei der Darstellung übereinstimmen. So erspare ich mir eine Berechnung. Ein Problem ist allerdings: Was mache ich, wenn CSS ausgeschaltet ist? Dann musst du wohl den Umweg über die Bilder machen.
__________________
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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:55 Uhr.