repeat header element when printing

Discussion in 'HTML' started by GF, Jan 24, 2013.

  1. GF

    GF Guest

    Hi,

    I want a <div> and it's content to overlay each page that I print. So far, I
    get a few texts repeated and the correct overlay only on the last page.

    I need some code that works on IE8. If it worked on Webkit, even better, but
    IE8 is a must.


    The complete code is here:
    http://www.glbasic.com/beta/wdkem.html

    Some image about what I need:
    http://www.glbasic.com/pix/print_preview_overlay.png


    Here's my code (important parts)

    #CSS
    ..ztvk thead {display: table-header-group;}
    ..headspace{width:80%; height: 2.7cm; border: 3px solid red;}
    ..overlay {position: fixed; left:0px; top:0px; width:17.0cm; height:22.0cm;
    border: 5px solid blue; overflow:visible; z-index:100;}

    #HTML
    <...>
    <table>
    <thead class='ztvk'>
    <tr><td class='headspace'>

    <!-- this is the overlay container -->
    <div class='overlay'>

    <!-- a box -->
    <div style='position:absolute; left:0.00cm; top:0.00cm; width:17.00cm;
    height:22.00cm; z-index:102'>&nbsp;</div>

    <!-- some text -->
    <div style='position:absolute; left:0.5cm; top:0.25cm; height:0.50cm;
    padding:0.01cm; margin:0.01cm; line-height:0.50cm;
    z-index:101;'><b>TEXT</b></div>
    </div>
    </td></tr></thead>

    <tbody><tr><td class='maintext'>
    text goes here...
    GF, Jan 24, 2013
    #1
    1. Advertising

  2. GF

    123Jim Guest

    On 24/01/2013 09:41, GF wrote:
    > Hi,
    >
    > I want a <div> and it's content to overlay each page that I print. So
    > far, I get a few texts repeated and the correct overlay only on the last
    > page.
    >
    > I need some code that works on IE8. If it worked on Webkit, even better,
    > but IE8 is a must.
    >
    >
    > The complete code is here:
    > http://www.glbasic.com/beta/wdkem.html
    >
    > Some image about what I need:
    > http://www.glbasic.com/pix/print_preview_overlay.png
    >
    >
    > Here's my code (important parts)
    >
    > #CSS
    > .ztvk thead {display: table-header-group;}
    > .headspace{width:80%; height: 2.7cm; border: 3px solid red;}
    > .overlay {position: fixed; left:0px; top:0px; width:17.0cm;
    > height:22.0cm; border: 5px solid blue; overflow:visible; z-index:100;}
    >
    > #HTML
    > <...>
    > <table>
    > <thead class='ztvk'>
    > <tr><td class='headspace'>
    >
    > <!-- this is the overlay container -->
    > <div class='overlay'>
    >
    > <!-- a box -->
    > <div style='position:absolute; left:0.00cm; top:0.00cm; width:17.00cm;
    > height:22.00cm; z-index:102'>&nbsp;</div>
    >
    > <!-- some text -->
    > <div style='position:absolute; left:0.5cm; top:0.25cm; height:0.50cm;
    > padding:0.01cm; margin:0.01cm; line-height:0.50cm;
    > z-index:101;'><b>TEXT</b></div>
    > </div>
    > </td></tr></thead>
    >
    > <tbody><tr><td class='maintext'>
    > text goes here...
    >


    In firefox I see a header at the top of each page when I check print
    preview, but checking print preview seems to choke IE9 for your page.
    Not sure what you are trying to achieve really
    but maybe this will help: http://www.alistapart.com/articles/goingtoprint/
    123Jim, Jan 24, 2013
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?R2lyaXNo?=

    How to repeat header of HTML/Gridview across pages

    =?Utf-8?B?R2lyaXNo?=, Nov 16, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    1,520
    =?Utf-8?B?R2lyaXNo?=
    Nov 17, 2007
  2. Replies:
    0
    Views:
    571
  3. Raja
    Replies:
    0
    Views:
    157
  4. eval

    Repeat Header every 10 rows

    eval, Nov 8, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    147
  5. Replies:
    3
    Views:
    218
    Peter J. Holzer
    Dec 30, 2007
Loading...

Share This Page