PDA

View Full Version : [HTML] creazione piè di pagina nelle pagine

BeLakor
23-09-2010, 21:12
Ciao,
avrei la necessità di creare un piè di pagina nel mio documento .html.
Ovviamente il footer deve essere a posizione fissa e si deve ripetere su tutte le pagine in fase di stampa.
Qualcuno ha idee?

Ho provato così:

<html><head><style type="text/css">
p.piede{position:absolute;left:50%;right:50%;bottom:0px;}
</style></head><body>
<p class=piede>sono un pie di pagina</p>
</body></html>

Ma niente da fare....nemmeno sull'ultima pagina si posiziona correttamente a fondo pagina....Figurarsi se si ripete su tutte in fase di stampa :D

BeLakor
Antares88
23-09-2010, 22:37
Dovresti essere un pò più preciso su come è realizzata la struttura del sito.
Hai usato php, asp, ajax ? oppure è html pulito ?

Hai un'intelaiatura all'interno della quale vengono caricate le pagine tramite un sistema di navigazione ? se si, come funziona ? è via GET (index.php?page=galleria), via ajax via cosa?

Ipotizzando che tu abbia una pagina php che contiene lo scheletro del sito e carica i contenuti dinamicamente, è all'interno di questa pagina che in fondo dovresti caricare il footer (pié di pagina) tramite include.
BeLakor
24-09-2010, 08:40
Hai fatto tutto tu :D
Io ho chiaramente parlato di documento .html.
Non esiste sito nè altro.
Il prossimo... :p

BeLakor
Antares88
24-09-2010, 10:52
Hai fatto tutto tu :D
Io ho chiaramente parlato di documento .html.
Non esiste sito nè altro.
Il prossimo... :p

BeLakor

E allora ti fai un div contenente quello che deve stare a fondo pagina e lo copi in tutte le pagine del sito. Non è che sia proprio il massimo, se poi vuoi cambiare qualcosa devi cambiare tutte le pagine del sito.

Cmq codice di esempio della tua pagina html:


<html>
<head>
<!-- contenuto dell'head -->
</head>
<body>
<!-- contenuto del body -->
<div class="footer">
<!-- contenuto del footer -->
</div>
</body>
</html>
BeLakor
24-09-2010, 12:48
Con il <div> o con <p> il risultato non cambia.
Il mio documento .html è generato da Java riga per riga partendo da un template di base.
Non posso sapere quante pagina in stampa poi usciranno e anche se lo sapessi, basta che l'utente cambia il formato pagina di stampa da orizzontale a verticale ed ho perso il mio footer :)
Altre soluzioni?

BeLakor
Antares88
24-09-2010, 13:41
dato che stai generando la pagina in modo dinamico (è quello che ti chiedevo sopra, anche php genera codice html) il problema non è includere il div in tutte le pagine (che per altro semanticamente è cosa più corretta rispetto a usare un paragraph).
Il problema come dici tu è fare in modo che sia presente sulla stampa indipendentemente dall'orientamento del foglio utilizzato. Onestamente non so come puoi fare, magari sfruttando un css apposito per la stampa e trovando un modo di posizionare il div dinamicamente (javascript?)
BeLakor
24-09-2010, 16:24
dato che stai generando la pagina in modo dinamico (è quello che ti chiedevo sopra, anche php genera codice html) il problema non è includere il div in tutte le pagine (che per altro semanticamente è cosa più corretta rispetto a usare un paragraph).
Il problema come dici tu è fare in modo che sia presente sulla stampa indipendentemente dall'orientamento del foglio utilizzato. Onestamente non so come puoi fare, magari sfruttando un css apposito per la stampa e trovando un modo di posizionare il div dinamicamente (javascript?)

L'esempio con css è quello che ho postato nel primo esempio.
Javascript non mi viene in aiuto poichè non viene letto da OpenOffice o Word, in caso di salvataggi del file .html con estensione .doc o .odt.
Altre soluzioni?

BeLakor
astorcas
24-09-2010, 17:27
Ti posto un esempio con una struttura basilare che spinge il footer sempre in fondo alla pagina.

Questo è un template della pagina:


<html>
<head>
<link rel="stylesheet" href="file.css"/>
</head>
<body>
<div class="main">
CONTENUTO PRINCIPALE
<div class="spacer"></div>
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>


e questo del file file.css:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .spacer {
height: 4em;
}


il footer in pratica si sovrappone sul div con classe spacer (che per questo motivo va lasciato vuoto), per questo i due div devono avere la stessa altezza (una negativa e l'altra positiva).
Prova e fammi sapere :)
BeLakor
28-09-2010, 18:18
Niente male come soluzione astorcas! ;)
Qualche aggiustatina e dovrebbe fare al caso mio :D

BeLakor