0

Estou gerando um loop de uma div de tamanho fixo e gostaria que na hora da impressão cada uma fique em uma página. Porém a primeira Div do Loop fica com uma margem-top impedindo que isso aconteça ! Existe alguma maneira que faça essa primeira div ser dirente das demais nessa questão da margin ? Segue Código para melhor entendimento Grato :)

<style type="text/css">
    .papel {width: 297mm;height: 208mm; background-color:red;border: 3px solid gray;top: -45%;left: 0%;position: absolute; overflow:hidden;transform:scale(0.5) translate3d(0px,0px,0px); margin-bottom: 80px;float:left;}
    @media print {
        .papel {transform:scale(1); margin-top:0!important; border:none;top:0px!important;left: 0px!important;transform:translate3d(0px,0px,0px)!important;}
        #imprimir{display:none!important;}
    }
</style>
<?php for($i=0;$i<=4;$i++):
        if($i == 1) $cor = "blue";
        if($i == 2) $cor = "black";
        if($i == 3) $cor = "yellow";
        if($i == 4) $cor = "green";
    ?>
    <div class="papel" id="papel" style="margin-top:calc(210mm * <?php echo $i?>)!important;background-color:<?php echo $cor ?>">
    </div>
<?php endfor;?>

<input type="button" id="imprimir" onclick="imprimir()" value="Imprimir">
<script type="text/javascript">
    function imprimir(){
        window.print();
    }
</script>
2
  • Você quer div para cima? não saia inserindo por baixo é isso?
    – KingRider
    Commented 23/06/2016 às 12:32
  • @KingRider Ao clicar no botão imprimir, é possível notar que a ultima pagina esta em branco. Gostaria de remove-la. Acredito que seja por alguma gafe no loop. Editei a questão para melhor compreensão. Obrigado ! Commented 23/06/2016 às 12:49

3 Respostas 3

0

Basta usar o seletor :first-child do css. Veja o exemplo abaixo:

.minha_div{
   background-color:red;
   color:white;
   display:block;
   margin-top:5px;
   padding:2px;
   text-align:center;
}

.minha_div:first-child{
   background-color:blue;
}
<div class="minha_div">
   <b>DIV 1</b>
</div>
<div class="minha_div">
   <b>DIV 2</b>
 </div>
<div class="minha_div">
   <b>DIV 3</b>
 </div>
<div class="minha_div">
   <b>DIV 4</b>
</div>

0

Bom, se já esta no loop, basta verificar qual é a primeira posição com um IF:

<?php for($i=1;$i<=5;$i++): ?>

  <?php if($i == 1): ?>
    // Faz o que precisa na primeira posição
    <div class="papel" id="papel" style="margin-top:calc(105mm * <?php echo $i?>)!important;">
    </div>
  <?php endif; ?>

    // Demais posições
    <div class="papel" id="papel" style="margin-top:calc(105mm * <?php echo $i?>)!important;">
    </div>
<?php endfor; ?>

Não alterei a div pois não sei o que quer fazer nelas, mas basta montar as divs e deixar neste formato o loop.

Espero que ajude, qualquer dúvida pergunte.

Att;

3
  • Obrigado pelo apoio ! Consegui realizar o que queria, alterei o codigo para melhor compreensão... Seria possivel tirar esses espaços brancos antes da impressão? Pois na impressão eles não aparecem =s Commented 23/06/2016 às 13:17
  • Espaço em branco? Commented 23/06/2016 às 13:26
  • Caso a tenha respondido sua pergunta marque como resposta Commented 23/06/2016 às 14:06
0

Se o primeiro elemento não tiver problema com margin-top igual a 0 (zero), inicie o incrementador $i com ele:

<?php for($i=0; $i<=5; $i++): ?>
    <div class="papel" id="papel" style="margin-top:calc(105mm * <?php echo $i?>)!important;">
    </div>
<?php endfor; ?>

Dica: Ao utilizar blocos estruturais com PHP mesclado ao HTML, há uma sintaxe alternativa, como usado acima no for, que facilita a leitura do código.

2
  • não entendi, você abriu um bloco for e fechou com foreach? Commented 23/06/2016 às 13:32
  • Editei e corrigi para endfor. Commented 23/06/2016 às 13:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .