tags:

views:

32

answers:

1

I've got the following code and I'm trying to use CSS2 or CSS3 to make it so the content appears below the header on each page when in print preview.

Is this possible? It seems to work correctly on the first page but then every page after that the header sits on top of my content.

<!DOCTYPE html>
<html><head>
<style>
@media print {

h1 {
  position:fixed;
  top: 0;
  left: 0;
}

#content {
  padding-top: 100px;
}
}
</style>
</head>
<body>
<h1>Testing printing CSS</h1>

<div id=content>
<p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p>
</div>
</body> </html>
+1  A: 

Use the Margin Boxes in the CSS3 Paged Media Module:

<!DOCTYPE html>
<html>
  <head>
    <title>Print Test</title>
    <style type="text/css">
      @page {
        @top-center {
          content: "Testing printing CSS";
        }
      }
    </style>
  </head>
  <body>
    <p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p>
  </body>
</html>

Be forewarned: this is relatively unsupported, even in modern browsers.

Parasyte
Modern Browsers, your not wrong I tested that code under Firefox 3.6.10 and Google Chromium 6.0.472.62 and it didn't work at all.
map7