CSS: Einzelne Zeilen im <pre> ansprechen?

[Linuchs]

Moin,

habe mal so auf die Schnelle einen Kalender 2016 gestaltet.

Nun möchte ich den Samstagen und Sonntagen, also bestimmten Zeilen, eine Hintergrund-Farbe geben. Geht das?

KLar, ich kann HTML-mäßig die Zeilen mit <span> o.ä. umfassen, aber das ist nicht CSS.

Linuchs

[TS]

Hallo und guten Tag,

habe mal so auf die Schnelle einen Kalender 2016 gestaltet.

Nun möchte ich den Samstagen und Sonntagen, also bestimmten Zeilen, eine Hintergrund-Farbe geben. Geht das?

KLar, ich kann HTML-mäßig die Zeilen mit <span> o.ä. umfassen, aber das ist nicht CSS.

Warum gibst Du den denn nicht als HTML-Tabelle aus? Da hättest Du dann doch alle CSS-Möglichkeiten.

Grüße
TS

[Auge]

Hallo

habe mal so auf die Schnelle einen Kalender 2016 gestaltet.

Nun möchte ich den Samstagen und Sonntagen, also bestimmten Zeilen, eine Hintergrund-Farbe geben. Geht das?

So nicht.

KLar, ich kann HTML-mäßig die Zeilen mit <span> o.ä. umfassen, aber das ist nicht CSS.

Du willst im Kontext von HTML in einem Text – etwas anders ist deine ASCII-Tabelle nicht – willkürlich einzelnen Zeichen und Zeichengruppen optische Eigenschaften zuweisen. Du willst dazu CSS nutzen. Du bist hier so lange dabei, dass du wissen solltest, dass CSS-Regeln nur auf HTML-Elemente und ihren Inhalt anwendbar sind. Wieso willst du dann HTML zur Markierung der zu gestaltenden Zeichen und Zeichengruppen weglassen?

Nimm TS' Rat an und benutze eine HTML-Tabelle. In der kannst du, wenn du grundsätzlich dem Aufbau deiner ASCII-Tabelle folgst, die Wochenenden durch abzählen der Zeilen ermitteln. Du kannst natürlich auch den Wochenendzeilen jeweils eine Klasse verpassen – z.B. weil du damit noch JS-Magie veranstalten willst – und eben dieser die gewünschten CSS-Regeln verpassen.

Tschö, Auge

[Linuchs]

Du bist hier so lange dabei, dass du wissen solltest, dass CSS-Regeln nur auf HTML-Elemente und ihren Inhalt anwendbar sind.

Ja, Inhalt. Zeilen sind Inhalt von <pre>. Hätte ja sein können, dass es Pseudo-Elemente gibt, ich bin ja kein CSS-Lexikon. Und wie ein Zauberer mit dem richtigen Spruch "Simsalabim" umgeht, klappt es zumindest für die erste Linie mit "::first-line".

Wäre nun nicht so ein Weltwunder, wenn man auch die 10. Linie ansprechen könnte. Aber der Spruch "::nth-of-line(10)" tut's nicht:

pre::first-line {
  background-color: #fdd;
}
pre::nth-of-line(10) {
  background-color: #fdd;
}

Ich möchte zu einem farbigen Kalender kommen in der Größe drei A4-Blätter nebeneinander wie hier, nur die Wochentage sollen nicht versetzt sein.

Um zu schauen, wie das geht, habe ich "mal eben" mit <pre> ein Muster gemacht. Jetzt geht's weiter mit <table>.

So eine Tabelle sieht im Quellcode nicht sehr üersichtlich aus, zumal noch Einträge bei vielen Tagen hineinkommen. Habe überlegt, das mit PHP zu machen, scheint aber auch nicht schneller zu gehen.

Linuchs

[Auge]

Hallo

Du bist hier so lange dabei, dass du wissen solltest, dass CSS-Regeln nur auf HTML-Elemente und ihren Inhalt anwendbar sind.

Ja, Inhalt. Zeilen sind Inhalt von <pre>.

Nein, der Text an sich ist der Inhalt, andere Elemente sind, falls vorhanden, Inhalt. Zeilen sind es, bis auf die erste (wie du ja festgestellt hast), nicht. Umbrüche, Tabs, Lerzeichen, auch zu mehreren, sind in HTML einfach nur Leerzeichen. Deshalb gibt es innerhalb eines Elements keine mehreren Zeilen.

