How to print the header and footer on every page ?

135 views
Skip to first unread message

marchomal mal

unread,
Mar 15, 2014, 6:30:07 AM3/15/14
to delphichrom...@googlegroups.com
Using the demo "guiclient" when printing an html page with 
several pages, the header is only displayed on the first page 
and standing alone on the last. 

How you can repeat the header and footer on every page?

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Title of the web page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
@media screen {
header.onlyprint, footer.onlyprint {
display : none;
}
}
@media print {
body { 
margin-top : 50px;
margin-bottom : 50px;
}
header.onlyprint {
position : fixed;
top : 0;
height : 50px;
}
footer.onlyprint {
position : fixed;
bottom : 0;
height : 50px;
}
}
p {
  font-size : 80px;
}
  </style>
</head>

<body>

  <p >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at erat sed velit tincidunt iaculis non quis urna. 
Suspendisse sollicitudin, ante quis ultricies condimentum, justo lorem sagittis leo, eget sodales velit lectus sed nibh.
Suspendisse metus lectus, ornare nec odio non, ultrices varius risus. Donec in elit ultrices, iaculis mi sed, tincidunt
nunc. Proin eleifend molestie lorem, vitae tempor odio. Phasellus commodo dui eu urna dictum viverra. Sed nec scelerisque
ligula. Etiam mollis sit amet nunc quis mattis. Duis sed neque quis nibh cursus molestie.
  </p>

  <header class="onlyprint">This is the title for printing</header>
  <footer class="onlyprint">This is the footer for printing</footer>  
</body>
</html>


Reply all
Reply to author
Forward
0 new messages