Ausdruck einer Webseite exakt

mille · 13. August 2008

Hallo Leute,

ich bin gerade dabei eine kleine Webawendung zu implementieren. Hierbei erfolgt die Ausgabe der Ergebnisse in Form von HTML auf dem Bildschirm.
Voraussetzung für eine Akzeptanz ist, dass die Ergebnisse auch ausgedruckt werden können.
Hierbei soll der Ausdruck natürlich EXAKT so aussehen, wie dies auf dem Bildschirm der Fall ist.
Leider komme ich nun nicht weiter. Ich habe bereits das erstellte Stylesheet mit dem "media" attribut versehen (all, print). Dennoch differiert der Ausdruck stark, von der Anzeige auf dem Bildschirm.
Könnt ihr mir sagen, wie ich es schaffe, den Ausdruck und die Anzeige auf dem Bildschirm (nahezu) identisch zu kreieren?

Bislang schaut das Ergebnis wie folgt aus:

Screenshot Browser: http://c.imagehost.org/view/0650/untitled_16.jpg
Screenshot Ausdruck (in Form eines PDF):http://c.imagehost.org/view/0717/untitled2.jpg

Vielen Dank

Beste Grüße
mille

Maik · 13. August 2008

Hi,

auf den ersten Blick sieht es mal so aus, dass in den Druckeinstellungen des Browsers das Drucken von Hintergrundfarben /-bildern nicht aktiviert ist.

mfg Maik

mille · 13. August 2008

Hey,

leider nicht.
Unter den Druckereinstellungen ist der Haken bei "Seitenhintergründe drucken" gesetzt. Im IE finde ich entsprechende Einstellung nicht. Der Druck aus dem IE heraus sieht ebenso bescheiden aus...

Grüße

Maik · 13. August 2008

Tja, dann wirst du hier mal die Karten (in Form des Quellcodes) auf den Tisch legen müssen, denn hellsehen kann hier niemand.

Ein Link zur Seite würde auch ausreichen, um sich das Dokument direkt in der Druckvorschau betrachten zu können.

mfg Maik

Maik · 13. August 2008

mille hat gesagt.:
Im IE finde ich entsprechende Einstellung nicht.

IE6: Extras -> Internetoptionen -> Erweitert -> Drucken

IE7: Tools -> Internet Options -> Advanced -> Printing

mfg Maik

mille · 13. August 2008

Hey,

kein Problem:

HTML:

<html>
 <head>
 <title> test </title>
 <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
 <link rel="stylesheet" href="print.css" type="text/css" media="print" />
 </head>
 <body>
 
 <div id="headBGLine"> </div>
 <div id="content">
 <h1>title</h1>
 
 <!-- Die erste Tabelle mit den grundlegenden Informationen -->
 <table id="firstrow">
 <thead>
 <tr>
 <td class="short">Basics</td>
 <td>Objectives</td>
 <td class="short">Overall Status</td>
 </tr>
 <thead>
 <tbody>
 <tr>
 <td>
 <br />
 <br />
 <br />
 ;
 </td>
 <td>
 <ul>
 <li>EU requirements are expected...</li>
 <li>The law aims to improve .... </li>
 <li>Impact on Policies, Processes, Knowledge .... </li>
 <li>Next Steps: P..... </li>
 </ul>
 </td>
 <td id="overallStatus" >
 xx% completed
 </td>
 </tr>
 </tbody>
 </table>
 
 
 <!-- Die zweite Tabelle mit den INformationen über den aktuellen Fortschritt im Projekt -->
 <table id="secondrow">
 <thead>
 <tr>
 <td>Milestone Description</td>
 <td>Completion Date</td>
 </tr>
 <thead>
 <tbody>
 <tr>
 <td colspan="2">
 <table class="full">
 <!-- Jahres Linie -->
 <tr>
 <!-- leer und weiß -->
 <td class="full" rowspan="2"></td>
 <!-- Das aktuelle Jahr -->
 <td colspan="12" class="darkgrayBG">2008</td>
 <!-- das nächste Jahr zur haelfte -->
 <td colspan="6" class="darkgrayBG">2009</td>
 </tr>
 <!-- MonatsLinie -->
 <tr>
 <!-- Monate das aktuellen Jahres -->
 <td class="months">Jan</td>
 <td class="months">Feb</td>
 <td class="months">Mrz</td>
 <td class="months">Apr</td>
 <td class="months">Mai</td>
 <td class="months">Jun</td>
 <td class="months">Jul</td>
 <td class="months">Aug</td>
 <td class="months">Sep</td>
 <td class="months">Okt</td>
 <td class="months">Nov</td>
 <td class="months">Dez</td>
 <!-- Monate das naechsten Jahres -->
 <td class="months">Jan</td>
 <td class="months">Feb</td>
 <td class="months">Mrz</td>
 <td class="months">Apr</td>
 <td class="months">Mai</td>
 <td class="months">Jun</td>
 </tr>
 <tr class="gray">
 <td>
 Kick off Meeting completed (100%)
 </td>
 <td colspan="18">
 <img src="gfx/completed.png" style="margin-left: 73px; width: 23px; height: 18px;" />
 </td>
 </tr>
 
 <tr class="gray">
 <td>
 Legal analysis of German AML law completed (100 %)
 </td>
 <td colspan="18">
 <img src="gfx/completed.png" style="margin-left: 93px; width: 23px; height: 18px; z-index: 4" />
 <img src="gfx/completed.png" style="margin-left: 00px; width: 23px; height: 18px; z-index: 5" />
 </td>
 </tr>
 
 <tr class="gray">
 <td>
 Derivation of ... completed (50%)
 </td>
 <td colspan="18">
 <img src="gfx/ontarget.png" style="margin-left: 158px; width: 23px; height: 18px; z-index: 5" />
 </td>
 </tr>
 
 <tr class="gray">
 <td>
 Legal + IT analysis / s defined (50%)
 </td>
 <td colspan="18">
 <img src="gfx/ontarget.png" style="margin-left: 172px; width: 23px; height: 18px; z-index: 5" />
 </td>
 </tr>
 
 <tr class="gray">
 <td>
 Short term implementation ... (30%)
 </td>
 <td colspan="18">
 <img src="gfx/ontarget.png" style="margin-left: 228px; width: 23px; height: 18px; z-index: 5" />
 </td>
 </tr>
 
 <tr class="gray">
 <td>
 Phase II – long term implementation ...planned (0%)
 
 </td>
 <td colspan="18">
 <img src="gfx/notstarted.png" style="margin-left: 280px; width: 23px; height: 18px; z-index: 5" />
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 <div id="legend">
 Legend:     
 <img src="gfx/ontarget.png" />= On Target     
 <img src="gfx/alert.png" />= Alert     
 <img src="gfx/significantIssue.png" />= Significant Issue     
 <img src="gfx/notstarted.png" />= Not Started     
 <img src="gfx/completed.png" />= Completed
 </div>
 
 <div id="achievements">
 <table>
 <thead><tr><td>Achievements</td></tr></thead>
 <tbody><tr><td>
 <ul>
 <li>To determine impact of ... </li>
 <li>Kick off Meeting took place </li>
 </ul>
 </td></tr></tbody>
 </table>
 </div>
 <div id="nextsteps">
 <table>
 <thead><tr><td>Next Steps</td></tr></thead>
 <tbody><tr><td>
 <ul>
 <li>Analysis of Impact Phase </li>
 <li>Legal analysis of German AML law (</li>
 <li>Define solution scenarios </li>
 <li>IT impact estimation </li>
 </ul>
 </td></tr></tbody>
 </table>
 </div>
 
 
 <div id="risks">
 <table>
 <thead><tr><td>Key Issues/Risks</td></tr></thead>
 <tbody><tr><td>
 <ul>
 <li>Legal Project, requirements ... </li>
 </ul>
 </td></tr></tbody>
 </table>
 </div>
 <div id="comments">
 <table>
 <thead><tr><td>Comments</td></tr></thead>
 <tbody><tr><td>
 <ul>
 <li>Close intercommunication with .... </li>
 </ul>
 </td></tr></tbody>
 </table>
 </div>
 
 </div>
 </body>
 </html>

css (print/media sind identisch)

Code:

 Body {
 margin: 0px;
 font-family: Arial, Verdana, sans-serif;
 }
 H1 {
 text-align: center;
 font-size: 24pt;
 font-weight: bold;
 color: #2F569D;
 }
 
 TABLE {
 width: 100%;
 border: 1px #2F569D solid;
 }
 THEAD {
 background-color: #2F569D;
 font-weight: bold;
 color: white;
 }
 TD {
 border: 1px #2F569D solid;
 }
 
 TD TABLE TR.gray {
 background-color: #EAEAEA;
 border: 0px;
 }
 
 TD TABLE .twothird { width: 66% }
 
 TD TABLE TD { border: 0px; border-bottom: 3pt white solid;}
 #headBGLine {
 background-image: url("head.jpg");
 width: 100%;
 height: 72px;
 padding: 0px;
 }
 
 
 /** classes */
 .short { width: 20%; }
 .months {
 font-size: 7pt;
 color: #2F569D;
 width: 20px;
 }
 .darkgrayBG {
 background-color: #BEBEC3;
 font-size: 9pt;
 font-weight: bold;
 color: #2F569D;
 text-align: center;
 }
 .full { width: 100%; }
 
 #legend { margin-bottom: 20pt; }
 
 #achievements {
 float: right;
 width: 47%;
 margin-right: 10pt;
 }
 #nextsteps { width: 47%; }
 #risks{
 float: right;
 width: 47%;
 margin-right: 1 0pt;
 }
 #comments { width: 47%; }
 
 
 
 
 /** steering */
 #overallStatus {
 background-color: #0C0;
 color: white;
 vertical-align: middle;
 font-weight: bold;
 text-align: center;
 }
 
 #firstrow {
 margin-bottom: 10pt;
 }
 
 #content { margin-left: 5%; margin-right: 5%;}

