Supportnet / Forum / Webseiten/HTML

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. [url]http://www.abschweb.de/abschweb.html?fluege/fluege.html?statistik.htm[/url] Manfred

Setz die Werte für margin und padding von tr, td und was du noch alles benutzen könntest, auf 0.

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?

@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

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.

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

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

Danke für den Link.
Ich denke ich werde die kleinen Werte mit speziellen Grafiken realisieren, größere Werte mit eingefärbten divs.

Manfred

So habe ichs jetzt gemacht.
Funktioniert gut. Ist anders wohl nicht machbar.

Manfred

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?

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

• Befehlstabelle für css
• CSS-Stile sind verschwunden
• css in html einfügen
• Direktformatiertes CSS "überschreiben"
• eigene klasse in css