Und wie ein Zauberer mit dem richtigen Spruch "Simsalabim" umgeht, klappt es zumindest für die erste Linie mit "::first-line".

:first-line dient klassischerweise dazu, den Anfang eines Textabsatzes abweichend vom Rest des Absatzes besonders zu formatieren. Das war früher™ im Buchdruck üblich und von dort übernommen.

So eine Tabelle sieht im Quellcode nicht sehr üersichtlich aus, …

Du hast ein paar mehr als 31 Zeilen (die gegeneinander verschobenen Monatstage) und 13 Spalten (Wochentagsname und die Einträge der 12 Monate). Für mich ist das noch im Bereich von „übersichtlich“. :-)

… zumal noch Einträge bei vielen Tagen hineinkommen.

Willst du die Termine in die Tabelle reinpfriemeln?

Ich würde Tage mit vorhandenen Terminen hervorheben und die Termine verlinken bzw. die dazugehörigen Infos per Ajax nachladen, sie aber nicht standardmäßig innerhalb der Tabelle anzeigen.

Habe überlegt, das mit PHP zu machen, scheint aber auch nicht schneller zu gehen.

Bau dir händisch einen Prototypen und überlege hinterher, wie du diesen Aufbau mit PHP automatisieren kannst.

Tschö, Auge

[MrMurphy1]

Hallo

Ich möchte zu einem farbigen Kalender kommen in der Größe drei A4-Blätter nebeneinander wie hier, nur die Wochentage sollen nicht versetzt sein.

Kurz und deutlich: Vergiss es.

Irgendwie hast du das Pech (und Unwissen) immer zum falschen Werkzeug zu greifen.

Das das pre-Element nicht zum Gestalten gedacht ist sollte inzwischen klar sein.

Genau so wenig sind Webseiten zum Ausdrucken gedacht und geeignet.

Web-Seiten haben schlicht keine Größe. (Auch wenn du diese Aussage wahrscheinlich nicht verstehen wirst.) Zum gezielten Ausdrucken gibt es Textverarbeitungen, Tabellenkalkulationen, Zeichenprogramme, pdf-Programme u.s.w. Dreimal dafst du raten warum die von dir verlinkten Kalender als pdf-Datei geliefert werden.

Web-Seiten auszudrucken ist eher ein Hilfskonstrukt.

Offensichtlich hast du auch noch nicht versucht verschiedene Webseiten mit unterschiedlichen Browsern und auf unterschiedlichen Druckern auszudrucken. Gegen die Unterschiede kommst du mit HTML und CSS nicht an.

Gruss

MrMurphy

[Linuchs]

Hallo Mr. Murphy,

ist ja klar, dass du für unerwartete Fehler zustänig bist ;-)

Web-Seiten haben schlicht keine Größe. (Auch wenn du diese Aussage wahrscheinlich nicht verstehen wirst.)

Nein, verstehe ich nicht. Die Größe kann ich doch abmessen. Und auf Papier hat A4 eine ganz bestimmte Größe.

Zum gezielten Ausdrucken gibt es Textverarbeitungen, Tabellenkalkulationen, Zeichenprogramme, pdf-Programme u.s.w.

Die Textverarbeitungen wie Word, OpenOffice, LibreOffice, ... sind ebenso individuell im Druckverhalten wie die unterschiedichen Browser. Von Tabellen- und Zeichenprogrammen erwarte ich nicht annähernd, dass die eine Seite so drucken wie Word.

Offensichtlich hast du auch noch nicht versucht verschiedene Webseiten mit unterschiedlichen Browsern und auf unterschiedlichen Druckern auszudrucken. Gegen die Unterschiede kommst du mit HTML und CSS nicht an.

Doch, doch. Wenn auch nicht immer mit dem gewünschten Ergebnis. Deshalb nutze ich den Firefox, dessen Druckverhalten habe ich gut im Griff ;-)

Und ja, seit einem Jahrzehnt erstelle ich Druck-Erzeugnisse zentimeter-genau mit dem Firefox, in einem Kundenprojekt sogar in Massen. Die Inhalte kommen dort aus der MySQL Datenbank.

Linuchs

[Linuchs]

Und ja, seit einem Jahrzehnt erstelle ich Druck-Erzeugnisse zentimeter-genau mit dem Firefox, in einem Kundenprojekt sogar in Massen. Die Inhalte kommen dort aus der MySQL Datenbank.

