I need to create a page that acts as an invoice showing a logo, order info, some text and two label areas at the bottom. Here is a mockup of what we need
The key point is that the bottom address areas are removable sticky labels so these always have to be in this position and no text can go over it.
I know html isn't geared towards print but found a few websites with some suggestions such as specifying A4 height and width in the body. I have come up with a template that doens't look great when browsed but if printed (to a printer or to pdf) the address label areas are in the correct places.
The problem I am having is that whilst my template works for small orders, long orders pushes this information down over the address labels.
Is it possible to make sure nothing goes over these address labels but if the order is long to go onto another page?
Here is what I have
Thanks
The key point is that the bottom address areas are removable sticky labels so these always have to be in this position and no text can go over it.
I know html isn't geared towards print but found a few websites with some suggestions such as specifying A4 height and width in the body. I have come up with a template that doens't look great when browsed but if printed (to a printer or to pdf) the address label areas are in the correct places.
The problem I am having is that whilst my template works for small orders, long orders pushes this information down over the address labels.
Is it possible to make sure nothing goes over these address labels but if the order is long to go onto another page?
Here is what I have
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {font-family: arial, Arial, Helvetica, sans-serif; font-size: 12px}
body {
height: 297mm;/*297*/
width: 210mm;
}
dt { float: left; clear: left; text-align: right; font-weight: bold; margin-right: 10px }
dd { padding: 0 0 0.5em 0; }
</style>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
</head>
<body>
<img src="logo.png" alt="" class="logo" width="304" height='143' />
<br /><br />
<table cellspacing='3' cellpadding='3' WIDTH='100%'>
<tr>
<td valign='top' WIDTH='33%'><strong>ORDERED BY</strong><br /><br />Orderer name<br />
1 Their Street<br />
Town<br />
County<br />
Postcode</td>
<td valign='top' WIDTH='33%'><strong>DELIVERED TO</strong><br /><br />Delivery address<br />
1 Their Street<br />
Town<br />
County<br />
Postcode</td>
<td valign='top' WIDTH='33%'><p>Our company name<br />
Our building<br />
Town<br />
County<br />
Postcode</p>
</td>
</tr>
</table>
<br /><br />
<table cellspacing='3' cellpadding='3' WIDTH='100%'>
<tr>
<td valign='top' WIDTH='33%'>Order number: 123</td>
<td valign='top' WIDTH='33%'>Order date: March 27, 2013</td>
<td valign='top' WIDTH='33%'></td>
</tr>
</table>
<hr />
<table cellspacing='3' cellpadding='3' WIDTH='100%'>
<tr>
<td valign='top'>ITEM</td>
<td valign='top'>QTY</td>
<td valign='top' align='right'>COST</td>
</tr>
<tr>
<td valign='top'>Product name goes here
<dl class="variation">
<dt>Product specific info:</dt>
<dd>This is sometimes very long</dd>
<dt>A product may have none or upto 6 of these</dt>
<dd>Making the product arera variable in size</dd>
</dl> </dl></td>
<td valign='top'>1</td>
<td valign='top' align='right'><span class="amount">£29.50</span></td>
</tr>
</table>
<hr />
<table cellspacing='3' cellpadding='3' WIDTH='100%'>
<tr>
<td valign='top' align='right' width='80%'>Subtotal</td>
<td valign='top' align='right'><span class="amount">£29.50</span></td>
</tr>
<tr>
<td valign='top' align='right' width='80%'>Delivery</td>
<td valign='top' align='right'><span class="amount">£2.95</span> <small>via Royal Mail</small></td>
</tr>
<tr>
<td valign='top' align='right' width='80%'>Order Total</td>
<td valign='top' align='right'><span class="amount">£32.45</span></td>
</tr>
</table>
<p>Thanks for buying with us, I hope the experience wasn't too painful for you.</p>
<p>Please visit us again soon and see what stuff we can offload onto you.</p>
<div style='position: absolute; width: 300px; height: 200px; bottom: 80px; left: 150px;'>
DELIVERY ADDRESS<br /><br />1 Their Street<br />
Town<br />
County<br />
Postcode</div>
<div style='position: absolute; width: 300px; height: 200px; bottom: 80px; left: 600px;'>
RETURN ADDRESS<br /><br />Our company<br />
Our building<br />
Town<br />
County<br />
Postcode
</div>
</body>
</html>Thanks