# 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>
 <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)

```
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


----------



## Maik (15. August 2008)

Hi,

wenn der Ausdruck nicht mit der Druckvorschau übereinstimmt, und dies bei dir in allen Browsern der Fall ist, dann liegt hier doch die Vermutung nahe, dass mit deinem Drucker etwas nicht in Ordnung ist.

Ich hab das Dokument jetzt über Firefox, IE, Opera und Safari ausdrucken lassen, und alle vier Ausdrucke entsprechen erwartungsgemäß der Druckvorschau.

Mein Fazit lautet daher: Mit dem Druckstylesheet ist alles in Ordnung, also check bitte mal deine System- / Hardwareumgebung.

mfg Maik


----------



## mille (15. August 2008)

Danke soweit für deine Hilfe,

ich check das mal aus.

Grüße


----------

