Rechnungsformular Layout

Tipps & Tricks Vorlagen & Formulare
1

hallo zusammen,
ich habe mich jetzt mal ein wenig an die Umstellung gemacht und wollte das ganze mal mit HTML umsetzen. leider hänge ich jetzt etwas am ausdruck so das es nicht richtig dargestellt wird.
Evtl. hat ja jemand von euch einen Tipp denn irgendwie finde ich den Fehler nicht so das es ordentlich dargestellt wird.

Hier einmal der Quellcode:quellcode.txt (7,1 KB)

3

Hallo,

was meinst Du genau mit “nicht richtig dargestellt” ? Was passt denn nicht?

Auf den ersten Blick ist mir das verzerrte Logo aufgefallen und eben die “zu breite” Tabelle mit den Rechnungspositionen. Beides hier behoben (Seitenbreite auf Logobreite begrenzt):

<!doctype html>
<html>
	<head>
		<style type="text/css">
			{
				margin: 0;
				padding: 0;
					}
			
			html, body {
				height: 100%;
					}
			
			#seite{
				min-height: 100%;
				width: 794px;
				margin: 0;
					}
			#header{
				width: 100%;
					}
			#header_png {
				width: 794px;
			}
			
			#briefkopf{
				width: 100%;
					}
			#empfaenger{
				width: 454px;
				text-align: left;
				vertical-align: top;
					}
			#absender{
				width: 704px;
				text-align: left;
				vertical-align: top;
					}
			#platzhalter1{
				width: 60px;	
					}
			#ansprechpartner{
				width: 100%;
					}
			#re-pos{
				width: 100% auto;
				border: 1px;
				border-color: #000000;
					}
			#ansprechpartner{
				width: 100%;
				height: auto;
					}
			#re-text{
				width: 100% auto;
					}
			#footer{
				width: 100% auto;
				text-align: left;
				vertical-align: top;
					}
		</style>
</head>
<body>
<div id="seite">
	<div id="header">
		<img id="header_png" src="https://www.hiorg-server.de/userfiledownload.php?cssmedia=header.png&amp;ov=segl" alt=""/>
	</div>
	<div id="briefkopf">
		<table style="width: 100%;" border="0" width="100%">
			<tbody>
				<tr>
					<td id="empfaenger" style="width: 36.4367%;" width="37%"><span style="font-size: 8pt;"><u>Johanniter-Unfall-Hilfe e. V., Am Pferdemarkt 84, 30853 Langenhagen</u></span></td>
					<td id="platzhalter1" style="width: 13.4177%;" rowspan="3" width="6%">&nbsp;</td>
					<td id="absender" style="width: 50.1456%;" rowspan="3" width="57%">
					<p><strong>Johanniter-Unfall-Hilfe e. V.</strong><strong><br />Regionalverband Niedersachsen Mitte<br /></strong><strong>Nordhannoverscher Ortsverband</strong></p>
					<p>Am Pferdemarkt 84<br />30853 Langenhagen</p>
					<p>Telefon 0511 97238-26<br />Telefax 0511 97238-36<br />langenhagen@johanniter.de<br />www.johanniter.de/langenhagen</p>
					<p><img src="https://www.hiorg-server.de/userfiledownload.php?cssmedia=verbund.png&amp;ov=segl" alt="" width="65" height="19" /></p>
					<p><span style="width: 30.6986%;">Steuernummer 27/028/35402</span></p>
					</td>
				</tr>
				<tr>
					<td style="width: 36.4367%;">&nbsp;</td>
				</tr>
				<tr>
					<td style="width: 36.4367%;" align="left" valign="top">[[$absorg]]<br /><br />[[$absanrede]] [[$absname]]<br />[[$absadr]]<br /><br /><strong>[[$absort]]</strong></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="ansprechpartner">
		<table border="0" width="100%">
			<tbody>
				<tr>
					<td width="8%">Unser Zeichen</td>
					<td width="20%">Tel./Fax(Durchwahl)</td>
					<td width="30%">E-Mail</td>
					<td width="42%">Datum</td>
				</tr>
				<tr>
					<td><span style="width: 21.0526%;">[[$kuerzel]]</span></td>
					<td><span style="width: 18.2775%;">[[$mypersteldienst]]</span></td>
					<td><span style="width: 29.1866%;">[[$mypersemail]]</span></td>
					<td><span style="width: 30.3349%;">[[$datum]]</span></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="re-pos">
		<table border="0" width="100%">
			<tbody>
				<tr>
				<td colspan="3">&nbsp;</td>
				</tr>
				<tr>
				<td><strong>[[$rech_gutschrift]]</strong></td>
				<td><span style="width: 50px;">Rech.-Nr.</span></td>
				<td><span style="width: 40px; text-align: right;">[[$rechnr]]</span></td>
				</tr>
				<tr>
				<td>&nbsp;</td>
				<td><span style="width: 50px;">Kd.-Nr.</span></td>
				<td><span style="width: 40px; text-align: right;">[[$kdnr]]</span></td>
				</tr>
				<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				</tr>
				<tr>
				<td colspan="3"><strong>Leistung</strong></td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text1]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld1]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text2]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld2]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text3]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld3]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text4]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld4]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text5]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld5]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text6]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld6]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text7]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld7]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text8]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld8]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text9]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="text-align: right; border: 1px solid #000000;">
				<p>[[$geld9]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;">
				<p>[[$text10]]</p>
				</td>
				<td>&nbsp;</td>
				<td style="border: 1px solid #000000;">
				<p style="text-align: right;">[[$geld10]]</p>
				</td>
				</tr>
				<tr>
				<td style="border: 1px solid #000000;"><strong>Rechnungsbetrag </strong></td>
				<td style="text-align: right; border: 1px solid #000000;" colspan="2"><strong>[[$betrag]]</strong>&lt;</td>
				</tr>
				<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				</tr>
				<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="re-text">
		<table border="0" width="100%">
			<tbody>
				<tr>
					<td><span style="text-align: justify;">Unsere Leistung ist gem. &sect; 4 Nr. 18 UStG steuerfrei</span></td>
				</tr>
				<tr>
					<td><span style="text-align: left;">Bitte &uuml;berweisen Sie den Rechnungsbetrag bis zum [[$faellig]] ohne Abzug unter Angabe der Rechnungs-Nr..</span></td>
				</tr>
				<tr>
					<td>Vielen Dank f&uuml;r Ihren Auftrag!</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="footer">
		<table border="0" width="100%">
			<tbody>
				<tr>
					<td colspan="6">&nbsp;</td>
				</tr>
				<tr>
					<td style="width: 20%;" align="left" valign="top">
						<p>Pr&auml;sident:<br />Dr. h. c. Frank-J&uuml;rgen Weise<br />Bundesvorstand (&sect; 26 BGB):<br />J&ouml;rg L&uuml;ssem<br />Thomas M&auml;hnert<br />Hubertus von Puttkammer</p>
					</td>
					<td style="width: 12%;" align="left" valign="top">
						<p>Landesvorstand:<br />Bernhard G&auml;tjen<br />Uwe Beyes<br />Hannes Wendler</p>
					</td>
					<td style="width: 17%;" align="left" valign="top">
						<p>Regionalvorstand:<br />Hans Joachim Halbach<br />Hermann Fraatz</p>
					</td>
					<td style="width: 24.5829%;" align="left" valign="top">
						<p>Bank f&uuml;r Sozialwirtschaft<br />BLZ 370 205 00<br />Kto.-Nr. 431 23 00<br />BIC BFSWDE33XXX<br />IBAN DE79370205000004312300</p>
					</td>
					<td style="width: 9.4171%;" align="left" valign="top">
						<img src="https://www.hiorg-server.de/userfiledownload.php?cssmedia=dzi.png&amp;ov=segl" width="55" height="71" />
					</td>
					<td style="width: 17%;" align="left" valign="top">
						<img src="https://www.hiorg-server.de/userfiledownload.php?cssmedia=tuev.png&amp;ov=segl" width="119" height="71" />
					</td>
				</tr>
				<tr>
					<td colspan="6" align="center" valign="middle">
						<span style="width: 100%;">Vereinsregister-Nr. 17661 B, Amtsgericht Charlottenburg</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>

Ich hoffe das hilft Dir.

Tipp: Wenn es hierbei wirklich um einen Ausdruck (A4-Format) geht dann verwende doch “einfach” absolute Angaben in cm, mm oder pt. Damit wird das gestalten der Seite ersichtlicher und einfacher.