HTML - HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

   
Vista:

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Patricia (4 intervenciones) el 19/12/2013 20:18:39
Tengo un template html y quiero que cuando se imprima se vea un encabezado y un pie de página en cada hoja. Tengo esto definido en el css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media all {
		.divHeader, .divFooter { display: none; }
	}
	@media print {
		.divHeader {
			display: block;
			position: fixed;
                        top: 0;
		}
		.divFooter {
			display: block;
			position: fixed;
                        bottom: 0;
		}
          }

Funciona, agrega el encabezado y el pie a cada página, pero el problema es que se superpone con el contenido.
No encontré ninguna solución, si le pongo margin top o margin bottom al contenido parece que no lo lee, aunque sí margin left y margin right.
Alguien sabe como puedo solucionarlo?
gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Jose maria

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Jose maria (31 intervenciones) el 19/12/2013 20:41:28
Hola Patricia:

position: fixed; sitúa los elementos donde indicas (top: 0; y bottom: 0;) sin tener en cuenta lo que haya debajo y sin desplazarlo.

Prueba con position: absolute;

1
2
3
4
5
6
7
8
9
10
11
12
@media print {
  .divHeader {
    display: block;
    position: absolute;
    top: 0;
  }
  .divFooter {
    display: block;
    position: absolute;
    bottom: 0;
  }
}

Si no se soluciona, pasa el código CSS de los elementos que quedan superpuestos para ver cómo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Patricia (4 intervenciones) el 19/12/2013 21:18:22
Hola, muchas gracias por responder tan rápido
ya probé con "position: absolute" y no funciona. El problema es que "position: fixed" es lo que hace que el encabezado aparezca en cada página, si lo quito, solo se imprime en la primera hoja.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Jose maria (31 intervenciones) el 19/12/2013 21:38:53
Sin ver el resto de código, será necesario que en @media print generes unos espacios vacíos (tal vez ampliación de su margen superior en el div superior de página) que correspondan a la altura de tu .divHeader.
Aunque me dirás que en la segunda hoja te ocurre lo mismo.

Porque la causa, ya la sabemos y te es necesaria la position: fixed.

Respecto a .divFooter, y posiblemente para toda la impresión,(tendría que probarlo) creo que tendríamos que ver con el tamaño (formato) de impresión y "engañarle" de forma parecida; definir, por ejemplo, un tamaño "carta" para imprimir en "A4".

Si no encuentras la solución, tal vez mañana pueda dedicarle un tiempo para ver la mejor solución.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Jose maria (31 intervenciones) el 20/12/2013 08:48:03
Bien Patricia:

Dado que mis sospechas eran fundadas y que @page, como intuía ayer, no funciona para impresión no sirve definir, por ejemplo:
1
2
3
@page {
  size: 8.5in 11in;  /* width height */
}

La única solución es provocar el salto de página con page-break-after:always;
Y, como vuelve a aparecer el problema de la superposición de la cabecera sobre el texto, .divHeader habrá de ser tratado de forma diferente y repetirse después de cada salto de página, olvidándonos de position: fixed.

Con la extensión necesaria para provocar el salto de línea (que tendremos que calcular manualmente pero con la ventaja de que no nos romperá imágenes u otros elementos donde no queramos), una página podría quedar así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
  <head><meta charset="utf-8">
    <title>Header Footer Print</title>
<style>
@media screen {
  .divHeader, .divFooter { display: none; }
}
@media print {
  .divHeader {
	display: block;
    top: 0;
  }
  .divFooter {
	display: block;
	position: fixed;
	bottom: 0;
	font-weight: bold;
  }
  .page-break{
    page-break-after:always;
  }
}
</style>
  </head>
 
  <body>
    <div class="divHeader">
      <h1>Lorem ipsum</h1>
    </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt nisl et velit sollicitudin tristique sit amet eget tellus. Integer sed imperdiet urna, eu ultricies odio. Nulla consequat gravida nisl, vitae fermentum lectus malesuada ut. Pellentesque est erat, scelerisque vel ante vel, elementum bibendum justo. Mauris facilisis neque elementum magna laoreet pharetra. In porttitor at odio volutpat sagittis. Nullam tristique ultricies consequat. Vivamus dignissim felis consequat tellus eleifend vehicula. Sed vel nisi id elit feugiat molestie in a leo.</p>
