Footer in fondo allo schermo

andale73

Nuovo Utente
20 Dic 2006
2
0
0
Ciao a tutti... seguo da anni questo sito, ma non ho mai scritto...

Ora sono alle prese con un problema comune, ma di cui ancora ne io ne molti altri hanno trovato la soluzione :incazz: .

Layout molto semplice: area centrale fissa (nel mio caso 920px) ai lati due sfumature che occupano lo spazio restante tra l'area centrale e i margini dello schermo. Semplice no ?

Header dentro l'area centrale, contenuti, footer... e qui iniziano i problemi.

Ho provato in 3 modi: layer, tabelle e tabelle in quirks mode...

Manco a dirlo, l'unico modo per ottenere il risultato voluto (o quasi) è il terzo che mi fa veramente schifo :skull: !!

In quirks mode se l'area centrale la faccio con una tabella con due celle e la seconda la metto con align bottom il footer mi si piazza in fondo allo schermo e l'area centrale resta bianca con le due colonne ai lati... ed è quello che vorrei. Se i contenuti crescono il footer scende sotto al margine dello schermo... ed è quello che vorrei.
Il problema è che non vorrei il quirks mode, vorrei una pagina ben fatta xhtml e soprattutto in quirks mode ie6 interpreta il box-model in un modo e ff in un'altro, quindi l'header che è fatto comunque a layer si sfascia.
Dichiarando il DTD anche la soluzione con le tabelle non va bene perchè se i contenuti sono più corti dell'area dello schermo, il footer si piazza sotto a questi e soprattutto le due colonne laterali finiscono con il footer lasciando un rettangolo bianco (o del background del body) sotto di lui (na schifezza insomma...:pernacchi )
Facendo tutto a layer sono giunto alla stessa situazione, ma non con il footer ai piedi dello schermo in caso di contenuti brevi, ed al suo posto quando i contenuti crescono...

Esiste una soluzione ? Domani al limite posto dei link con gli esempi di quanto detto.

Un saluto a tutto il forum
 

dead

Utente Attivo
22 Lug 2005
684
0
0
54
Brescia
www.dead.it
Personalmente quello che vuoi fare tu, a me non è mai riuscito (a meno che non usi un body con altezza fissa).
E' anche vero che non ci ho mai provato molto attentamente.

Dal punto di vista del puro xHTML, non mi stupirebbe se la cosa non fosse possibile, perchè bisogna tenere presente che il documento e lo schermo sono due entità completamente slegate. La cosa è più evidente quando pensi ad un documento molto lungo: lo schermo finisce, il documento "continua" sotto...

IExplorer in effetti lega almeno in parte documento e schermo, infatti se imposti la body height al 100% il body occupa tutto lo schermo.
La cosa però è mal pensata, perchè se metti nel body molto testo, il body si allunga più del 100% dello schermo, trasgredendo così la direttiva height :confused:

Secondo me l'unica maniera è usare il javascript:
prima del load del body devi leggere l'altezza dello schermo (la funzione è diversa per FF o IE), poi cambi la posizione del footer al volo con un comando del tipo:
getElementById("footer").style.top = "nnnpx"
dove nnn è un valore che devi calcolarti leggendo le proprietà height degli altri elementi della pagina.

Forse c'è un modo più semplice (tabelle escluse) ma non mi viene in mente.

P.S. per il problema dei "buchi bianchi" nel background cerca con google "tecnica delle false colonne"
 
Ultima modifica:

andale73

Nuovo Utente
20 Dic 2006
2
0
0
Personalmente quello che vuoi fare tu, a me non è mai riuscito (a meno che non usi un body con altezza fissa).
E' anche vero che non ci ho mai provato molto attentamente.

Dal punto di vista del puro xHTML, non mi stupirebbe se la cosa non fosse possibile, perchè bisogna tenere presente che il documento e lo schermo sono due entità completamente slegate. La cosa è più evidente quando pensi ad un documento molto lungo: lo schermo finisce, il documento "continua" sotto...

Guarda... un html 4.01 transitional a me andrebbe benissimo lo stesso. So già che il sito andrà visto su un pc normalissimo... questa corsa ai 1000 dispositivi mi sembra eccessiva, soprattutto per i notevoli sforzi mai ripagati che richiede...