grüße und danke

Maik · 13. August 2008

Bist du dir sicher, dass in deinen Browsern das Drucken von Hintergrundfarben aktiviert ist?

mfg Maik

mille · 14. August 2008

Moin,

wenn ich dein Ergebnis sehe, bin ich mir nicht mehr sicher

.
Der Haken ist aber zweifelsohne angehakt.

siehe Screen von Opera@USB :-(

Muss ich dann mal weiter probieren, etwa mit dem FF. Soweit erstmal Danke

Ich meld' mich

Maik · 14. August 2008

Hi,

den Screenshot der Opera-Druckvorschau erspar ich mir hier ausnahmsweise mal, da er mit dem gestrigen aus Firefox deckungsgleich ist.

mfg Maik

mille · 15. August 2008

Guten Morgen,

also die Druckvorschau hab ich auch ausprobiert. Da ist zweifelsohne der Hintergrund abgebildet.
Allerdings wird der Hintergrund bzw. Hintergrundfarben im Ausdruck DENNOCH NICHT mit ausgedruckt, auch wenn die Druckvorschau etwas anderes zeigt!

Gerne mache ich auch Screenshots, halte ich aber jetzt nicht für notwendig, da ich auf der Suche nach Hilfe bin und nicht beweisen möchte, dass etwas nicht geht, was ich gerne haben möchte.

weitere Vorschläge?

grüße

Ausdruck einer Webseite exakt

mille

Erfahrenes Mitglied

Maik

mille

Erfahrenes Mitglied

Maik

Maik

mille

Erfahrenes Mitglied

Maik

mille

Erfahrenes Mitglied

Anhänge

Maik

mille

Erfahrenes Mitglied

Neue Beiträge