Rechnungen und Layout

Tipps & Tricks Vorlagen & Formulare
#1

Hallo zusammen,

habe leider nicht so viel Erfahrung mit html - aber jetzt mal mit dem Rechnungslayout im HiOrg Server geübt. Leider hat es da noch ein paar Kleinigkeiten, die nicht passen vom Layout her. In der visuellen Ansicht bei den Server-Einstellungen sieht es ganz gut aus, aber wenn ich das als pdf ausgeben lasse, ist das Logo oben rechts ist wohl doch nicht direkt als Kopfzeile formatiert, es vom restlichen Text überlagert wird.

Außerdem sollte Kopf- und Fußzeile auf Seite 2 ebenso weitergeführt werden, wie auf Seite 1. Ein Beispiel des aktuell ausgeworfenen Rechnungslayouts Malteser - rechnung.pdf (129,5 KB)
sowie der html Quellcode und die Footer.css DOCTYPE html.pdf (62,9 KB)

Wer kann mir helfen, die Fehlerchen noch zu korrigieren?

Vielen herzlichen Dank und beste Grüße.

#2

5 Beiträge wurden in ein neues Thema verschoben: Quelltext (PHP oder HTML) in diesem Forum teilen

#7

Vielen Dank für den Tipp.

In der oben angehängten (editierbaren) pdf ist der gesamte Code enthalten. Wenn ich den hier mit dem CommonMark Schlüssel reinkopiere, kommt folgendes nur raus:

[

Fußleiste immer unten
   
![logo|227x156](upload://cQRdURYi4TpYyAlDsiRbyJGQo2M.jpeg)
Malteser Hilfsdienst e.V.
Bruchsal
Tel:
Fax:
Bearbeiter: [[$myname]]
Malteser Hilfsdienst e. V. | Friedhofstr. 11 | 76646 Bruchsal
[[$absorg]]
[[$absanrede]] [[$absname]]
[[$absadr]]
[[$absort]]
Datum: [[$datum]]
 
[[$rech_gutschrift]] Rech.-Nr. [[$rechnr]]
  Kd.-Nr. [[$kdnr]]
     
Leistung

[[$text1]]

[[$geld1]]

[[$text2]]

[[$geld2]]

[[$text3]]

[[$geld3]]

[[$text4]]

[[$geld4]]

[[$text5]]

[[$geld5]]

[[$text6]]

[[$geld6]]

[[$text7]]

[[$geld7]]

[[$text8]]

[[$geld8]]

[[$text9]]

[[$geld9]]

[[$text10]]

[[$geld10]]
Rechnungsbetrag [[$betrag]]
   
 
Unsere Leistung ist gem. § 4 Nr. 18 UStG steuerfrei
Bitte überweisen Sie den Rechnungsbetrag bis zum [[$faellig]] ohne Abzug unter Angabe der Rechnungs-Nr. [[$konto]] bei der BezirkssparkassenKraichgau.

Vielen Dank für Ihren Auftrag!
 

Für unsere Buchhaltung:
KST / Innenauftrag-Nr.:    

letzte Zeile vom Inhalt

Malteser Hilfsdienst e.V.
Friedhofstr.11
76646 Bruchsal
Tel.:
Fax.:
info@malteser-bruchsal.de
 Bankverbindung:
Sparkasse Kraichgau
BLZ:
Kto.-Nr.
IBAN:
BIC: BRUSDE66XXX		 St-Nr.
(Organträger)
Malteser Hilfsdienst e.V.
Sitz: Köln
Amtsgericht Köln,
VR 		Präsident:
Dr.Constantin von Brandenstein-Zeppelin
Geschäftsführender Vorstand:
Cornelius Freiherr von Fürstenberg, Verena Hölken,
Dr. Elmar Pankau (Vors.), Douglas Graf von Saurma-Jeltsch
]
#8

Hierbei kann ich Dir noch helfen, jedoch kenn ich mich viel zu wenig mit HTML aus, um Dir hier weiterhelfen zu können. Auch wir müssen (müssten) unsere Formulare einem ordentlichen Layout anpassen.


<body>
<div id="seite">
<div class="wrapper"></div>
<div id="inhalt">
<div>&nbsp;&nbsp;&nbsp;</div>
<div>
<table align="center" style="width: 680px; height: 600px;" dir="ltr" border="0" rules="none"
frame="void" cellpadding="2">
<tbody>
<tr></tr>
<tr>
<td style="text-align: right;" colspan="3">
<div class="wrapper"><img width="227" height="156" style="float: right;" alt="logo"
src="https://www.hiorg-server.de/userfiledownload.php?cssmedia=mhdlogo.jpg&amp;ov=bmhd"
/></div>
</td>
</tr>
<tr>
<td style="text-align: right;" colspan="3"><strong>Malteser Hilfsdienst e.V.</strong></td>
</tr>
<tr>
<td style="text-align: right;" colspan="3">Bruchsal</td>
</tr>
<tr>
<td style="text-align: right;" colspan="3">Tel: 07251/300500</td>
</tr>
<tr>
<td style="text-align: right;" colspan="3">Fax: 07251/13760</td>
</tr>
<tr>
<td style="text-align: right;" colspan="3">Bearbeiter: [[$myname]]</td>
</tr>
<tr>
<td colspan="3"><span style="text-decoration: underline; font-size: x-small;">Malteser Hilfsdienst e. V. |
Friedhofstr. 11 | 76646 Bruchsal</span></td>
</tr>
<tr>
<td colspan="3"><span lang="EN-US">[[$absorg]]<br /> [[$absanrede]] [[$absname]]<br />
[[$absadr]]<br /> <strong>[[$absort]]</strong></span></td>
</tr>
<tr>
<td style="text-align: right;" colspan="3"><strong>Datum: [[$datum]]</strong></td>
</tr>
<tr>
<td style="text-align: right;" colspan="3">&nbsp;</td>
</tr>
<tr>
<td style="width: 200px;"><strong>[[$rech_gutschrift]]</strong></td>
<td style="width: 50px;">Rech.-Nr.</td>
<td style="width: 40px; text-align: right;">[[$rechnr]]</td>
</tr>
<tr>
<td style="width: 200px;">&nbsp;</td>
<td style="width: 50px;">Kd.-Nr.</td>
<td style="width: 40px; text-align: right;">[[$kdnr]]</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"
colspan="3"><strong>Leistung</strong></td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text1]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld1]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text2]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld2]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text3]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld3]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text4]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld4]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text5]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld5]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text6]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld6]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text7]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld7]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text8]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld8]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text9]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;">
<p>[[$geld9]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p>[[$text10]]</p>
</td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px;">
<p style="text-align: right;">[[$geld10]]</p>
</td>
</tr>
<tr>
<td style="border-color: #000000; border-style: solid; border-width: 1px;"><strong>Rechnungsbetrag
</strong></td>
<td style="border-color: #000000; border-style: solid; border-width: 1px; text-align: right;"
colspan="2"><strong><strong><strong>[[$betrag]]</strong></strong></strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td style="height: 10px;" colspan="3">&nbsp;</td>
</tr>
<tr>
<td style="text-align: justify;" colspan="3">Unsere Leistung ist gem. &sect; 4 Nr. 18 UStG steuerfrei</td>
</tr>
<tr>
<td style="text-align: left;" colspan="3" p="">Bitte &uuml;berweisen Sie den Rechnungsbetrag bis zum
[[$faellig]] ohne Abzug unter Angabe der Rechnungs-Nr. [[$konto]] bei der
BezirkssparkassenKraichgau.</td>
</tr>
<tr>
<td style="text-align: justify; height: 10px;" colspan="3">
<p>Vielen Dank f&uuml;r Ihren Auftrag!</p>
</td>
</tr>
<tr align="left" valign="middle" style="height: 10px;" dir="ltr">
<td style="text-align: right;">&nbsp;</td>
<td style="border-width: 1px;" dir="ltr" colspan="2">
<p><span style="font-size: x-small;">F&uuml;r unsere Buchhaltung:</span><br /> K<span style="fontsize:
x-small;">ST / Innenauftrag-Nr.:&nbsp;&nbsp;&nbsp;&nbsp; <span style="font-size:
small;"><strong>2100</strong></span></span></p>
</td>
</tr>
</tbody>
</table>
<p>letzte Zeile vom Inhalt</p>
<div id="fussbereich">
<table align="center" style="width: 680px; height: 113px;" dir="ltr">
<tbody>
<tr>
<td><span style="font-size: xx-small;"><strong>Malteser Hilfsdienst e.V.</strong> <br />Friedhofstr.11
<br />76646 Bruchsal<br /> Tel.: 07251/300500<br /> Fax.: 07251/13760<br /> info@malteserbruchsal.de<br
/></span></td>
<td><span style="font-size: xx-small;">Bankverbindung:<br />Sparkasse Kraichgau<br />BLZ:
66350036<br />Kto.-Nr. 401000<br />IBAN: DE44 6635 0036 0000 4010 00<br />BIC:
BRUSDE66XXX</span></td>
<td><span style="font-size: xx-small;">St-Nr. 218/5761/0039<br />(Organtr&auml;ger)<br />Malteser
Hilfsdienst e.V.<br />Sitz: K&ouml;ln<br />Amtsgericht K&ouml;ln,<br />VR 4726</span></td>
<td><span style="font-size: xx-small;">Pr&auml;sident:<br />Dr.Constantin von BrandensteinZeppelin<br
/>Gesch&auml;ftsf&uuml;hrender Vorstand:<br />Cornelius Freiherr von
F&uuml;rstenberg, Verena H&ouml;lken,<br />Dr. Elmar Pankau (Vors.), Douglas Graf von SaurmaJeltsch</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Footer.css
*{
 margin: 0;
 padding: 0;
}
html, body {
 height: 100%;
}
#seite {

 position: relative;
 min-height: 100%;
 width: 700px;
 margin: 0 auto;
 background-color: silver;
}
#inhalt {
 margin: 50 auto;
 background-color: orange;

 padding-bottom: 1em;
}
#fussbereich {
 position:absolute;
 bottom: 0;
 width: 100%;
 height: 2em;
 background-color: yellow;
}
´´´´