Loop of DIV’s in PHP

Question

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

<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>

Answer 1

Just use the selector :first-child 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>

Answer 2

Well, if you’re already on 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 didn’t change the div 'Cause I don’t know what you want to do with them, but just ride the divs and leave in this format the loop.

I hope it helps, any questions ask.

Att;

Answer 3

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

<?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 using structural blocks with PHP mixed with HTML, there’s a alternative syntax, as used above in for, which facilitates the reading of the code.