Footer sempre in fondo alla finestra del browser 
Autore: Alex D.
Visite 2841,
Followers 1,
Condiviso 0
Salve a tutti,
vorrei sapere se è possibile con x5 (versione 9) creare un sito che abbia il footer visualizzato sempre in fondo alla finestra del browser.
Dalle prove che ho fatto, al passo 1 creo un footer con img di sfondo e testo (ad esempio) ma questo verrà sempre "agganciato" all'ultimo elemento della pagina. Io invece vorrei che fosse fissato sempre al fondo di ogni finestra di qualunque browser su pc con qualunque risoluzione.
Nell'immagine di esempio, ho messo uno scheletro di sito a destra e a sinistra di come si dovrebbe sempre vedere il footer, anche se si usano schermi grandi e molto risoluti.
Spero di essermi fatto capire...
Postato il
Prova con questo al passo 1 in Head:
<style type="text/css">
body #imFooter {position: fixed; bottom: 0px; left: 50%; margin-left: -480px;
width: 960px; z-index: 2;}
</style>
@Alex
Vedo che utilizzi la versione 9.
Potrebbe tornarti utile dare una occhiata qui
http://www.essedi.altervista.org/menufisso/index.html
Autore
ok grazie a Mirko e EsseDi, ho provato i vostri metodi ma non ottengo l'effetto che vorrei, perchè il footer diventa fisso e il corpo del sito gli scorre dietro.
Io invece vorrei ottenere un effetto diverso, cioè immaginiamo di avere un sito con le seguenti altezze:
- intestazione: 300 px
- body (contenuto testo/immagini): 600 px
- footer: 100 px
Ora, se vedo questo sito con un piccolo monitor 15" che col browser visualizza a pieno schermo circa 600px del mio sito, giustamente compare la scrollbar a destra e io vedrò alla fine del body il mio footer correttamente "agganciato" sul fondo della finestra del browser. Tutto questo per me è ok.
Però, se cambio monitor e vedo il sito su display 22" con alta risoluzione che col browser visualizza a pieno schermo (ad esempio) 1400 px, allora il sito lo vedrò completo senza scrollbar ma sempre col footer agganciato alla fine del body, e nei 400px restanti sotto vedrò lo sfondo del sito. Io inceve vorrei in questo caso vedere a pieno schermo: Intestazione - body - sfondo (nello spazio libero da testi/immagini) - e infine agganciato al fondo della finestra il footer, il tutto quindi in questo esempio senza scrollbar ovviamente.
Autore
Ciao Esse Di, so che non centra con questo post ma volevo chiederti una cosa riguardo il tuo menu:
http://www.essedi.altervista.org/_menuH/index.html
Ho creato un menu partendo dal tuo ma con le voci del menu principale (quelle in <li>) che vanno a capo (ad es: Home <br> Page, ecc...). Ora, volevo "centrare" le voci menu e ridurre l'interlinea, per cui ho messo questo codice nel file sdMenuH.css:
/* testo link normale */
.sdMnMn > div > li > a {
font-family: "Lucida Sans", Arial, sans-serif;
font-size: 14px;
text-align: center;
line-height: 12px;
color: #006633;
}
Ma non funziona! Ho provato a cambiare font, pure la size e il color e ogni volta mi funzionano i cambiamenti, ma text-align e line-height proprio non vanno, come mai?
P.s. ho messo le varie voci del menu in dei div, perciò vedi nel codice .sdMnMn > div > li > a
Scusa la franchezza.
Io ho pubblicato un esempio funzionante, spiegando, spero, nei minimi dettagli codice HTML utilizzato e CSS associati.
Sei ovviamente libero di modificare sia l'uno che l'altro. Ma se poi non funzionano, non credi che dovresti fornire informazioni altrettanto dettagliate?
Autore
Non ti preoccupare, la tua franchezza è giustificata. Purtroppo non sono bravissimo con i css, però mi sto impegnando per migliorare e cerco di documentarmi....
Allora, guarda ho preso il tuo menu e ne ho modifcato con successo delle cose, nello specifico:
/* testo link normale */
.sdMnMn > div > li > a {
font-family: "Lucida Sans", Arial, sans-serif;
font-size: 14px;
text-align: center;
line-height: 12px;
color: #006633;
}
con questi codici ho cambiato con successo il font, la size e il color delle "ancore" all'interno del tag <li>, qualsiasi valori inserisco vedo i cambiamenti, ora mi chiedevo perchè non funzionano text-align e line-height che ho usato allo stesso modo in cui ho visto fare sul web su siti tipo html.it (come si vede dal codice postato, la sintassi dovrebbe essere corretta).
Scusami se non sono stato chiaro, spero di esserlo stato ora!
Autore
Allora, per quanto riguarda il testo centrato ho risolto mettendo il text-align all'interno del singolo elemento in questo modo:
.sdMnMn > li[id="sdMn1"] {
text-align: center; /* testo centrato */
}
Per il footer, sto girando tutto il web e mi sto rendendo conto che forse non si può ottenere l'effetto che desidero, a meno di non bloccare intestazione e footer e fare in modo che nel body ci siano sempre tutti i contenuti del sito e nel caso le slidebar dovrebbero comparire solo nel body, ma non credo sia fattibile...
Grazie a tutti x il supporto (e a Esse Di x la pazienza...)
Se ho capito bene, prova a leggere questo topic:
http://www.unofficialwsx5.com/index.php?topic=339.0
Vedi se il codice funziona ancora, visto che risale ad un paio di anni fa e da allora, la libreria jQuery (della 9) potrebbe essere stata aggiornata.
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
... x Alex, ...segui
, ...magari è quello che cerchi...
... per me la soluzine più a portata di mano e logica sarebbe quella indicata da Mirko/EsseDi, ...disponendo in fondo alla pagina un oggetto qualsiasi alto quanto il FOOTER, e sempre per me basterebbe semplicemenrte e solo questo:
<style>#imFooter {position: fixed; bottom: 0px;}</style>
... ma forse non ho capito il contesto della richiesta...
, ed allora non ci far caso...
.
ciao
Autore
Ok grazie proverò a seguire quel post!
Anche se più passa il tempo e più mi convinco che in effetti ciò che hanno postato EsseDi e Mirko in effetti rappresenta la soluzione migliore e più "pulita".... farò delle prove, vedremo!!
Basta che ti decidi...
_______ oltre il 5° step ________
http://www.unofficialwsx5.com