PDF e componenti affiancati

**fermat** · 17-12-2013, 18:34

ciao!

ho un grosso problema.
devo costruire una pagina in pdf parecchio complessa, con vari componenti innestati, e di cui vari che devono essere affiancati (float!).
ora il problema è che in alcuni casi non so quanti componenti possano comporre una determinata porzione, perchè li prendo da db.
questo un esempio di html:

codice:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Modellario</title>
        <meta charset="utf-8">
        <style type="text/css">
            html, body { margin:0; padding: 0; width: 100%; height: 100%; }
            html { margin-top: 30px; }
            .clear { clear: both; }
            .classificazione { width: 793px; margin: 0 auto; }
            .class_head { border-bottom: 1px solid black; height: 56px;width:100%; }
            .head_l { float: left; width: 396px; }
            .head_r { float: right; width: 396px; }
            .art_rows { width:100%; height: 270px; }
            .rows_l { float: left; width: 580px; }
            .rows_r { float: right; width: 173px; }
            .rows_head_l { border: 1px solid black; }
            .rows_head_r { text-align: left; }
            .articolo { float: left; height: 220px; width:120px; }
            .art_dtl { font-size: 10px; padding-left: 5px; }
            .art_col { font-size: 12px; margin: 15px auto 0 auto; border: 1px solid black; width: 85%; padding-left: 5px; }
        </style>
    </head>
    <body>
        <div class="classificazione">
            <div class="class_head">
                <span class="head_l">SEASON: S/S 2014</span>
                <span class="head_r">MAGLIERIA</span>
                <div class="clear"></div>
            </div>
            <div class="art_rows">
                <div class="rows_l">
                    <div class="rows_head_l">C35F375-122</div>
                    <div class="articolo">
                        <img src="../IMMAGINI/modellario_bs/nd.jpg" alt="C3.5.000" height="200" width="100">
                        <div class="art_dtl"><strong>C3.5.000</strong><br/>
                            <span>ABITO TULLE / DRESS</span><br/>
                            <span>38-48</span><br/>
                        </div>
                    </div>
                    <div class="articolo">
                        <img src="../IMMAGINI/modellario_bs/nd.jpg" alt="C3.5.111" height="200" width="100">
                        <div class="art_dtl">
                            <strong>C3.5.111</strong><br/>
                            <span>GIACCA / JACKET</span><br/>
                            <span>38-48</span><br/>
                        </div>
                    </div>
                    <div class="articolo">
                        <img src="../IMMAGINI/modellario_bs/nd.jpg" alt="C3.5.122" height="200" width="100">
                        <div class="art_dtl">
                            <strong>C3.5.122</strong><br/>
                            <span>GIACCA 2 BOTT / JACKET</span><br/>
                            <span>38-48</span><br/>
                        </div>
                    </div>
                    <div class="articolo">
                        <img src="../IMMAGINI/modellario_bs/nd.jpg" alt="C3.5.166" height="200" width="100">
                        <div class="art_dtl">
                            <strong>C3.5.166</strong><br/>
                            <span>PANTALONE 200 / TROUSERS</span><br/>
                            <span>38-48</span><br/>
                        </div>
                    </div>
                    <div class="articolo">
                        <img src="../IMMAGINI/modellario_bs/nd.jpg" alt="C3.5.168" height="200" width="100">
                        <div class="art_dtl">
                            <strong>C3.5.168</strong><br/>
                            <span>PANTALONE / TROUSERS</span><br/>
                            <span>38-48</span><br/>
                        </div>
                    </div>
                    <div class="articolo">
                        <img src="../IMMAGINI/modellario_bs/nd.jpg" alt="C3.5.169" height="200" width="100">
                        <div class="art_dtl">
                            <strong>C3.5.169</strong><br/>
                            <span>PANT.TASCHE / TROUSERS</span><br/>
                            <span>38-48</span><br/>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="rows_r">
                    <div class="rows_head_r">COLORI DISPONIBILI</div>
                    <div class="art_col">
                        <span>136A - MILK</span>
                        <span>136A - MILK</span>
                        <span>136A - MILK</span>
                        <span>136A - MILK</span>
                        <span>136A - MILK</span>
                        <span>136A - MILK</span>
                    </div>
                    <div class="art_col">48C<br/>48PL<br/>4EA<br/></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="art_rows">
                <div class="rows_l">
                    <div class="rows_head_l">C35F683-17</div>
                    <div class="articolo">
                        <img src="../IMMAGINI/modellario_bs/nd.jpg" alt="C3.5.174" height="200" width="100">
                        <div class="art_dtl">
                            <strong>C3.5.174</strong><br/>
                            <span>PANTALONE / TROUSERS</span><br/>
                            <span>38-48</span><br/>
                        </div>
                    </div>
                </div>
                <div class="rows_r">
                    <div class="rows_head_r">COLORI DISPONIBILI</div>
                    <div class="art_col">
                        <span>999A - NERO</span>
                    </div>
                    <div class="art_col">62PL<br/>32VI<br/>6EA<br/></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div style="page-break-before: always;"></div>
    </body>
</html>

il problema più grosso sono i div che contengono le immagini.
con dompdf riesco a mettere in float tutti i componenti superiori, ma quando arriva alle immagini le sovrappone.

ora la mia domanda è: se uno deve costruire una cosa così complessa, come può fare??
possibile che non ci sia una alternativa valida??
datemi un consiglio per favore!!!!

**Alhazred** · 17-12-2013, 19:48

Non sono mica sicuro che il tuo problema sia php.
Hai provato a prendere il codice e farti apparire una pagina html?
Viene visualizzato tutto correttamente?

**fermat** · 17-12-2013, 19:59

ciao!

si si vede bene.
ho anche validato la pagina sul W3C validator, pensando che magari qualche errore html/css poteva dare problemi.
perfetto sia in html che in css.

**fermat** · 18-12-2013, 10:40

ma sennò non esiste una libreria che supporta meglio i float??

perchè anche mpdf supporta i float solo al livello superiore, non anche in componenti esistenti.

**Alhazred** · 18-12-2013, 11:33

Hai provato tcpdf?

**fermat** · 18-12-2013, 12:46

si avevo provato, ma anche non con molto successo.

cmq sto provando un altro modo.
visualizzo la pagina html, e poi da la stampo in pdf.
o con un programma tipo pdfcreator, o direttamente da browser (con plugin in FF, o con la sua funzione nativa in Chrome).
mi sembra esca perfetto!

Discussione: PDF e componenti affiancati

Strumenti discussione

Ricerca discussione

Visualizza

PDF e componenti affiancati

Permessi di invio