giovedì 28 dicembre 2006

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


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

Congetturando² ™ ha detto...

mi fa piacere che ti sia stato utile :)

Anonimo ha detto...
Questo commento è stato eliminato da un amministratore del blog.
Mara ha detto...

Noooo, era proprio quello che cercavo!Ma non mi fa aprire il link :(
Mara

Congetturando² ™ ha detto...

Ciao, la pagina ora non è disponibile, ma trovi il codice di esempio premendo il link blu "Visualizza codice"

;)