How to declare a div in @page @top-left

Question

How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.

I have a div like:

<div id=header>Document</div>

and I would like to display it on every page in top left corner using css like:

@page {
    size: 8.5in 11in;
    margin: 0.25in;
    border: thin solid black;
    padding: 1em;


     @top-left {
        content: ???? ;
      }
}

Thank you.

Attalie

Answer 1

Doesn't

#header {
   position: fixed;
   top: 0;
   left: 0;
}

work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.

EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.

Ascomycete

Nope, while this will place header on top left, it will be within page content area and not a page Margin box. Sorry, I should have specified that this is for print media.. See w3.org/TR/css3-page/#page-box-page-rule – Attalie

@icon911: Nope, my fault, I didn't read your question well enough (and didn't look into the @top-left rules, which I didn't know before you linked to the CSS3 specs) – Ascomycete

Answer 2

I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1

In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.

<style>
  div.header { display: none }
  @media print {
  div.header {
    display: block;
    position: running(header);
  }
  @page { @top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>

<h1 class="chapter">An introduction</div>

Jhelum

its not working in webkit browsers.... is there any other solution to achieve the same – Nochur

Is there a browser in which this is supported? As far as I know, this is still on the drawing table. – Nonfulfillment

@NicolasBouliane. Sorry for the very delayed reply. I used this when generating a pdf from xhtml (using FlyingSaucer - where it does work), so I haven't actually seen it work in a browser I'm afraid. – Jhelum

@NicolasBouliane: Correct - css 3 paged media module margin boxes are not implemented in any major browser yet. See Comparison of layout engines for details. – Colombia

This won't make the header to appear on all pages. – Howlan