nicht angemeldet
Höhe eines <span> innerhalb eines <td>
Hallo Leute,
erst mal ein paar Links zum Aufwärmen:
http://www.schroepl.net/pbm/partien/yield/_1906_h/boerse.htm
und http://jigsaw.w3.org/css-validator/validator?uri=http://www.schroepl.net/pbm/partien/yield/_1906_h/boerse.htm
Die entsprechende Tabelle enthält rechts jeweils kleine Balken, welche die Änderung der Zahlenwerte gegenüber der vorherigen symbolisieren sollen. Drüberfahren mit der Maus aktiviert einen entsprechenden Tooltip (<img title="aktion">).
In allen Zeilen außerderjenigen von Dabbelju funktioniert es wie gewünscht mit allen modernen Browsern. Dort habe ich jeweils 1px-GIFs verwendet.
Nun möchte ich aber auch noch die Farbtöne den exakten Beträgen entsprechend 'stufenlos' erzeugen (jeweils 127 verschiedene Intensitäten für grün bzw. rot wären okay). Dafür aber 255 kaum noch cacheable GIFs zu verwenden und massenhaft HTTP-Requests zu provozieren, das kann's nicht sein. Das Problem schreit nach einer Lösung mit CSS.
Statt
<img src="buy1000.gif" alt="" title="+4172" height="10" width="6" />
möchte ich also
<span class="col" title="+4172" style="height:10px;line-height:10px;color:#009900;background-color:#009900;">_</span></td>
verwenden, oder etwas halbwegs Gleichwertiges. (<div> funktioniert beispielsweise überhaupt nicht, weil es in allen Browsern automatisch einen Umbruch auslöst, obwohl ich das dem <td> mit "white-space:nowrap;" explizit verboten habe).
Das angegebene <span>-Konzept habe ich in der Zeile von "Dabbelju" mal ausprobiert. Wenn jetzt noch die Browser das tun würden, was ich haben möchte ...
Im M$IE 5.5 funktioniert es nahezu perfekt - wenn man davon absieht, daß der Tooltip im Gegensatz der Variante auf dem GIF nun vie verrückt blinkt.
Aber immerhin stimmt die Größe des Balkens - und darum geht es mir bei meinem aktuellen Experiment. Ich brauche allerdings sowohl "height:" als auch "line-height:", ohne daß mir klar wäre, wieso.
Mozilla 0.9.9. ignoriert sämtliche Höhenangaben des <span> und stellt den Balken offenbar so hoch dar wie dsa <td>. Das ist für meine Zwecke unbrauchbar.
Opera 6.0 macht zunächst mal dasselbe wie Mozilla, aber darüber hinaus läßt es den Balken nach unten über den Zellenrand hinaus ragen. Das ist noch schlechter.
Außerdem ignoriert Opera den Inhalt des <span> vollständig, wenn dieser nur einen scheinbar nicht anzuzeigenden Inhalt hat, also keinen, ein Leerzeichen oder sogar ein . Deshalb mußte ich einen '_' verwenden - was mich wiederum dazu zwingt, für jedes <span> auch noch die "color:" auf denselben Wert wie die "background-color:" zu setzen (was bei über 100 Tabellenzellen das Dokument um fast 2 KB aufbläst).
Ich hätte nun gerne Tips, ob - und wie - ich meine Balken ohne Verwendung von GIFs malen kann, so daß es in M$IE 5.5+, Opera 6+ und Mozilla 0.9.9+ funktioniert.
Die zentrale Frage scheint mir zu sein, wie ich die Höhe eines <span> innerhalb eines <td> abweichend von den Eigenschaften des sonstigen <td>-Inhalts setzen kann ...
Viele Grüße
Michael
-
Hallo!
Warum machst du nicht einfach innerhalb deiner <td> eine eigene table wo du die höhe der grafik selbst bestimmen kannst ohne das der rest der vorherigen <td> davon affektiert ist?
Liebe Grüße,
Jürgen
-
Hallo Jürgen,
diese Idee hatte ich auch. Doch der Grund wird wohl einfach die Dokumentengröße sein (man kann mich auch gerne verbessern). Dies wird dann ganz schnell sehr groß, denn Micheals Tabelle hat recht viele Zellen, wo dann jeweils noch eine komplette Tabelle rein muß. Zudem wird es schnell sehr unübersichtlich, das ist aber ein anderes Thema...
Tschö...
Alex :)
-
Hi Alex und Jürgen,
diese Idee hatte ich auch. Doch der Grund wird wohl
einfach die Dokumentengröße sein (man kann mich auch
gerne verbessern). Dies wird dann ganz schnell sehr
groß, denn Micheals Tabelle hat recht viele Zellen,
wo dann jeweils noch eine komplette Tabelle rein muß.ganz genau.
Schlimmer noch: Eine <table> kriege ich nicht rechts neben den Zahlenwert - wie bei <div> machen alle Browser sofort einen Zeilenumbruch (weil das wohl alles blocklevel-Elemente sind?).
Ich müßte also zu jedem bisherigen Tabellenfeld erst mal rechts ein zweites Tabellenfeld dazu basteln (und die Überschriften etc. mit "colspan=2" setzen) und danach in diesen über 100 zusätzlichen neuen Tabellenfeldern jeweils eine vollständige 1*1-Tabelle einfügen ...
Das könnte ich natürlich so machen, aber nur im äußersten Notfall. Das ist dann gegenüber der bisherigen (funktionierenden) Lösung mit den GIFs m. E. schon keine Verbesserung mehr.Zudem wird es schnell sehr unübersichtlich, das ist
aber ein anderes Thema...Das würde ich aushalten.
Die Dokumente werden von einem (meinem) Programm generiert.Viele Grüße
Michael
-
-
-
Hiho,
Das angegebene <span>-Konzept habe ich in der Zeile von "Dabbelju" mal ausprobiert. Wenn jetzt noch die Browser das tun würden, was ich haben möchte ...
Im M$IE 5.5 funktioniert es nahezu perfekt - wenn man davon absieht, daß der Tooltip im Gegensatz der Variante auf dem GIF nun vie verrückt blinkt.
Ich habe das nur im IE 6 probiert, und da blinkt der (das???) Tooltip nicht. Ich habe aber auch anstatt des normalen Mauszeigers den Text-markieren-Mauszeiger, was aber an sich ja auch verständlich ist, da es sich ja um Text ("_") handelt.
Was mir aber auffiel: Diese Balken sind nicht auf der Höhe der Schrift in der jeweiligen Tabellenzelle, sondern sitzen unmittelbar am Zellenboden. die Schrift hat ja einen gewissen Abstand zu den Zellwänden, die Balken nicht.
Aber immerhin stimmt die Größe des Balkens - und darum geht es mir bei meinem aktuellen Experiment. Ich brauche allerdings sowohl "height:" als auch "line-height:", ohne daß mir klar wäre, wieso.
Mit height bestimmt Du die Höhe des <span>-Bereichs. Aber eventuell ist die verwendete Schriftgröße höher als 10px, weshalb man auch noch die Zeilenhöhe mit angeben muß, da der Browser sonst nicht weiß "interpretiere ich die Schriftgröße (Schrifthöhe) oder die <span>-height?"
Dies stellt nur einen Erklärungsversuch dar und muß nicht richtig sein....
Außerdem ignoriert Opera den Inhalt des <span> vollständig, wenn dieser nur einen scheinbar nicht anzuzeigenden Inhalt hat, also keinen, ein Leerzeichen oder sogar ein . Deshalb mußte ich einen '_' verwenden - was mich wiederum dazu zwingt, für jedes <span> auch noch die "color:" auf denselben Wert wie die "background-color:" zu setzen (was bei über 100 Tabellenzellen das Dokument um fast 2 KB aufbläst).
Wie ist es denn, wenn Du anstatt eines "_" ein 1px mal 1px skaliertes kleines Blindgif nutzt? Hast Du das schon mal ausprobiert oder eventuell nachvollziehbare Gründe dagegen? Wobei ich bezweifle, daß die Nutzung von einem Gif kleiner sein wird als die zwei KB:
<img src="cleargif.gif" height="1" width="1" alt=""> <-- 52 Zeichen
background-color: #123456; color: #123456 <-- definitiv weniger Zeichen als mit dem gif, auch wenn man den Dateinamen "kürzt".
Nun gut, ich hoffe, ich konnte Dir wenigstens ein (klein) wenig helfen oder ein paar Anregungen geben.
Viele Grüße und gute Nacht...
Alex :)
-
Hi Alexander,
Ich habe das nur im IE 6 probiert, und da blinkt
der (das???) Tooltip nicht.Aha - danke.
Ich habe aber auch anstatt des normalen Mauszeigers
den Text-markieren-Mauszeiger, was aber an sich ja
auch verständlich ist, da es sich ja um Text ("_")
handelt.Über so etwas habe ich mir noch keine Gedanken gemacht. Mit CSS könnte man ja auch die Mausform setzen ... hm, schau'n mer mal.
Was mir aber auffiel: Diese Balken sind nicht auf
der Höhe der Schrift in der jeweiligen
Tabellenzelle, sondern sitzen unmittelbar am
Zellenboden. die Schrift hat ja einen gewissen
Abstand zu den Zellwänden, die Balken nicht.Wie gesagt, das ist im Moment so gewollt. Es sind dann einfach oben und unten zwei Pixel mehr, die ich als Variationsbreite für den Balken zur Verfügung habe.
Je mehr mögliche Werte, desto mehr Aussagefähigkeit.Aber immerhin stimmt die Größe des Balkens - und darum geht es mir bei meinem aktuellen Experiment. Ich brauche allerdings sowohl "height:" als auch "line-height:", ohne daß mir klar wäre, wieso.
Mit height bestimmt Du die Höhe des <span>-Bereichs.
Aber eventuell ist die verwendete Schriftgröße höher
als 10px, weshalb man auch noch die Zeilenhöhe mit
angeben muß, da der Browser sonst nicht weiß
"interpretiere ich die Schriftgröße (Schrifthöhe)
oder die <span>-height?"Könnte ich denn eines von beiden auf 0 oder 1 oder irgendwas setzen, damit immer das andere den Ausschlag gibt? Das ist halt eine der Angaben, die ich bisher über hundertmal machen muß und gerne loswerden würde.
Wie ist es denn, wenn Du anstatt eines "_" ein 1px
mal 1px skaliertes kleines Blindgif nutzt?
Hast Du das schon mal ausprobiert oder eventuell
nachvollziehbare Gründe dagegen?Ach so - ein transparentes GIF zur Größenskalierung und CSS für die Hintergrundfarbe? Nein - an diese Kombination habe ich bisher noch nicht gedacht, weil ich eine "reine" Lösung haben wollte und keine Hybridlösung. Aber es wäre eine neue Idee ... danke.
Viele Grüße
Michael
-
-
hi
Statt
<img src="buy1000.gif" alt="" title="+4172" height="10" width="6" />
möchte ich also
<span class="col" title="+4172" style="height:10px;line-height:10px;color:#009900;background-color:#009900;">_</span></td>
verwenden, oder etwas halbwegs Gleichwertiges. (<div> funktioniert beispielsweise überhaupt nicht, weil es in allen Browsern automatisch einen Umbruch auslöst, obwohl ich das dem <td> mit "white-space:nowrap;" explizit verboten habe).STOP! <span> ist ein Inline-Element unt halt als solches neue height.
Im M$IE 5.5 funktioniert es nahezu perfekt - wenn man davon absieht, daß der Tooltip im Gegensatz der Variante auf dem GIF nun vie verrückt blinkt.
damit ist dieser Browser kaputt.
Mozilla 0.9.9. ignoriert sämtliche Höhenangaben des <span> und stellt den Balken offenbar so hoch dar wie dsa <td>. Das ist für meine Zwecke unbrauchbar.
er stellt das Span 10Pixel hoch dar (die line-height) - sofern die Schriftgröße keinen gröheren Wert erfordert.
Opera 6.0 macht zunächst mal dasselbe wie Mozilla, aber darüber hinaus läßt es den Balken nach unten über den Zellenrand hinaus ragen. Das ist noch schlechter.
und auch kaputt.
Ich hätte nun gerne Tips, ob - und wie - ich meine Balken ohne Verwendung von GIFs malen kann, so daß es in M$IE 5.5+, Opera 6+ und Mozilla 0.9.9+ funktioniert.
Die zentrale Frage scheint mir zu sein, wie ich die Höhe eines <span> innerhalb eines <td> abweichend von den Eigenschaften des sonstigen <td>-Inhalts setzen kann ...
gar nicht. ein <span> hat keine Höhe. Die korrekte Angabe um in der Zeile zu bleiben UND ein Element mit höhe zu haben wäre zusätzlich display:inline-block; zu setzen. Allerdings sind dafür dann sowohl Opera wie auch IE zu doof - schade, wenn diese Lösung sieht in Mozilla sehr gut aus.
Nicht ganz so schön, aber wenigstens funktionierend ist die Lösung das <span> zunächst auf display:block zu setzen und dann den neuen Kasten mit float:right; NEBEN den Text zu setzen.
Übrigens zeigt bei mir Opera (6.0Beta1/Linux) auch die <span> an, die ein enthalten.gruss Kai
-
Hi Kai,
STOP! <span> ist ein Inline-Element unt halt als
solches neue height.ups - mir ist es nicht gelungen, die Aussage in diesem Satz-Fragment fehlerfrei zu decodieren ...
Im M$IE 5.5 funktioniert es nahezu perfekt
damit ist dieser Browser kaputt.Kein Widerspruch von meiner Seite.
(Höchstens zur Bezeichnung "Browser" für diese Betriebssystemerweiterung. ;-)Mozilla 0.9.9. ignoriert sämtliche Höhenangaben
des <span> und stellt den Balken offenbar so
hoch dar wie dsa <td>. Das ist für meine Zwecke
unbrauchbar.
er stellt das Span 10Pixel hoch dar (die
line-height) - sofern die Schriftgröße keinen
größeren Wert erfordert.Hm. Und wenn sie es täte?
Verstehe ich Dich richtig, daß ich die line-height auf 0px setzen und dann sowohl im <td> als auch im <span> mit der Schriftgröße erzwingen könnte, die jeweils passende Höhe meines Elements zu erzwingen ...
Nein, das tut auch nicht, bei line-height:0px bricht die Tabelle völlig auseinander.Ich könnte auch versuchen, zu jeder Zahl eine Nachbarzelle zu bauen, dieser eine line height zu geben ... aber das funktioniert auch nicht. Mist! Die "line-height:" kann sich nicht gegen die "font-size:" durchsetzen.
Danach habe ich an der "font-size:" herumgeschraubt. Damit könnte ich in Mozilla dann tatsächlich die Höhe des Balken beeinflussen. Beim M$IE allerdings wieder nicht - und bei Opera 6 funktioniert zwar die Balkenhöhe, aber der Balken ragt wieder nach unten aus der Tabellenzelle heraus.
Und vor allem: Dadurch geht natürlich die Breite des Balkens kaputt! Mit der "font-size:" ändert sich auch die Breite des Leerzeichens ... und das wiederum hat Vorrang gegenüber der expliziten "width:"-Definition meines <span> ... !"§$&*+@Nein, von der "font-size" muß ich wohl die Finger lassen.
Opera 6.0 ... läßt den Balken nach unten über
den Zellenrand hinaus ragen. Das ist noch
schlechter.
und auch kaputt.Ja, eben. Lauter kaputte Browser, es ist schlimm. Lernen die es denn nie? :-(
Die zentrale Frage scheint mir zu sein, wie ich
die Höhe eines <span> innerhalb eines <td>
abweichend von den Eigenschaften des sonstigen
<td>-Inhalts setzen kann ...
gar nicht. ein <span> hat keine Höhe.Akzeptiert.
Andere Frage: Gäbe es denn irgend ein tag, welches ich statt <span> nehmen könnte?
Oder ist mein Wunsch grundsätzlich unmöglich, weil sich individuelle Höhe und mehrere Tags in einer Zeile gegenseitig ausschließen?Die korrekte Angabe um in der Zeile zu bleiben
UND ein Element mit höhe zu haben wäre zusätzlich
display:inline-block; zu setzen.
... diese Lösung sieht in Mozilla sehr gut aus.Mit den '_' (immer noch notwendig wegen Opera) sieht sie leider entsetzlich aus (die underscores schweben unterhalb des Balkens separat herum); ohne sie werden zwar die Balken so, wie ich sie haben will, dafür aber verliert die gesamte <td> ihre "text-align:right;"-Eigenschaft und die Zahlen werden plötzlich linksbündig statt rechtsbündig dargestellt (und der Balken rechts daneben geklebt).
Weißt Du dagegen vielleicht auch ein Mittel? Natürlich will ich die Zahl immer noch rechtsbündig haben, nur eben rechts daneben lauter gleich breite Balken ...Allerdings sind dafür dann sowohl Opera wie auch
IE zu doof -Und Mozilla auch.
Bisher hat nichts wirklich funktioniert ...Nicht ganz so schön, aber wenigstens funktionierend
ist die Lösung das <span> zunächst auf display:block
zu setzen und dann den neuen Kasten mit float:right;
NEBEN den Text zu setzen.Ah - verstehe: Wegen Blocklevel-Klassifikation darf es eine eigene Höhe haben, und float verhindert den Zeilenumbruch ... das ist einen Versuch wert.
Aber leider funktioniert auch das nicht - und zwar in _allen_ Browsern.
Übrigens auch noch unterschiedlich:-
Opera 6 ist der einzige, der nach Deinem Modell tatsächlich das neue Blocklevel-Element rechts neben den Zahlenwert setzen und die Höhe interpretieren würde.
Dafür aber ignoriert Opera in diesem Fall das "vertical-align:" und setzt den Balken an die Oberkante des <td>. -
Mozilla 0.9.9 und M$IE 5.5 verhalten sich hier übereinstimmend: Beide weigern sich, das neue Blocklevel-<span> in dieselbe Zeile wie den sonstigen <td>-Inhalt zu setzen.
Also ein Reinfall auf der ganzen Linie ...
Übrigens zeigt bei mir Opera (6.0Beta1/Linux) auch
die <span> an, die ein enthalten.Tja, 6.0 ohne Beta unter Win98 tut es nicht.
Und darüber habe ich mich eigentlich am meisten geärgert, weil es dafür so gar keinen ersichtlichen Grund zu geben scheint.Immer noch ratlos über diese vielen Browserleichen
Michael... eine halbe Stunde später:
Inzwischen habe ich wenigstens eine Lösung gefunden hat, welche zwar noch eine Verdoppelung der Zellenzahl kosten würde, aber dafür in allen Browsern ohne GIFs und ohne weitere Tabellen funktioniert:
<td>3472-</td>
<td class="col" title="-500" style="line-height:3px;">
<div class="col" style="background-color:#ff0000;"> </div>
</td>Bei <div> als Blocklevel-Element kann ich die "line-height:" individuell manipulieren, brauche keine "font-height:" und habe deshalb konstant breite Balken (deren Breite via CSS-Datei extern eingestellt wird).
Dafür brauche ich aber leider sowohl im <td> als auch im <div> einen Klassennamen, weil ich das "text-align:" nur im <td> und die "width:" nur im <div> einstellen kann (und class="" in beiden Fällen immer noch kürzer ist als das Attribut selbst).
Im Gegenzug habe ich immerhin die "color:" eingespart, weil Opera 6 den Anzeigefehler von <span> </span> bei <div> nicht mehr macht ... der M$IE 5.5 sein bescheuertes Dauerblinken allerdings schon.Zusätzliche Verbesserung: Das Binden des "title" an das <td> statt an den Balken macht diese Angabe viel leichter mit der Maus bedienbar - die flachen Balken für den Tooltip zu treffen war bisher ziemlich schwierig.
Das hätte ich auch schon für das vorherige Modell so machen sollen - naja, immerhin habe ich das jetzt gelernt.Insgesamt ist das zwar nun nicht annähernd das Ergebnis, welches ich zu finden gehofft hatte, aber falls bis zur Archivierung dieses Threads nichts Besseres mehr entdeckt wird, dann werde ich diese Methode in meinen Generator implementieren.
-
hi
STOP! <span> ist ein Inline-Element unt halt als
solches neue height.ups - mir ist es nicht gelungen, die Aussage in diesem Satz-Fragment fehlerfrei zu decodieren ...
"STOP! <span> ist ein Inline-Element und hat als solches keine height." sollte da stehen - schnelltippen...
Ja, eben. Lauter kaputte Browser, es ist schlimm. Lernen die es denn nie? :-(
lass mal netscape 4 auf die Seite los, dann glaibst du definitiv an den Fortschritt!
Allerdings sind dafür dann sowohl Opera wie auch
IE zu doof -Und Mozilla auch.
Bisher hat nichts wirklich funktioniert ...bei mir sag das gut aus, die Balken sind dann allerdings vertikal in der Zelle zentriert..
- Mozilla 0.9.9 und M$IE 5.5 verhalten sich hier übereinstimmend: Beide weigern sich, das neue Blocklevel-<span> in dieselbe Zeile wie den sonstigen <td>-Inhalt zu setzen.
huh? hier saß das <span> in Opera und Mozilla NEBEN dem Text. Allerdings ist dafür eine gewisse Mindestgröße des Browserfensters nötig...
Inzwischen habe ich wenigstens eine Lösung gefunden hat, welche zwar noch eine Verdoppelung der Zellenzahl kosten würde, aber dafür in allen Browsern ohne GIFs und ohne weitere Tabellen funktioniert:
<td>3472-</td>
<td class="col" title="-500" style="line-height:3px;">
<div class="col" style="background-color:#ff0000;"> </div>
</td>Bei <div> als Blocklevel-Element kann ich die "line-height:" individuell manipulieren, brauche keine "font-height:" und habe deshalb konstant breite Balken (deren Breite via CSS-Datei extern eingestellt wird).
Dafür brauche ich aber leider sowohl im <td> als auch im <div> einen Klassennamen, weil ich das "text-align:" nur im <td> und die "width:" nur im <div> einstellen kann (und class="" in beiden Fällen immer noch kürzer ist als das Attribut selbst).
Im Gegenzug habe ich immerhin die "color:" eingespart, weil Opera 6 den Anzeigefehler von <span> </span> bei <div> nicht mehr macht ... der M$IE 5.5 sein bescheuertes Dauerblinken allerdings schon.Diese Lösung läßt sich noch leicht tunen:
1. das div kann man auch über "td.col div{}" erreichen - spart die zusätzliche Class für eben dieses.
so hat das dann zu klappen:td.col{vertical-align:bottom;border-width:0px;}
td.col div{width:10px;cursor:default;}
<td class="col" title="-500">
<div style="height:3px;background-color:#FF0000;">%nbsp;</div>
</div>diese Lösung hat dann noch den Vorteil, dass das sogar in Netscrap 4 einigermaßen lauffähig ist (mal davon abgesehen, dass der Tooltip fehlt).
-
Hi Kai,
- Mozilla 0.9.9 und M$IE 5.5 verhalten sich hier übereinstimmend:
Beide weigern sich, das neue Blocklevel-<span> in dieselbe Zeile
wie den sonstigen <td>-Inhalt zu setzen.
huh? hier saß das <span> in Opera und Mozilla NEBEN dem Text.
Allerdings ist dafür eine gewisse Mindestgröße des Browserfensters
nötig...
ich fahre 1024 * 768, das reichte nicht.
Und ich hatte dem <td> explizit verboten, umzubrechen ... lieber wollte ich seitlich scrollen.Inzwischen habe ich wenigstens eine Lösung gefunden hat, welche
zwar noch eine Verdoppelung der Zellenzahl kosten würde, aber
dafür in allen Browsern ohne GIFs und ohne weitere Tabellen
funktioniert:Aber leider haben diese zusätzlichen <td>s mehrere Nachteile, wie mir inzwischen klar geworden ist:
1. Ich will Trennlinien um alle Zellen - und die wären dann zwischen diesen beiden "Teil-Zellen". Es sei denn, ich mache sie mit CSS separat weg (ob das funktioniert, habe ich noch nicht probiert). Dann bräuchte ich aber auch noch einen Klassennamen für die Zelle mit der Zahl drin ...
2. Ich hatte davon geträumt, diesen Balken eventuell via "@media screen" sogar nur bedingt für den Bildschirm-Output zu formatieren und das ursprünglich angedachte <span> für die Drucker-Ausgabe vollständig unsichtbar zu machen (das Zeug muß auf DIN A4 hochkant passen, es wird auch als Druckvorlage benötigt). Wenn ich die zusätzlichen <td>s brauche, dann kann ich die nicht "weglügen", sonst bricht das gesamte Tabellen-Layout auseinander ...
<td>3472-</td>
<td class="col" title="-500" style="line-height:3px;">
<div class="col" style="background-color:#ff0000;"> </div>
</td>
Diese Lösung läßt sich noch leicht tunen:- das div kann man auch über "td.col div{}" erreichen - spart die
zusätzliche Class für eben dieses.
Richtig - gute Idee, wird gemacht.
diese Lösung hat dann noch den Vorteil, dass das sogar in Netscrap 4
einigermaßen lauffähig ist (mal davon abgesehen, dass der Tooltip
fehlt).Ehrlich - auf Netscape 4 nehme ich an dieser Stelle wirklich keine Rücksicht, wenn schon die Browser des Jahres 2002 solche Probleme machen.
Vielen Dank für Deine tatkräftige Hilfe!
Michael-
hi
- Ich will Trennlinien um alle Zellen - und die wären dann zwischen diesen beiden "Teil-Zellen". Es sei denn, ich mache sie mit CSS separat weg (ob das funktioniert, habe ich noch nicht probiert). Dann bräuchte ich aber auch noch einen Klassennamen für die Zelle mit der Zahl drin ...
kein allzu großen Problem.
#tab td{border-right-width:0px;}
td.col{border-right-width:1px;border-left-width:0px;}
fertig - der Tabelle selbst habe ich dabei mal vorsichtshalber die id="tab" angedacht.- Ich hatte davon geträumt, diesen Balken eventuell via "@media screen" sogar nur bedingt für den Bildschirm-Output zu formatieren und das ursprünglich angedachte <span> für die Drucker-Ausgabe vollständig unsichtbar zu machen (das Zeug muß auf DIN A4 hochkant passen, es wird auch als Druckvorlage benötigt). Wenn ich die zusätzlichen <td>s brauche, dann kann ich die nicht "weglügen", sonst bricht das gesamte Tabellen-Layout auseinander ...
eh - nop.
@media print{
td.col div{display:none;}
}
und schon ist die Zelle leer (und damit ziemlich egal)gruss Kai
-
Hallo Kai,
ich fange gerade erst mühsam mit css an und lese (immer wieder gerne) staunend Deine Postings. Erlaube mir die vielleicht doofe, eher Basic-Frage:
kein allzu großen Problem.
#tab td{border-right-width:0px;}
td.col{border-right-width:1px;border-left-width:0px;}
fertig...bisher dachte ich immer blauäugig, die Wahl zwischen einer css-Zuweisung per class oder id sei eher Geschmackssache, aber bei dieser Mischung vermute ich einen "Vorteil", den ich vor lauter CSS-Balken und CSS-schwirrendem Kopf nicht sehe.... Kannst Du mir da helfen?
Danke,
Chräcker
-
Hi Chräcker,
...bisher dachte ich immer blauäugig, die Wahl
zwischen einer css-Zuweisung per class oder id sei
eher Geschmackssache, aber bei dieser Mischung
vermute ich einen "Vorteil", den ich vor lauter
CSS-Balken und CSS-schwirrendem Kopf nicht sehe....die Verwendung der "id" würde es mir erlauben, eine konkrete Instanz eine Tabelle speziell zu formatieren, falls ich mehrere Tabellen derselben Klasse innerhalb desselben Dokuments haben würde (habe ich in diesem Falle nicht - aber in anderen Dokumenten schon).
Ich könnte also die gemeinsamen Eigenschaften beider Tabellen über deren Klasse und die unterschiedlichen über die jeweilige "id" definieren - und damit den CSS-Code möglichst kompakt und redundanzfrei halten.
Viele Grüße
Michael
-
-
Hi Kai,
#tab td{border-right-width:0px;}
td.col{border-right-width:1px;border-left-width:0px;}
fertig - der Tabelle selbst habe ich dabei mal
vorsichtshalber die id="tab" angedacht.Kann ich machen (bisher hat sie eine eigene class, das müßte auch tun, oder?)
Aber für alle td die rechte Border wegnehmen, das ist es leider auch nicht - sondern nur für diejenigen <td>s, welche diese Zahlen enthalten. Also nicht die erste Zeile, nicht die vier letzten Zeilen, nicht die erste Spalte und nicht die letzte Spalte ... hm ...
@media print{
td.col div{display:none;}
}
und schon ist die Zelle leer (und damit ziemlich egal)... und verbraucht auch keine Breite für das Druck-Layout? Das wäre nämlich, was ich erreichen will ...
Danke schön,
Michael
- Mozilla 0.9.9 und M$IE 5.5 verhalten sich hier übereinstimmend:
-
-