Imprimir HTML

jofemalo73 · #1 (**permalink**) 10/01/2014, 02:09

Buenas, estoy intentando imprimir una web hecha con html. Tengo dos problemas que no consigo dar solución.

1. Al imprimir/preview (desde firefox), cuando hace un salto de página dependiendo de como "cae" el texto, éste se corta. Supongamos la cadena "Texto", pues por ejemplo la mitad superior de la cadena aparece en una hoja y la otra mitad en la otra hoja.

2. He conseguido poner una cabecera con su margen superior, y un cuerpo con otro margen para cada hoja, pero lo que no consigo es un margen inferior para el cuerpo, que apriori si no se cortara el texto me daría un poco igual, pero si lo consigo quedaría mejor maquetada la impresión.

Quizas os parezca obvia la solución, disculparme, pero es que mis conocimientos en html son pobres, no suelo hacer nada en html.

Gracias de antemano.
Saludos.

CODIGO:

Código HTML:

Ver original<html>
<style>
 
@page {size: auto; margin: 20px;20px;20px;20x} 
 
@media print { 
  #cabecera{ 
     position:fixed; 
     left:0;
     top:0;
  } 
  #cuerpo{ 
     position:relative;
     top:1cm;
     bottom:2cm;
  } 
  #pie{ 
     position:fixed; 
     left:670;
     top:0;
  } 
  #pie:after{ 
     counter-increment: page;
     content: counter(page);
  }
  .seg_table {
     border: 1px solid black;    
     margin-top:15px; 
     margin-bottom:20px;
  }
} 
 
@media screen { 
  #cabecera{ 
    display:none; 
  } 
  #pie{ 
    display:none;   
  }
 
} 
 
</style>
  <body>
  
    <div id=cabecera>
      NOMBRE APELLIDO1 APELLIDO2
    </div>  
    
    <div id=pie>
      PAG.
    </div>  
    
    <div id=cuerpo>
    
    <table class="seg_table">
    <tr>
    <td>
      <br>texto</br>
      <br>texto</br>

.....

El codigo que queda repite "<br>texto</br>" varias veces para provocar los saltos de página y luego cierra tr, td, table, div, body y html.

jofemalo73 · #2 (**permalink**) 10/01/2014, 03:08

Por lo visto si en vez de poner esto:

Código HTML:

Ver original<tr>
 <td>
 <br>texto</br>
 <br>texto</br>
 ...
 <br>texto</br>
</tr>
</td>

pongo esto:

Código HTML:

Ver original<tr> <td>Texto</td> </tr>
<tr> <td>Texto</td> </tr>
....
<tr> <td>Texto</td> </tr>

no se corta el texto al producirse un salto de página.

Bueno, ahora voy a ver si averiguo como evitar que en la primera hoja no aparezca el encabezado.

Si a alguien se le ocurre algo ...

g3kdigital · #3 (**permalink**) 10/01/2014, 20:16

Lo cierto es que no he entendido muy bien que quieres hacer.

¿Quieres crear los estilos de impresión de una web? Seria bueno antes que nada tener todo el html limpio y estructurado, seguir con los estilos web y luego por lo estilos para impresión.

¿Tienes una imagen de ejemplo? Es que no me puedo hacer una imagen mental de lo que quieres lograr.

Ah y un consejo, identa un poco los anidamientos en el código para mejorar la lecturabilidad.

Código HTML:

Ver original<html>
<body>
 
  <div id=cabecera>
    NOMBRE APELLIDO1 APELLIDO2
  </div> 
 
  <div id=pie>
    PAG.
  </div> 
 
  <div id=cuerpo>
 
  <table class="seg_table">
    <tr> 
      <td>Texto</td> 
    </tr>
    <tr> 
      <td>Texto</td> 
    </tr>
    <tr> 
      <td>Texto</td> 
    </tr>
   </table>
 
</body>
</html>

pzin · #4 (**permalink**) 11/01/2014, 05:31

Bienvenido al foro.

Aplícale al elemento que no quieres que se corte page-break-inside. Por ejemplo, algo así:

Código CSS:

Ver original@media print {
  table#seg_table {
    page-break-inside: avoid;
  }
}

Y usa la opción de highlight cuando publiques código.