css Balkendiagramm
Hallo Experten,
ich versuche ein Balkendiagramm mit CSS zu realisieren,
ich denke, das müsste prinzipiell möglich sein.
Aber es gelingt mir nicht. Wie schaffe ich es, dass die rötlichen Balken gleichmäßig unten bündig und die bläulichen Balken gleichmäßig oben bündig stehen?
Der Abstand zwischen den zusammengehörigen Balken söllte 0 oder jedenfalls einstellbar schmal sein.
http://www.abschweb.de/abschweb.html?fluege/fluege.html?statistik.htmManfred
Antwort schreiben
Antwort 1 von Roro vom 18.04.2019, 16:48 Options
Setz die Werte für margin und padding von tr, td und was du noch alles benutzen könntest, auf 0.
Antwort 2 von rfb vom 18.04.2019, 16:58 Options
Was ist daran CSS außer der Position in den Tabellenelementen?
Deine Klassennamen sind übrigens nicht sehr hilfreich zum Verstehen des Quellcodes. Warum nicht sowas wie "negativ/positiv"? Dann ist die Bedeutung auf Anhieb klar. Und wenn sowieso die ganze Tabellenzeile die gleiche Klasse erhält, dann setz sie ins tr-Element, nicht in jedes einzelne td.
Ich vermute mal, dass deine Frage den IE betrifft, denn im Opera siehts so aus, wie ich deine Beschreibung verstehe. Du schickst den IE aber auch absichtlich in den Quirksmodus - wie siehts denn normal aus?
Antwort 3 von abschweb vom 18.04.2019, 22:50 Options
@rfb
ich gebe zu, ich hab es schnell hngerotzt.
Es werden ja auch noch keine echten Daten dargestellt.
Jetzt hab ich doctype nachgetragen.
Es ändert sich absolut nichts dadurch.
Der Quirksmodus hat also keinen Unterschied gemacht.
Ich habe nicht Klassennamen positiv / negativ verwendet,
weil das mit der tatsächlichen Bedeutung nichts zu tun hat.
Du siehst es richtig, es soll auf dem IE funktionieren.
Manfred
Antwort 4 von rfb vom 19.04.2019, 07:57 Options
Zitat:
Der Quirksmodus hat also keinen Unterschied gemacht.
doch, hat er - Standard siehts auch im Opera nicht so gut aus.
Aber wenigstens ist es dann einheitlich!
Wenn du nun die untere Tabellenzellen-Zeile einfärbst und statt mit den GIFs Farbe hinzuzufügen diese entfernst (also GIFs in der Seiten-HG-Farbe nimmst und diese wie in der oberen zeile einfügst) müsste der gewünschte Effekt entstehen.
Mit semantisch korrektem HTML hat das aber sowieso nix zu tun.
Antwort 5 von abschweb vom 19.04.2019, 09:33 Options
Ich hab mal testhalber die Hintergründe der Zellen eingefärbt.
Dann sieht man, dass ich auf jeden Fall noch den Abstand der oberen Balken zur Trennlinie wegbringen muss. Das mit dem invertiert gestalten in der unteren Reihe dürfte funktionieren, sehe ich auch so.
Manfred
Antwort 7 von abschweb vom 20.04.2019, 07:28 Options
Danke für den Link.
Ich denke ich werde die kleinen Werte mit speziellen Grafiken realisieren, größere Werte mit eingefärbten divs.
Manfred
Antwort 8 von abschweb vom 22.04.2019, 07:26 Options
So habe ichs jetzt gemacht.
Funktioniert gut. Ist anders wohl nicht machbar.
Manfred
Antwort 9 von abschweb vom 07.11.2019, 12:58 Options
So, bis jetzt habe ich mich damit beschieden, dass es im IE gut aussieht (
http://www.abschweb.de/fluege/fluege.html?statistik.htm), jetzt habe ich die Muße, zu versuchen, es auch auf dem FF gut aussehen zu lassen. Hier habe ich eine Testdatei, auf der das Problem gut zu sehen ist:
http://www.abschweb.de/test/statistik.htmUm zu zeigen, was Kerngrafik und was zusätzliches Padding ist, habe ich die Hinterfarbe der Balkenklasse aufgehellt.
Mache ich ein Leerzeichen zwischen <img ... > und </div>,
dann sieht es auf dem IE genauso mies aus wie auf dem FF
(siehe 2. Tabelenzeile).
Wie kann ich dem FF dieses blöde automatische Padding abgewöhnen?
Antwort 10 von abschweb vom 08.11.2019, 08:40 Options
Es bahnt sich wohl eine Krüppellösung an, schmutzig wie ein Kuhstall.
Ich habe probiert, was passiert, wenn ich das das <img> umgebende <div> weglasse und dessen Eigenschaften dem <img> zuweise. FF sieht dann viel besser aus, aber der IE hat dann Probleme mit der Unten-Bündigkeit.
Ich habe keine Lösung, die auf beiden Browsers funktioniert.
Mit einer Javascript-Browserweiche gehts natürlich.
Hier lassen sich alle Varianten angucken:
http://www.abschweb.de/test/statistik.htm