Hi,
I am having a bit of trouble getting my header to appear in the generated pdf, i have created a div with id header and placed inside what i would like to appear in every page (my html code is at the bottom).
And in my css i have added the following:
this is not working, it is not even showing once, any help would be greatly appreciated.
Thanks in advance.
I have added my html and css code at the bottom.
I am having a bit of trouble getting my header to appear in the generated pdf, i have created a div with id header and placed inside what i would like to appear in every page (my html code is at the bottom).
And in my css i have added the following:
@page{
@top {
content: flow(header);
}
}
#header{
flow: static(header);
}
this is not working, it is not even showing once, any help would be greatly appreciated.
Thanks in advance.
I have added my html and css code at the bottom.
<html>
<head>
<title>Invoice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="prince.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id = "header">
<div class = "top">
<div id = "vendor_information">
<h2>
Independent Electric Supply, INC.
</h2>
<p>
1370 Bayport Ave.
</p>
<p>
San Carlos, CA 94070
</p>
</div>
<div id = "remit_to_box">
<div class = "remit_to">
Remit to:
</div>
<div class = "remit_to_information_first">
Independent Electric Supply
</div>
<div class = "remit_to_information">
P.O. Box 1263
</div>
<div class = "remit_to_information">
San Carlos, CA 94070
</div>
</div>
<div id = "invoice_information">
<div class = "invoice_label">
<div>
INVOICE NO:
</div>
<div>
INVOICE DATE:
</div>
<div>
PO NO:
</div>
<div>
JOB NO:
</div>
<div>
ORDER BY
</div>
</div>
<div class = "invoice_value">
<div>
123345566
</div>
<div>
12/10/2009
</div>
<div>
10403248
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</div>
<div class = "bottom">
<div class = "sold_to_box">
<div class = "remit_to">
Sold to:
</div>
<div class = "remit_to_information_first">
Independent Electric Supply
</div>
<div class = "remit_to_information">
P.O. Box 1263
</div>
<div class = "remit_to_information">
San Carlos, CA 94070
</div>
</div>
<div class = "ship_to_box">
<div class = "remit_to">
Ship to:
</div>
<div class = "remit_to_information_first">
Independent Electric Supply
</div>
<div class = "remit_to_information">
P.O. Box 1263
</div>
<div class = "remit_to_information">
San Carlos, CA 94070
</div>
</div>
</div>
</div>
</body>
</html>
@page {
size: a4;
margin: 2.45cm 1.2cm 1cm;
@top {
content: flow(header);
}
}
#header{
flow: static(header);
}
body{
width:700px;
}
#vendor_information{
width:30%;
float:left;
}
#vendor_information h2{
margin:0px;
}
#vendor_information p{
margin:0px;
}
#remit_to_box{
float:left;
width:38%;
border: 1px solid;
height:100px;
}
.centered {
margin: 0px;
margin-left: 43%;
}
.remit_to{
width:20%;
font-weight:bold;
margin:10px;
float:left;
height:100%;
}
.remit_to_information_first{
width:67%;
float:left;
margin-right:10px;
margin-top:10px;
}
.remit_to_information{
width:67%;
float:left;
margin-right:10px;
}
#invoice_information{
margin-left:10px;
float:left;
width:30%;
}
.invoice_label{
float:left;
}
.invoice_value{
float:right;
}
.bottom{
clear:left;
}
.sold_to_box{
float:left;
width:48%;
border: 1px solid;
height: 75px;
}
.ship_to_box{
float:right;
width:48%;
border: 1px solid;
height: 75px;
}