DIV's Loop in PHP

0

I am generating a loop of a fixed-size div and would like each one to be on a page at the time of printing. But the first Div of the Loop gets a margem-top preventing this from happening! Is there any way to make this first div be the first of the others in this margin question? Follow Code for better understanding Thank you :)

<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>
    
asked by anonymous 23.06.2016 / 14:27

3 answers

0

Just use the% css selector of css. See the example below:

.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>
    
23.06.2016 / 15:27
0

Well, if it's already in loop , just check which is the first position with a 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; ?>

I did not change the div because I do not know what to do in them, but just mount divs and leave loop in this format.

Hope it helps, any questions please.

Att;

    
23.06.2016 / 14:35
0

If the first element has no problem with margin-top equal to 0 (zero) , start the $i enhancer with it:

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

Tip: When you use structural blocks with PHP merged to HTML , there is a syntax alternative as used above in for , which makes it easier to read the code.

    
23.06.2016 / 14:47