[Galge]

Hallo,
ich habe ein Problem. Ich möchte mittels eines horizontalen Balkendiagrammes eine Trend anzeige machen, also mehr negativ oder mehr Positiv.

In Positiver richtung (bei mir rechts) ist das kein Problem. Aber wie kann ich die ganze geschichte von der mitte aus nach links laufen lassen?

Momentan ist es so gelöst, dass ich ein Bildhabe deren Breite geändert wird

Ich kann auch die größe eines in php erzeugten Balken verändern

aber beides geht nur nach rechts, von einem fixen punkt der links sitzt.

Weiter hab ich ein nettes scriptchen gefunden, dass je nach wert auch die Farbe ändert also von rot nach grün (ladebalken mäßig)


die sache zu invertieren bekomme ich einfach nicht auf die Reihe.

Kann mir da einer helfen?

[Chr!s]

Eine spontane Idee (es ist jetzt 02:30Uhr ) wäre doch, dass der fixe Punkt, von dem du sprichst, nicht ganz links ist, sondern eben genau die Mitte des Bildes. So kannst Du deinen Balken dann sowohl ins negative (nach links) als auch ins positive (nach rechts) schicken.

[Galge]

Aber wie?

ich kann zwar mit css definieren, das das ganze weiter nach rechts versetzt wird. aber Damit ist das Problem nur verschoben

[Xean]

warum malst du den balken nicht per php? dann musst du nur ein bild ein binden

[Chr!s]

Zitat von Galge

Ich kann auch die größe eines in php erzeugten Balken verändern

Nach diesem Satz aus deinem ersten Post bin ich davon ausgegangen, dass du die Balken bereits per PHP erzeugst.

Zitat von Galge

ich kann zwar mit css definieren, das das ganze weiter nach rechts versetzt wird. aber Damit ist das Problem nur verschoben

Wie Xean bereits sagte, erzeug das Ganze durch direkt per PHP-Grafik, das ist wohl auch sauberer als das rumgefrickel mit CSS.

[Bleistift]

CSS soll rumgefrickel sein? o.O
Ich finde solche Balken-Bilder Gefrickel, die man mit PHP generiert... Nur unnötig Traffic und Serverload.

Zur Lösung des Problems:

<!-- Das ist ein positiver Balken -->
<div style="width: 100px; margin-left: 100px;">100%</div>
<!-- Noch ein positiver Balken -->
<div style="width: 40px; margin-left: 100px;">40%</div>

<!-- Das ist ein negativer Balken -->
<div style="width: 40px; margin-left: 60px;">-40%</div>
<!-- Noch ein negativer Balken -->
<div style="width: 66px; margin-left: 33px;">-66%</div>

Klar?

[Chr!s]

Zitat von Bleistift

CSS soll rumgefrickel sein? o.O

Grundsätzlich natürlich nicht.

Zitat von Galge

ich kann zwar mit css definieren, das das ganze weiter nach rechts versetzt wird. aber Damit ist das Problem nur verschoben

Nach dieser Aussage hat sich sein CSS-Einsatz aber eher nach Rumgefrickel angehört.

Die Methode die Du vorstellst benötigt ebenso Traffic, denn jede CSS-Anweisung muss ja individuell neu für jeden einzelnen Balken generiert werden (die Balken bleiben ja selten mal gleich).

[Bleistift]

Zitat von Chr!s

Die Methode die Du vorstellst benötigt ebenso Traffic, denn jede CSS-Anweisung muss ja individuell neu für jeden einzelnen Balken generiert werden (die Balken bleiben ja selten mal gleich).

Aber das ist weit sparsamer, als die Generierung eines Bildes.

[Galge]

<div style="width: 40px; height: 18px; margin-left: 100px; background-color: #00EE00; border-left: 1px solid #000000; ;">40%</div>
<div style="width: 40px; height: 18px; margin-left: 60px; background-color: #FF3300; border-right: 1px solid #000000; top: -18px; position: relative;">-40%</div>

danke so klapts

[Bleistift]

Ah... So willst du das. Dann fände ich das aber fast besser:

<div style="width: 40px; height: 18px; background-color: #FF3300; border-right: 1px solid #000000; float: left; margin-left: 60px;">-40%</div>
<div style="width: 40px; height: 18px; background-color: #00EE00; border-left: 1px solid #000000; float: left;">40%</div>

[Galge]

kommt aufs selbe raus. Zumindest beim FF

der IE spinnt natürlich aber was will man machen...

edit: ach ja, bei deiner methode brauchst dann noch das clear: both;