Log in / Register

Forum › How do I...?

Footer

gribouille
Hi,
I'm evaluating Prince, so I'm trying to make a footer with, but the problem is that footer stay invisible :(.
Here is my code :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
@page {
  size: a4;
  margin: 0mm;
  padding: 10mm 0mm;
  border-bottom: thin solid black;
  
  @top {
    margin-top: 1cm;
    width: 19cm;
    margin-left : 1cm;
    margin-right : 1cm;
    content : flow(header);
  }
  
  @bottom { content: flow(footer) } 
  
}
....
#header { prince-flow: static(header); }
#footer { prince-flow: static(footer); } 
....
</style>
<body>
    <div id="header">
        MY HEADER CONTENT
   </div>
   <div id="footer">
        MY FOOTER CONTENT
   </div>
.....
</body>
</html>


And even if I do this :

@page {
  size: a4;
  margin: 0mm;
  padding: 10mm 0mm;
  border-bottom: thin solid black;
  
  @top {
    margin-top: 1cm;
    width: 19cm;
    margin-left : 1cm;
    margin-right : 1cm;
    content : flow(header);
  }
  
  @bottom {
    font: 12pt "Georgia", serif;
    content: counter(page);
    vertical-align: top;
    margin: 0.3em 0;
  } 
}


Has anybody a solution?
mikeday
It looks like the problem is that you have set no margin on the page itself:

@page {
  size: a4;
  margin: 0mm;
  ...

This means that there will be no space to fit the margin boxes (header and footer). Try increasing the page margin, or simply remove the margin declaration in order to get the default margin size.
gribouille
Ok thanks, that's solved the problem