IExplorer in effetti lega almeno in parte documento e schermo, infatti se imposti la body height al 100% il body occupa tutto lo schermo.
La cosa però è mal pensata, perchè se metti nel body molto testo, il body si allunga più del 100% dello schermo, trasgredendo così la direttiva height :confused:

E andrebbe benissimo... è proprio quello che voglio !! il footer in fondo schermo se non ci sono contenuti presenti e al suo posto (ovvero in fondo al documento) se i contenuti sono lunghi...
Con il body height a 100% IE fa così.. FF no, e rimette il footer sotto all'header (sto provando con una pagina con il corpo vuoto)...

Ancora non ho messo niente online... sto lavorando in locale, presto metto esempi, comunque hai capito perfettamente cosa intendo fare..

Grazie x l'aiuto
 
Discussioni simili
Autore Titolo Forum Risposte Data
I [HTML] Footer a fondo pagina HTML e CSS 11
G Mettere il footer in basso HTML e CSS 0
G Problema footer HTML e CSS 1
ANDREA20 [HTML] problemi con il footer HTML e CSS 1
Andrea1981 [WordPress] [HTML] Help modifica credits nel footer.Tema Customizr. WordPress 5
S [WordPress] Footer php - il background riempie tutta la pagina - help WordPress 1
A [HTML+CSS] footer che si aggiorna da un file esterno HTML e CSS 22
giuseppe_123 [WordPress] Problema inserimento widget nel footer WordPress 0
A Footer a 6 colonne equistanziato e centrato HTML e CSS 1
L Footer PHP 1
L Footer HTML e CSS 12
G [VENDO] Banner 468x60 Zona Bassa Footer - advhits.com (3000 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
J Inserimento di un header, nav, footer php PHP 0
A Meglio singolo backlink in Home o banner sul footer (quindi su tutte le pagine?) SEO e Posizionamento 2
P Problemi con il footer e css HTML e CSS 3
P Anno nel tag footer PHP 17
U distribuire elementi verticalmente tra header e footer HTML e CSS 7
P Modificare il footer di un sito wordpress CMS (Content Management System) 3
P Footer con bordi arrotondati HTML e CSS 8
renoir09 Dati di una tabella su più pagine e con footer PHP 10
S footer e frameset HTML e CSS 5
E Footer HTML e CSS 0
Shyson Far apparire le l'icona Back To Top in fondo jQuery 8
A Strano comportamento dello slash / al fondo dell'URL HTML e CSS 1
Trapano Leggere un file .txt dal fondo PHP 7
F Fissare la barra di navigazione a fondo pagina HTML e CSS 5
P problema: la select della città mi va a fondo pagina invece di stare a fianco PHP 7
K Far scorrere il menu dal fondo al top della pagina HTML e CSS 6
DuneBuggy Inserimento immagine di fondo HTML e CSS 3
orlakio come inserire un frame in fondo alla pagine Webdesign e Grafica 1
Frank10 Problemino con il menu fisso in fondo pagina ed il solito, explorer HTML e CSS 10
voldemort Scrolling a fondo pagina usando jQuery jQuery 1
V Problemi: Alternative ai frames, div immagine sempre in fondo. HTML e CSS 1
grankionzo Messaggio privacy in fondo al sito Leggi, Normative e Fisco 0
P Problema con le immagini con fondo trasparente PHP 1
I inserire immagine di fondo HTML e CSS 9
V link interni a fondo pagina e url rewrite Classic ASP 2
L Musica di fondo problema (loop) Webdesign e Grafica 0
P cambiare colore fondo (sfumato) Flash 3
F pulsante che interrompe la musica di fondo! Flash 8
J keywords a fondo pagina SEO e Posizionamento 9
cerbero effetto trasparenza in fondo PHP 0
L Disattivazione musica di fondo Flash 5
T tabella/banner sempre in fondo alla pagina Javascript 3
T tabella/banner sempre in fondo alla pagina HTML e CSS 8
MarcoGrazia Se non sai se riceverai da GET o da POST, puoi verificarlo e far scegliere allo script. Snippet PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
O Allo scroll cambiare colore di sfondo jQuery 0
A [Javascript] avviare un animazione js allo scroll della pagina Javascript 7
MarcoGrazia [Javascript] Sistema di caricamento dinamico in base allo scrolling Javascript 3

Discussioni simili