css para impressao media print

19/04/2016

bom dia.

Eu tenho uma pagina que mostra na tela um boletim de varias pessoas.
Utilizei o css media print com o estilo page-break-before: always ;. e para cada pessoa, o mesmo esta sendo impresso em uma �nica pagina corretamente.
O meu problema � que, a primeira pagina sempre � em branco. Como fa�o para remover esta pagina em branco?
Desde j� agrade�o.

Gisely Santos

Curtir t�pico + 0

Responder

Post mais votado

19/04/2016

Se quiser compartilhar o c�digo HTML e css, posso testar ;)

Bruno Azevedo

Responder

Gostei + 1

Mais Posts

19/04/2016

Bruno Azevedo

Boa tarde Gisely,

Voc� pode criar uma div s� para fazer a quebra de linhas exemplo: <div style="page-break-after: avoid;"></div>
Dessa forma, ter� mais controle sobre a divis�o das p�ginas.

Espero ter ajudado. ;)

Responder

Gostei + 0

19/04/2016

Gisely Santos

Ola.
Tentei desta forma, porem as primeiras paginas s�o formatadas corretamente, porem o restantes das paginas vai se desconfigurando aos poucos onde o titulo da segunda aparece na primeira entre outras coisas...
mais alguma sugest�o?

Responder

Gostei + 0

19/04/2016

Gisely Santos

bem, posso compartilhar parte, pois o c�digo em si � muito extenso...rsrs
segue abaixo o css:

<style type="text/css" rel="stylesheet">
    @media print
    {
		.botaotopo{
			display:none;
		}
		.botao_print{
			display:none;
		}
    }
</style>
<style type="text/css">
.nav, footer, video, audio, object, embed { 
    display:none; 
    }
.texto_tebela_lateral {
	font-size: 12px;
	text-align: left;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}
.botaotopo {
	display:scroll;
	position:fixed;
	top:1%;
	right:1%;
}
.botao_print{
	display:scroll;
	position:fixed;
	top:8%;
	right:1%;
	cursor: pointer;
}
table.boletim_indicador {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	alignment-adjust:auto;
	vertical-align: middle;
	border-collapse: collapse;
	margin: 5px auto;
}
table.boletim_indicador .subtitulo {
	text-align: left;
}
table.boletim_indicador .titulo {
	text-align: center;
	background-color: #EEEEEE;
	color: #666666;
}
table.boletim_indicador td {
	text-align: center;
	border: solid 1px gray;
}
.current {
	font-size: 20px;
	text-align: justify;
	font-size: 16px;
}
.current1 {font-size: 20px;
	text-align: justify;
	font-size: 18px;
}
.boletim {
	text-align: center;
}
.current10 {	font-size: 20px;
	text-align: justify;
	font-size: 16px;
}
</style>

essa seria, a parte do documento a ser impresso. Como na pagina anterior ou sera enviado apenas o nome de uma pessoa ou o nome de varias pessoas.

<?
// na pagina anterior preciso filtrr um curso para exibir a lista dos alunos. posso mandar um aluno ou varios para exibir este boletim.
if($curso){	
	$array = array();
	foreach ( $alunos as $matricula => $vetor_final ) {
		if ( array_key_exists( $vetor_final['matricula_aluno'], $resultado ) ) {
	// esse array � apenas para montar o vetor de resultados no seu boletim.
?>
<table width="800" height="1180" align="center" cellpadding="2">
  <tr>
    <th valign="top" >
    <table width="800" border="0" align="center">
      <tr>
        <th height="49" ><table width="780" border="0">
          <tr>
            <th width="212" height="47" align="left" ><img src="../images/logo.png" alt="" width="175" height="36"></th>
            <td width="558"><p align="right">Cidade e data.</p></td>
          </tr>
        </table></th>
      </tr>
      <tr>
        <th  ><table width="800" cellpadding="2">
          <tr>
            <th align="center" scope="row"><h1 class="boletim">BOLETIM</h1></th>
          </tr>
        </table>
          <table width="800" cellpadding="2">
            <tr>
              <th width="148" align="left" scope="row"><strong class="current10 ">NOME:</strong></th>
              <td width="320">JOAOZINHO</td>
              <td width="114"><strong class="current10 ">MATRÍCULA:</strong></td>
              <td width="190">123467890123</td>
            </tr>
          </table>
          <table width="800" cellpadding="2">
            <tr>
              <th width="150" scope="row"><strong class="current10  ">SALA</strong></th>
              <td width="231">902</td>
              <td width="126"><strong>CURSO:</strong></td>
              <td width="257">TADS</td>
            </tr>
          </table>
          <table width="800" cellpadding="2">
            <tr>
              <th width="193" align="left" scope="row"><strong class="current10 ">DATA INICIO:</strong></th>
              <td width="151">2016-01-01</td>
              <td width="197"><span class="current10 "><strong>SEMESTRE</strong>:</span></td>
              <td width="231">3</td>
            </tr>
          </table></th>
      </tr>
      <tr>
        <td align="left" ><p class="current10 "> </p>
		aqui eu tenho um texto explicativo sobre o resultado atual da pessoa 
        </td>
      </tr>
      <tr>
        <th ><img src="../imagem/recorte.png" alt="" width="800" height="5"></th>
      </tr>
      <tr>
        <td height="250" >
<?
if ( $codicao1 == true ){
?>
        <table width="100%" class="boletim_indicador">
          <tr>
            <td class="titulo">titulo 01</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
          <tr>
            <td class="subtitulo">titulo 02</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
          <tr>
            <td class="subtitulo">titulo 03</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
        <tr>
            <td class="subtitulo">titulo 04</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
        </table>
<? } 
		
		if ( $codicao2 == true ){
?>
        <table width="100%" class="boletim_indicador">
          <tr>
            <td class="titulo">titulo 01</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
          <tr>
            <td class="subtitulo">titulo 02</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
          <tr>
            <td class="subtitulo">titulo 03</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
        <tr>
            <td class="subtitulo">titulo 04</td>
            <td>campo 01</td>
            <td>campo 02</td>
            <td>campo 03</td>
            <td>campo 04</td>
			<td>campo 05</td>
            <td>campo 06</td>
			<td>campo 07</td> 
		</tr>
        </table>
<? } ?>
        </td>
      </tr>
    </table></th>
  </tr>
</table>
<?
		}
	}
}
?>

<!-- exibe botao flutuante para retornar a pagina anterior  -->
<a class="botaotopo" href="pagina1.php" title="Voltar">
	<img  width="40px" height="40px" src="../image/voltar_.png" border="0" />
</a>
<!-- exibe botao flutuante para imprimiar a pagina   -->
<a class="botao_print" onClick="window.print();" >
	<img  width="40px" height="40px" src="../image/print.gif" border="0" />
</a>

nao sei exatamente ao devo colocar a tal div para dar a quebra na pagina. se dentro do la�o de repeti��o ou fora...
tentei por dentro do foreach, a primeira pagina configurou corretamente, a segunda veio em branco e as demais formatadas corretamente.
tentei de varias formas... nao obtive resultado.
Como disse, na ultima sugest�o, se fossem preparadas 18 paginas para a impressao, at� a 10 configurou corretamente, depois come�ou a subir o titulo com o logo para a pagina anterior e ja bagun�ou tudo...

Agrade�o a aten��o mais uma vez :)

Responder

Gostei + 0

24/10/2016

Gisely Santos

Resolvido. o problema eram as disposi��es das tags 'TABLE' as as linhas e celulas.
vlw

Responder

Gostei + 0