Log in / Register

Forum › How do I...?

Placing header in top of page not working

nakort
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:
@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>
                  &nbsp;
                </div>
                <div>
                  &nbsp;
                </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;
}
mikeday
The top margin of the page is too small, try increasing it to about 7.5cm.