Ciao a tutti,
ho una piccola applicazione intranet i cui gli utenti utilizzano FF e volevo incominciare a gestire il layout di stampa. Fin'ora quando necessitavo di un controllo un po' più fine creavo un pdf tramite http://www.fpdf.org/, ora mi piacerebbe vedere cosa offrono i css.
Per prima cosa mi interessa riuscire a gestire una intestazione e un pié di pagina per ogni pagina stampata. In http://www.w3.org/TR/CSS21/visuren.h...te-positioning ho letto che: "For paged media, boxes with fixed positions are repeated on every page.".
Ora però non riesco a fare in modo che il corpo del mia pagina non si sovrapponga all'intestazione e al pié di pagina nelle pagine uccessive alla prima.
Per capire cosa intendo vi allego un file di esempio di quello che mi piacerebbe ottenere:
Ringrazio anticipatamente chiunque abbia dei consigli da darmi.codice:<html> <head> <title>test di stampa</title> <style type="text/css" media="print"> @page { margin-top: 5cm; margin-bottom: 5cm; margin-left: 1cm; margin-right: 1cm; } .intestazione { position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 5cm; } .corpo { width: auto; height: auto; top: 5cm; left: 0; right: 0; bottom: 5cm; margin-left: 5em; margin-right: 5em; page-break-after: always } .piedipagina { vertical-align: bottom; position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; /*height: 5cm;*/ } </style> </head> <body> <div class="intestazione"> head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head head </div> <div class="corpo"> riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga</p> <table border="1" width="100%"> <tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> </table> 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte </p> </div> <div class="corpo"> riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga riga lunga</p> <table border="1" width="100%"> <tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> <tr><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td><td>values values values</td></tr> </table> 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte 10 righe corte </p> </div> <div class="piedipagina"> tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail tail </div> </body> </html>
Piviul
Rispondi quotando