xhtml CSS Fixed Header Footer Print Layout

Nota per i naviganti:
se sei arrivato fin qui tramite Google, cercando come sia possibile creare con un CSS ad hoc un header o un footer fisso (fixed) cross-browser (possibilmente), forse troverai molto utile questi link (presi da qui)
Fixed header
Fixed header and left-sidebar
Fixed header and right-sidebar
Fixed header and footer
Fixed left-sidebar
Fixed left-sidebar and header
Fixed left-sidebar and right-sidebar
Fixed left-sidebar and footer
Fixed right-sidebar
Fixed right-sidebar and header
Fixed right-sidebar and footer
Fixed footer
Se invece ti serve un header/footer fisso per il layout di stampa, continua la lettura qui sotto ↓

Partiamo da un presupposto: se stai cercando di preparare il layout di un sito con un foglio di stile CSS apposito per la stampa e vuoi che su ogni pagina stampata ci siano un'intestazione e un pie' pagina fisso indipendentemente dalla lunghezza del contenuto/numero di pagine, o hai una necessità impellente, o sei fuori strada :D

se puoi evitarlo, imho, è meglio evitare

se proprio, come me, devi farlo allora forse hai trovato la soluzione che fa per te

premessa: in attesa di avere un buon supporto CSS3 sui più comuni browser, questa soluzione non è perfetta, ha qualche sbavatura, ma in compenso è "quasi" cross-browser, o almeno con IE6 e FF da risultati apprezzabili, pur rimanendo un workaround

Cronistoria: dopo aver passato un paio d'ore a cercare una soluzione, mi imbatto in una cosa che non è pensata per quello che devo fare io... ma con un po' di colla e delle forbici dalla punta arrotondata si può adattare alle mie esigenze (:P)

Il punto di partenza è questo link:
http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

una tabella con header e footer "fisso", ma con contenuto scrollabile;
la particolarità che a noi interessa è che stampando la tabella, l'header e il footer vengono riportati su ogni pagina che la print preview ci propone

questo grazie al particolare CSS ad hoc (style type="text/css" media="print") che mantiene fissi Header e Footer
non entro nel merito dell'analisi di tutto il codice, perché non sono un esperto e non riuscirei a spiegare tutto :)

in breve: sostituiamo la tabella del link con una tabella a singola cella, nella quale inseriamo il contenuto (anche dinamico) della nostra pagina

fatto ;) - enjoy

note:
su IE, prima della stampa, non bisogna scrollare o l'header si posiziona in mezzo alla pagina
su FF il footer non viene sempre visualizzato correttamente... magari giochicchiando con un po' padding e margin si aggiusta ;)

una pagina d'esempio la trovate su adlabor.it

un po' di maccheronico inglese gli sventurati forastieri di questo lido

In English

How to make a fixed Header/Footer Layout for printing?
You've only to get this example code

Visualizza il codice dell'esempio - View Example Code

<html>
<head>

<title>Scrollable Table with Fixed Header, repeat print header and footer</title>

<meta name="keywords" content="fixed table header; non-scroll header; fixed
footer; freeze header; CSS tips; print repeating headers; print repeating
footers">

<link rel="stylesheet" href="basic.css" type="text/css">

<style type="text/css">

div.tableContainer {
width: auto; /* table width will be 99% of this*/
/*height: 295px; /* must be greater than tbody*/
overflow: auto;
margin: 0px;
}

table {
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #FFFFFF;
}

table>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
/*height: 250px;*/
overflow-x: hidden;
background-color: #FFFFFF;
}

thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
background-color: #FFFFFF;
}

thead td, thead th {
text-align: center;
border-bottom: 1px solid #999999;
background-color: #FFFFFF;
}

td {
text-align: justify;
background-color: #FFFFFF;
}

tfoot td {
text-align: center;
border-top: 1px solid #999999;
background-color: #FFFFFF;
}

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

</style>


<style type="text/css" media="print">

div.tableContainer {overflow: visible; }
table>tbody {overflow: visible; }
td { } /*adds control for test purposes*/
thead td { }
tfoot td {
text-align: center;
border-top: 1px solid #999999;
}

thead {display: table-header-group; }
tfoot {display: table-footer-group; }
thead th, thead td {position: static; }

</style>

</head>

5 commenti:

sprilus ha detto...: veramente non credevo di riuscirci... provavo col position:fixed; ma andava a sovrapporsi nella seconda pagina..
meraviglioso grazie per la dritta
per l'autore di questo post proporrei un "santo subito!!!!"; 11 dicembre, 2008 18:22
Congetturando² ™ ha detto...: mi fa piacere che ti sia stato utile :); 11 dicembre, 2008 20:39
Anonimo ha detto...: Questo commento è stato eliminato da un amministratore del blog.; 05 febbraio, 2010 04:30
Mara ha detto...: Noooo, era proprio quello che cercavo!Ma non mi fa aprire il link :(
Mara; 07 luglio, 2011 09:59
Congetturando² ™ ha detto...: Ciao, la pagina ora non è disponibile, ma trovi il codice di esempio premendo il link blu "Visualizza codice"

;); 07 luglio, 2011 10:12

Posta un commento

Congetturando ² ™ - Bacheca

giovedì 28 dicembre 2006

xhtml CSS Fixed Header Footer Print Layout

5 commenti: