nicht angemeldet
Liebe Forum-Leser,
ich bewege mich gerade auf ziemlich dünnem Eis, nämlich im Reich von CSS,
wo ich mich nicht sonderlich gut auskenne.
Außerdem habe ich das CSS-Kapitel von SelfHTML8 bisher eher nur überflogen
bzw. als Syntax-Nachschlagewert genutzt ...
Fangen wir also mal mit zwei URLs an:
http://www.schroepl.net/pbm/partien/yield/_1906_f/militaer.htm
http://www.schroepl.net/pbm/partien/yield/militaer.css
Die Seite ist valides XHTML 1.0 Transitional (könnte sein, daß ich sie
auch Strict kriege, darum kümmere ich mich dann später - bisher traue ich
meinen CSS-Kenntnissen einfach nicht und den Browsern ebenso wenig), und
auch der CSS-Validator fand keine Fehler (aber ein paar Warnings:
http://jigsaw.w3.org/css-validator/validator?uri=http://www.schroepl.net/pbm/partien/yield/_1906_f/militaer.htm
die ich nur teilweise verstehe, siehe unten).
Was ich versuchen möchte, ist, die Darstellung der entsprechenden Tabelle
schön abstrakt und damit im HTML-Quelltext gut editierbar zu machen.
Den muß ich nämlich per Hand so tippen, und das als Ergebnis einer ziem-
lich komplexen Auswertung, die ich im Kopf vornehme (bzw. auf einer Art
"Schmierzetteldatei" und per Maus-Verschiebungen auf der dort abgebilde-
ten - im Original vektoriellen - Karte, welche den Inhalt der Tabelle
teilweise visualisiert).
Leider ist die Anzeige der Tabelle nicht überall so, wie ich sie gerne
hätte.
Die wesentlichen CSS-Definitionen meines Problemkreises:
tr.orders td { font-weight:bold; padding-left:25px;
text-indent:-18px; margin-left:-18px; }
p { white-space:nowrap; font-family:monospace;
font-size:9pt; margin-top:0px; margin-bottom:0px; }
p.okay { color:#0000FF; text-decoration:none; }
p.failed { color:#9900CC; text-decoration:underline; }
span.retreat { color:#FF0000; text-decoration:none; }
Die Verteilung der CSS-Attribute auf <td> und <p> ist im Moment willkür-
lich - wenn ich diese kompakter zusammenfassen kann, möchte ich es tun.
Was will ich damit erreichen?
1. Ich möchte bestimmte "Klassen" von Inhalten innerhalb meiner Tabellen
verwenden. Ich nutze dazu <p class="okay"> und <p class="failed">.
Jede dieser Klassen hat eine eigene Farbe; "failed" ist zudem auch
unterstrichen (so wird es auf Papier gedruckt und in Schwarz-Weiß
fotokopiert, als Druckvorlage für eine Zeitschrift).
Das ist der Haupt-Grund meiner aktuellen Experimente: Ich will die <u>
und <br> loswerden, die ich bisher massiv brauche und die im
Quelltext einfach potthäßlich sind, während die Klassennamen die Semantik
dessen beschreiben, was gerade passiert ist.
2. Beide Klassen sollen umgebrochene Folgeabschnitte (eingeleitet mit
<br />) um 2 Zeichen einrücken, weil das 1. Zeichen der 1. Zeile
(A/F) eine Sonderbedeutung hat. Die Spalten müssen aber eine limitierte
Maximal-Breite haben, sonst kriege ich die Tabelle nicht ohne massives
seitliches Scrolling hin; für die Art des Umbruchs existiert eine
klare Konvention.
Gäbe es eine Möglichkeit, nach diesem 1. Zeichen eine Art "Tabulator-
Position" zu setzen, dann würde ich dies ggf. tun wollen, weil ich dann
auf monospace verzichten könnte; allein dafür aber beispielsweise eine
Subtabelle für die Formatierung zu nehmen, halte ich für Overkill, so
schlimm sind die monospace-Zeichen nun auch nicht.
Bis hierhin funktioniert auch alles noch ganz prima.
3. Innerhalb der <p class="failed"> kann es vorkommen, daß ich eine Zusatz-
angabe brauche. Diese will ich dann in einer dritten Farbe haben und
- das ist wichtig - nicht unterstrichen. Dazu füge ich in das
<p class="failed">...[*]</p>
an der [*]_position ein
<span class="retreat">...</span>
ein.
Die Farbe (rot) klappt tadellos - aber das Unterstreichen läßt sich
nicht zurücknehmen, der eingefügte Text bleibt unterstrichen.
Der Effekt ist in allen neuesten Browsern der großen Drei identisch.
Lustigerweise sieht es aber ausgerechnet im M$IE 5.0 so aus, wie ich
es haben will! (Wieso auch immer.)
Gibt es eine Möglichkeit, den gewünschten Effekt mit CSS für die 6er-
Browser zu erreichen? Das ist im Moment mein größtes Problem - denn
die Unterstreichung ist _semantisch_ falsch im Sinne meiner Auswer-
tung, damit kann ich nicht leben. (Es gibt nämlich leider noch einen
vierten, bisher nicht erwähnten Fall: Auch das "retreat" selbst kann
"failen", und _dann_ würde es unterstrichen werden müssen.)
4. Mozilla macht als zusätzlichen Schnörkel oberhalb meines ersten <p>
innerhalb einer Tabellenzeile eine Zeile Abstand; M$IE und Opera 6
tun das nicht. Ich will es auch nicht. (Wie) kann ich das abstellen?
5. Ich würde gerne verhindern, daß der Inhalt eines <p>-Elements umge-
brochen werden kann. Schlimmstenfalls soll lieber seitlich gescrollt
werden, weil der umgebrochene Inhalt wegen Kürzelsprache völlig un-
lesbar werden würde.
Das wiederum machen die 6er-Browser alle richtig, aber der M$IE 5.0
beispielsweise bricht um, wie er es gerade lustig findet.
Laut SelfHTML 8 (das noch meint, nur Netscape 6 würde das unterstützen)
werde ich damit wohl leben müssen, okay.
6. Was genau ist der Sinn der entsprechenden CSS-Warnings?
(http://jigsaw.w3.org/css-validator/validator?uri=http://www.schroepl.net/pbm/partien/yield/_1906_f/militaer.htm)
Ich möchte in vielen Fällen einfach keine Hintergrundfarbe definieren
- warum sollte ich? (Die Warnings will ich natürlich weg haben, aber
die Optik meiner Seiten dafür auch nicht verändern.)
Und warum werde ich für jede einzelne Über-Definition gewarnt?
Ich habe in der zentralen CSS-Datei meiner Site Defaultwerte gesetzt,
die ich nur in einigen wenigen Spezialfällen überschreiben will, und
dort dann möglichst so, daß ich wenig Code brauche, also beispielsweise
keine <span>, sondern vor allem Tags in bestimmten Kontexten, etwa wie
in
tr.pseudonym th { white-space:nowrap; padding-left:5px;
color:#000000; font-size:9pt; }
was mir viel HTML-Quelltext spart.
7. Netscape 4 bricht bei den beschriebenen Elementen ziemlich auseinander.
Ich kann damit leben, daß es mit dem Communicator einfach nicht mehr
funktioniert; sollte jemand Vorschläge haben, was ich verbessern könnte,
um es ihm irgendwie wenigstens ein bißchen leichter zu machen, höre ich
mir diese gerne an. Aber CSS sollte es eigentlich schon sein.
In der Hoffnung auf gute Tips
Michael Schröpl
P.S.: Vielleicht eignet sich meine Problemstellung sogar dafür, gleich
ein XML-Dokument zu verwenden (die Inhalte dürften sich prima als
DTD beschreiben lassen, wenn ich davon auch nur einen Schimmer einer
Ahnung hätte); Ideen in diese Richtung würden mich für die Zukunft
auch interessieren, aber in nächster Zeit werde ich dazu wohl noch
nicht kommen, u. a. weil die Browser-Unterstützung dafür vermutlich
noch nicht reif ist. (Oder?)