<p>Praesent porttitor, augue in cursus pulvinar, justo lorem ultrices eros, ac convallis diam ligula eget quam. Integer vitae pharetra est, sed hendrerit purus. Ut egestas facilisis elit non sodales. Proin volutpat ultrices enim, nec iaculis ipsum molestie in. Suspendisse non nunc ligula. Donec magna libero, hendrerit non ornare quis, accumsan vitae leo. Maecenas ut pulvinar felis. Pellentesque congue nec metus nec molestie. Vestibulum rhoncus magna volutpat tellus malesuada, sit amet luctus arcu suscipit. Pellentesque lectus nisi, dignissim at sem sed, condimentum blandit ipsum. Vestibulum iaculis felis vitae enim pretium aliquet.</p>
<p>Ut ac posuere magna. Morbi aliquet leo ac eros congue pulvinar. Nam porttitor commodo justo. Sed velit purus, malesuada eu nibh sit amet, iaculis tristique metus. Curabitur bibendum, nibh sit amet porta auctor, purus ligula tincidunt elit, vel cursus metus urna et orci. Ut nec quam elit. Curabitur at justo sit amet dui congue adipiscing in non sem. In et hendrerit ipsum. Vivamus rhoncus tincidunt velit, nec facilisis augue hendrerit a. Nam at gravida neque. Vestibulum vehicula gravida semper. Nulla pulvinar libero magna, nec varius ipsum iaculis nec. Etiam pellentesque convallis felis at vehicula.</p>
<p>Duis scelerisque facilisis justo, ac mattis massa accumsan vitae. Etiam luctus vulputate ullamcorper. Curabitur ornare, est vitae lacinia malesuada, enim risus bibendum purus, id placerat mi nulla non velit. Praesent vulputate diam nec molestie volutpat. Etiam non leo a mauris accumsan convallis sed ut mauris. Fusce faucibus non ipsum eget imperdiet. Aenean a risus vitae ante condimentum mollis. Phasellus et eros ligula. Nunc dignissim luctus purus eget congue. Ut sit amet pellentesque tortor. Aliquam ornare, mi id vulputate mollis, urna ligula pretium ante, a porta justo enim a dolor. Nulla lacus mauris, elementum sit amet ante vel, porta ultricies est.</p>
<p>Nam sit amet turpis et sem porta vestibulum in non enim. Aliquam erat volutpat. Mauris ullamcorper odio nec risus scelerisque feugiat. Phasellus ut eros interdum lectus pharetra tempor. Praesent dignissim lorem quis convallis vehicula. Suspendisse vel adipiscing turpis. Curabitur posuere felis at leo ullamcorper facilisis. Sed magna lorem, tristique quis pretium vitae, sollicitudin in lectus.</p>
<p>In consequat in justo ut posuere. Sed aliquet sapien eu nunc pellentesque condimentum. Aliquam dapibus gravida leo, vitae aliquet justo consequat eget. Nulla facilisi. Suspendisse dignissim elit nec ligula ornare dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas scelerisque, nisi sit amet hendrerit accumsan, nulla quam dignissim purus, quis posuere turpis massa at purus. Curabitur accumsan a magna sed gravida. Curabitur commodo pharetra neque pulvinar suscipit.</p>
    <div class="page-break"></div>
    <div class="divHeader">
      <h1>Lorem ipsum</h1>
    </div>
<p>Nunc hendrerit enim mauris, sit amet euismod dolor consectetur et. Donec vel velit orci. Aliquam eget turpis eu turpis sodales adipiscing vitae sed urna. Nullam eu venenatis lacus. Fusce a tincidunt nibh. Vestibulum eget lacus ligula. Duis ac sagittis lorem. Sed ligula augue, tempus ac leo at, ornare viverra lacus. Morbi rhoncus pretium neque sit amet ultricies. Suspendisse at sapien sapien.</p>
<p>In eu rutrum sem, a vestibulum lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tempus rhoncus est, at euismod risus euismod sit amet. Vestibulum a sem egestas, sagittis leo sed, eleifend magna. Quisque purus nisi, pellentesque in tellus et, accumsan scelerisque nisl. In hac habitasse platea dictumst. Curabitur euismod viverra consectetur. Nulla ante tellus, porta vitae urna id, dignissim pulvinar lorem. Maecenas consequat, dolor id tristique aliquam, mauris purus adipiscing ipsum, ac porttitor lorem diam vitae est. Quisque porta, nisi quis lacinia luctus, purus urna convallis dui, vel elementum metus sapien ac ante. Pellentesque sit amet urna et est ullamcorper dapibus. Fusce ut tempus augue, ac elementum lacus.</p>
<p>Aenean accumsan, est mattis ornare dapibus, ligula enim laoreet tellus, et egestas eros sapien in sapien. Sed dapibus, ipsum a dictum venenatis, sem dui sagittis lectus, nec posuere dolor sapien et ante. Pellentesque convallis iaculis nisl vitae eleifend. Maecenas nec libero non dui iaculis faucibus. Morbi eros metus, dapibus nec adipiscing sed, sagittis vitae justo. Nullam gravida, magna id adipiscing fringilla, odio dui pharetra felis, a porttitor justo libero in erat. Etiam vitae varius arcu. Curabitur placerat quam quis nisi tristique, vitae luctus velit molestie. Donec ornare, lorem eu varius feugiat, urna mi sagittis ipsum, eu imperdiet nulla urna et enim.</p>
<p>Nullam id mattis ante. Duis sodales nisl in sapien bibendum, id egestas nunc volutpat. Quisque eu rhoncus purus, non interdum orci. Duis quis dolor hendrerit, ultricies lorem at, imperdiet dolor. Donec ultrices nibh ac metus dapibus faucibus. Suspendisse odio arcu, cursus eu est ac, fringilla fringilla libero. Mauris venenatis tellus tortor, a volutpat dui egestas nec.</p>
    <div class="divFooter">
      <p>Pie de página</p>
      <p>Segunda línea de Pie de página</p>
    </div>
  </body>
</html>

Aparentemente es aceptado por todos los navegadores remontándonos a IE8.

Comentanos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Patricia (4 intervenciones) el 20/12/2013 12:55:03
Buenas,
muchas gracias por la respuesta nuevamente
estuve vichando lo que propones, el tema es que se trata de un template html, el contenido lo completo de forma dinámica, no sé con certeza cuántas páginas va a tener, por eso no me sirve hacer page breaks fijos.

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Jose maria (31 intervenciones) el 20/12/2013 14:11:23
Pues lo tienes muy crudo.

Hay otra solución en base a tablas pero que solo funciona en firefox y se considera arcaica (por el trabajo en tablas que en este caso usa cabecera y pie para repetirse).

He tratado de ver si vía HTML5 había alguna novedad sobre @media print y todo lo que he visto es que está demandado (el tema de impresión de cabecera y pie) pero no hay ninguna propuesta de innovación: sigue con lo que tenemos hasta ahora de HTML4 y CSS2.

P.D.: Mi experiencia venía de trabajar estilos de impresión de una sola página, y bien viene saber todo lo nuevo que en este caso no hay al tiempo de recordar lo viejo.
Lo mejor que he leído: http://stackoverflow.com/questions/1360869/html-print-header-footer
http://stackoverflow.com/questions/9729461/creating-page-headers-and-footers-using-css-for-print/9742295#9742295

EDITO: Te paso el planteamiento con tablas. Comprueba con Chome

HTML
1
2
3
4
5
6
7
8
9
10
11
<body>
<table>
   <thead><tr><td>Su encabezado va aquí</td></tr></thead>
   <tbody>
     <tr><td>
     Cuerpo de la página aquí
     </td></tr>
   </tbody>
   <tfoot><tr><td>Su pie de página va aquí</td></tr></tfoot>
</table>
</body>

CSS
1
2
3
4
5
6
7
8
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: block; }
tfoot { display: block; }
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

HTML DE IMPRESIÓN, SE SUPERPONE ENCABEZADO A CONTENIDO

Publicado por Patricia (4 intervenciones) el 20/12/2013 15:13:20
Muchas gracias por la dedicación,
estuve leyendo y probando las soluciones de los links que me dejaste, pero no funcionó nada.
Parece que no hay nada de nada.

gracias y saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar