online 1
gast (50)

/ Forum / Webseiten/HTML

Webseiten/HTMLWebseiten/HTML

Fragevon abschweb vom 18.04.2019, 15:33 Options

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.htm

Manfred


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 6 von rfb vom 19.04.2019, 13:27 Options

evtl. hilft dir siese Lektüre zu Unerklärliche Lücken zwischen Elementen

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.htm

Um 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

Ähnliche Themen

Befehlstabelle für css
fabi1991  12.04.2007 - 107 Hits - 6 Antworten

CSS-Stile sind verschwunden
Luse  13.04.2007 - 129 Hits - 2 Antworten

css in html einfügen
Mikoop  22.02.2008 - 202 Hits - 10 Antworten

Direktformatiertes CSS "überschreiben"
Mich  23.02.2008 - 76 Hits - 3 Antworten

eigene klasse in css
TByte  11.04.2008 - 73 Hits - 34 Antworten

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Version: supportware 1.9.150 / 10.06.2022, Startzeit:Mon Jan 26 01:23:17 2026