Das Einzige, was wirklich stört, ist die Unfähigkeit von Firefox, Dokumente nach Angabe im Hoch- oder Querformat zu drucken. Das muss man jedesmal im Browser von Hand umstellen. Firefox sieht es nicht als Eigenschaft des Dokuments.

Linuchs

[Auge]

Hallo

Web-Seiten haben schlicht keine Größe. (Auch wenn du diese Aussage wahrscheinlich nicht verstehen wirst.)

Nein, verstehe ich nicht. Die Größe kann ich doch abmessen. Und auf Papier hat A4 eine ganz bestimmte Größe.

Ein Blatt Papier hat eine bestimmte Größe. Eine Website kann breiter oder schmaler sein, kann höher oder flacher sein. Das richtet sich nach der Größe des Anzeigefenster in Kombination mit der Art und Menge des Inhalts. Die Webseite hat also zuallererst keine feste Größe.

Du kannst natürlich dafür sorgen, dass es eine definierte Menge an Inhalt gibt, so dass diese sich in einem festgelegten Browser auf eine bestimmte Anzahl von Papierblättern einer definierten Größe ausdrucken lässt. Das ist eine bewusste Einschränkung, damit du an dein Ziel gelangst.

Offensichtlich hast du auch noch nicht versucht verschiedene Webseiten mit unterschiedlichen Browsern und auf unterschiedlichen Druckern auszudrucken. Gegen die Unterschiede kommst du mit HTML und CSS nicht an.

Doch, doch. Wenn auch nicht immer mit dem gewünschten Ergebnis. Deshalb nutze ich den Firefox, dessen Druckverhalten habe ich gut im Griff ;-)

Du hast den Text offnesichtlich nicht vollständig gelesen. Es hieß dort unter anderem „… nicht versucht verschiedene Webseiten mit unterschiedlichen Browsern …“ und du antwortest mit „Deshalb nutze ich den Firefox …“.

Solange nur du Ausdrucke machst oder du sicherstellen kannst, dass alle Nutzer den gleichen Browser nutzen, ist das kein Problem. Wenn aber jemand einen anderen Browser mit anderen Fähigkeiten der Verarbeitung von Druck-CSS-Regeln nutzt, kann dein System scheitern. Dass die Unterstützung von CSS-Regeln für den Ausdruck sowohl durchgängig mäßig als auch recht unterschiedlich ist, ist ja nun kein Geheimnis.

Tschö, Auge

[MrMurphy1]

Hallo

Sofern du uns keine weiteren Infos gibst müssen wir davon ausgehen, das du die Webseiten für eine unbekannte Besucheranzahl mit unterschiedlichen Browsern erstellen willst. Das ist in HTML/CSS-Foren so üblich und darauf beziehen sich dann auch die Antworten.

Zum Verständnis vom Papierdenken hilft die vielleicht der folgende Link:

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Gruss

MrMurphy

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

Genau so wenig sind Webseiten zum Ausdrucken gedacht und geeignet.

Das ist aber absehbar, dass der HTML-Standard das mit Unterstützung seiner Kinder CSS, Javascript, SVG, usw. demnächst auch leisten wird. Die meisten der notwendigen Ideen dafür sind schon lange genug enthalten. Die Browser müssen es dann nur verlässlich umsetzen.

Und wenn Dokumente irgend eines DTP-Programmes für Letter Landscape gebaut sind, dann fällt es auch schwer, sie im A4-Hochformat auszudruchen.

Spirituelle Grüße
Euer Robert
[e-mail]

[Auge]

Hallo

Genau so wenig sind Webseiten zum Ausdrucken gedacht und geeignet.

Das ist aber absehbar, dass der HTML-Standard das mit Unterstützung seiner Kinder CSS, Javascript, SVG, usw. demnächst auch leisten wird. Die meisten der notwendigen Ideen dafür sind schon lange genug enthalten.

Ja, aber …

Die Browser müssen es dann nur verlässlich umsetzen.

Was lässt dich vermuten, dass die Browserhersteller dies tun, wenn sie das doch in den letzten 10-15 Jahren eben nicht getan haben? Die werden einen Teufel tun, an dieser Stelle Arbeit zu investieren, wenn der Trend zu Geräten geht, an denen typischerweise kein Drucker benutzt wird.

Tschö, Auge