Hallo zusammen, bin auf ein seltsames problem beim entwickeln einer Druckvorlage gestoßen. Die vorgabe ist ein fester header, footer und grafische sidebar. Soweit alles ok, das hab ich hinbekommen, jedoch wenn es mehseitig wird und man als pdf abspeichert, wird der Header und der Footer pro seite dupliziert und übereinander gelegt. Pro seite einmal mehr.
Sprich: auf seite zwei ist header und footer doppel übereinander, auf seite drei, dreifach übereinander und so weiter ... sieht immer schrecklicher aus. In der PDF kann man dann mit dem "Objektauswahl-Werkzeug" die einzelnen ebenen betrachten und verschieben.
Weis jemand warum das so ist? Hänge nun seit zwei Tagen drann und finde keine lösung dafür.
Hier der geammte code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template 001</title>
</head>
<body>
<style type="text/css">
/* font import
------------------------------------------ */
@import url('');
/* typo
------------------------------------------ */
.font_normal { font-family:; }
.font_bold { font-family:; }
.font_ultra { font-family:; }
.oversize { font-size: 14pt; }
.size_headline { font-size: 12pt; }
.size_subheadline { font-size: 10pt; }
.size_normal { font-size: 9pt; }
.size_small { font-size: 8pt; }
/* helper
------------------------------------------ */
.clear { clear: both; }
.spacer_3 { display: block; height: 0.3cm; }
.spacer_5 { display: block; height: 0.5cm; }
.spacer_7 { display: block; height: 0.7cm; }
.divider { display: block; height: 1px; background-color: #babab9; }
.columns { display: block; }
.col { display: inline-block; float: left; }
.col.space { width: 5mm; }
.col.spaceMini { width: 2mm; }
.col.spaceLast { width: 8mm; }
span.precol { display: inline-block; width: 2.5mm; }
/* baseelements
------------------------------------------ */
.header { margin-left: 12.5cm; margin-top: 1.6cm; }
.content { margin-left: 2.2cm; }
.content tr, .content td { page-break-inside: avoid; page-break-after: auto; }
#footer { display: none; position: fixed; bottom: 0; margin-left: 20mm; width: 165mm; }
.footer { margin-left: 2cm; bottom: 0; }
.footer table { margin-left: 0.2cm; }
img.sidebar { position: fixed; display: block; width: 20mm; height: 297mm; right: 0; top: 0; border: 0 none; }
@media print {
@page { size: A4 portrait; }
body { margin: 0 !important; }
#footer { display: block; }
.footColTopSpacer { display: block; height: 2mm; }
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- header -->
<thead>
<tr>
<td>
<div class="header">
<div class="font_ultra oversize">Company</div>
<div class="font_normal size_small">USt-IdNr.: DE000000000</div>
</div>
<img class="sidebar" src="http://www.waldmannvonritter.de/stripe.png" />
</td>
</tr>
</thead>
<!-- fake footer -->
<tfoot>
<tr>
<td>
<!-- footer -->
<div id="footer" class="columns font_normal size_small">
<div class="footerBorder">
<div class="spacer_5"></div>
<div class="divider"></div>
<div class="spacer_5"></div>
</div>
<div class="col spaceMini"> </div>
<div class="col">
<span class="font_ultra oversize">Company
Registergericht Ort, HRB 00000
Geschäftsführer: Mustername
</div>
<div class="col space"> </div>
<div class="col">
<div class="footColTopSpacer"></div>
Musterstrasse 0
D - 00000 Ort
www.musterdomain.de
</div>
<div class="col space"> </div>
<div class="col">
<div class="footColTopSpacer"></div>
<span class="precol">T:+49 (0) 000 - 00000 - 0
<span class="precol">F:+49 (0) 000 - 00000 - 00
<span class="precol"> main@musterdomain.de
</div>
<div class="col space"> </div>
<div class="col">
<div class="footColTopSpacer"></div>
Bankname
BIC: XXXXXXXX
IBAN: DE00 0000 0000 0000 0000 00
</div>
<div class="col spaceLast"> </div>
<div class="clear"></div>
<div class="spacer_5"></div>
</div>
</td>
</tr>
</tfoot>
<!-- content -->
<tbody>
<tr>
<td><div class="content font_normal size_normal">
<!-- content start -->
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>47</p>
<p>48</p>
<p>49</p>
<p>50</p>
<p>51</p>
<p>52</p>
<p>53</p>
<p>54</p>
<p>55</p>
<p>56</p>
<p>57</p>
<p>58</p>
<p>59</p>
<p>60</p>
<p>61</p>
<p>62</p>
<p>63</p>
<p>64</p>
<p>65</p>
<p>66</p>
<p>67 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>68</p>
<p>69</p>
<p>70</p>
<!-- content end -->
</div>
</td>
</tr>
</tbody>
</table></td>
<td style="width:25mm;"> </td>
</tr>
</table>
</body>
</html>Einfach mal kopieren und abspeichern dann im firefox laden und dann mal als pdf speichern, bzw. als pdf-druckvorschau laden.
Hoffe jemand hat nen tipp ..
gruß Tomas