CSS-Stylesheet für mpdf richtig konfigurieren

  • Hallo zusammen!


    Ich hoffe, dass meine Frage überhaupt zum Thema "CSS" passt und hier nicht vollkommen OT ist...

    Mein System um das es geht:

    Server: Ubuntu 16.04.2 LTS Server

    DokuWiki: 2018-04-22b "Greebo"

    dw2pdf: 2019-06-19

    mpdf: ???


    Mein Problem:

    Ich habe in diesem DokuWiki Ausbildungsunterlagen zusammengestellt, welche sowohl online (eben im Wiki), als auch offline in PDF-Form (über das Plugin dw2pdf) abgerufen werden sollen.

    Meine Vorgabe dazu ist allerdings, dass die PDF-Ausgabe ein bestimmtes Design bekommt. Mit HTML habe ich zumindest so viel Ahnung, dass ich mir in eine Seite Links einfügen kann und die Farbe ändern kann.:pinch: Das war's dann aber auch schon. Von CSS, und somit auch vom Zusammenspiel CSS / HTML, habe ich überhaupt keine Ahnung.

    Zunächst habe ich versucht mein Problem unter Zuhilfenahme von Seiten wie mpdf, hier insbesondere supported CSS in Griff zu bekommen. Leider stoße ich hier schnell an meine Grenzen, da ich die Zusammenhänge zwischen CSS und HTML nicht (er)kenne.

    Laut Manual wird die PDF-Ausgabe über ein CSS-Stylesheet gestaltet, welches die Datei "style.css" und Dateien wie "header.html" und "footer.html" benutzt. Bzw. das Stylesheet resultiert daraus.

    Die Dateien beinhalten folgenden Code (die footer.html habe ich mir gespart - die soll nicht verändert werden):

    In Zeile 4 des Codes ist definiert wie die waagrechte Linie unterhalb der Kopfzeile aussehen soll. Diese ist, wie im Code angegeben, 1px stark und schwarz. Ich brauche aber an dieser Stelle eine mehrfarbige Linie, ähnlich einer Deutschlandfahne. Also drei verschiedene Farben ohne Abstand untereinander.

    Wie geht denn das??? :rolleyes:

    HTML: header.html
    <table width="100%" class="pdfheader">
         <tr>
             <td style="text-align: left">@DATE@</td>
             <td style="text-align: center">@PAGE@/@PAGES@</td>
             <td style="text-align: right">@WIKI@</td>
         </tr>
    </table>

    Ich möchte nun dort wo in der Datei header.html das Datum @DATE@ angezeigt wird ein Logo darstellen und das Datum dafür etwas weiter nach rechts rutschen. Da ja meines Wissens das Tag <td> für eine "Tabellenspalte" steht, und das Datum durch die Aussage text-align: leftin dieser Spalte ganz nach links gerutscht wird, habe ich mir folgende Lösung gedacht:

    HTML: meine neue header.html
    <table width="100%" class="pdfheader">
         <tr>
             <td><p><img src="logo.png" width="70" height="100" align="bottom" alt="DAS Logo">@DATE@</p></td>
             <td style="text-align: center">@PAGE@/@PAGES@</td>
             <td style="text-align: right">@WIKI@</td>
         </tr>
    </table>

    Pustekuchen, da kommt aber nix. Weder das Datum, noch das Bild... Das Bild liegt übrigens im gleichen Verzeichnis wie die header.html.

    Kann mir einer von euch einen Denkanstoß geben oder mir erklären was ich falsch mache? Ich erwarte ja nicht dass mir das Händchen von A-Z geführt wird. Aber da mir der Code im Editor nicht beanstandet wird, siehts für mich aus als hätte ich einfach nur einen Denkfehler in der Sache (mit dem HTML)...


    So nebenbei noch die Frage zur Zeile 1 aus dem HTML-Code:

    Gebe ich durch den Eintrag class="pdfheader"in der HTML-Datei auch zugleich eine Referenz für den Eintrag table.pdfheaderaus der style.css an?


    Dankeschön!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!