Footer fisso senza margini 
Author: Marco B.
Visited 2718,
Followers 1,
Shared 0
Vorrei bloccare il footer in basso a fine pagina sito .Come fare??
Posted on the
... non è già così...?...
... quale è la fine pagina del sito, o cos'è che si indende per ciò...?...
... meglio postare un link con le caratteristiche desiderate...
.
bye, KolAsim
Penso intenda averlo sempre in vista...anche con la pagina lunga...
Author
Per capirci vedasi footer e top header del seguente link: http://www.gianlucaadovasio.it/?splash=1
position:fixed
... quel LINK è in tecnologia Flash, ...un isieme dei miei vecchi esempi che sono anche mie invenzioni esclusive, in uno dei quali c'è anche il codice usato:
http://www.zspace.it/kolasim/miei_files/swzonecom/component_resize_K/Movie-full-browser_CenterCenter_K.html
http://www.zspace.it/kolasim/miei_files/swzonecom/component_resize_K/slider_componenteKSM3esternoCentrato.html
http://www.zspace.it/kolasim/miei_files/swzonecom/component_resize_K/ridimensionaSondoListener_K_1.html
http://www.zspace.it/kolasim/miei_files/provevarie/varie/es_stage_9e.html
...
... attualmente si potrebbero ottenere e trovare simili aspetti anche con jQuery, cercando nel WEB la risorsa pappapronta, se ci fosse, per poi cercare di implementarla nel proprio sito...
...
... oppure rimediare semplicemente come detto da silver...
.
bye, KolAsim
Author
Ho provato con - #imFooter { position: fixed ;clear: both; height: 25px; background-color: #C0C0C0; } ma semplicemente scompare.
... ma il footer come fa ad essere fisso...?
... fisso andrebbe bene per HEADER...
... in che punto della pagina si deve fermare...?
... se in basso alla finestra, prova con:
#imFooter { position:absolute; bottom:0px;}
... dico, "prova" perchè sono senza PC e programmi...
.
bye
Author
non va!! stesso precedente risultato....
... ma il codice dove lo inserisci e come...?
Author
cartella res template css.
... per fare un Test veloce, da provare in "Prova" con la v.8 ...il mio codice mettilo così com'è in un oggetto Codice HTML nel pannello HTML, avvia la "Prova" e vedi cosa succede...
... parlo a memoria, ma dovrebbe funzionare, ...poi fammi sapere...
.
Author
creato pagina con oggetto html e nella scheda css inserito #imFooter { position:absolute; bottom:0px;} ma ottengo stesso risultato il footer scompare
... non ho il catorcio sotto mano, (PII-350:Win98me zoppicante), altrimenti avrei provato con la vecchia v.7 (non la Guzzi)! ...che avvio al sabato/domenica...
... mi sembra comunque strano...
... intanto prova anche così:
body #imFooter { position:absolute; bottom:0px;}
.
bye
Se si dichiara la larghezza del sito dovrebbe fungere.
Per tutto il sito, incollare in Impostazioni Generali - Esperto - Codice personalizzato per la sezione HEAD:
<style type="text/css">
body #imFooter {position: fixed; bottom: 0; width: 988px;}
</style>
In grassetto da personalizzare (sperando che Answers non poti il codice).
In IE6 (se esiste ancora) non fungerà.
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Ho provato, riscontrando due inconvenienti:
Per il primo ho tentato con margin: auto, ma non ha funzionato
Per il secondo basta inserire uno z-index con valore alto
Questo è quello che ho provato io
body #imFooter {position: fixed; bottom: 0px; margin: auto; width: 960px; z-index: 15000;}
http://www.unofficialwsx5.com
Correzione del mio precedente post.
Ho provato, riscontrando due inconvenienti:
Per il primo ho tentato con margin: auto, ma non ha funzionato.
Per il secondo basta inserire uno z-index con valore alto.
Questo è quello che ho provato io
body #imFooter {position: fixed; bottom: 0px; margin: auto; width: 960px; z-index: 15000;}
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Nel profilo dell'autore del post vedo solo la versione 8, il CSS è per la 8.
Ho ritrovato un vecchio esempio (solo nella home è stato inserito il CSS):
http://lemonsong.altervista.org/test_fixed/
Se c'ha anche la 9, ora ha il CSS pure per quella
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Mi era sfuggito. Ovviamente non poteva sfuggire a te.
Se c'ha anche la 9, ora ha il CSS pure per quella
No, perché bisogna prima risolvere il problema dell'allineamento a sinistra.
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Prova ad "adattare" quest'altro test "fresco" per la versione 8 a menu verticale (c'è un commento condizionale per IE7):
http://lemonsong.altervista.org/test_fixed-v/
il valore di margin-left è la metà della larghezza del sito.
E' un accrocchio ma potrebbe fungere pure sulla 9
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Questa stringa funziona.
body #imFooter {position: fixed; bottom: 0px; left: 50%; margin-left: -480px; width: 960px; z-index: 2;}
Però, purtroppo per me, non sono riuscito a comprenderne il funzionamento: come interagiscono i parametri left e margin-left?
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Come ho già scritto è un accrocchio
, sicuramente ci sono/saranno altre vie più pratiche.
E' un "metodo" per centrare elementi in base alla risoluzione; si può adoperare per "correggere/forzare" i "paletti" di WS.
Ti linko un paio di topic così evito di dire cavolate
http://forum.html.it/forum/showthread.php?threadid=1298018 (risposta di Gufo)
http://forum.html.it/forum/showthread.php?threadid=1379881
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Grazie! La spiegazione di Gufo è chiara e convincente. Fra l'altro non sono del tutto d'accordo che sia un accrocchio: mi sembra matematico.
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Prego!
OK, allora diciamo: un accrocchio che sa contare?
Mi sono ricordato che anche Snake (ciao serpentello) ha qualcosa nella sua banca:
http://www.ilcacciatoredinuvole.it/w8_menu_css/centro_monitor.html
Quella pagina dovrebbe essere centrata anche in verticale, chi ha tanti pollici può verificare.
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Author
CMQ ho inserito il codice di lemonsong <style type="text/css">
body #imFooter {position: fixed; bottom: 0; width: 988px;}
</style> e mi funziona perfettamente....
funzioana perfettamente inserendolo nel passo 1 codice personalizato per la sezione head
<style type="text/css"> body #imFooter {position: fixed; bottom: 0px; margin-centre: -480px; width:1500px; z-index: 2;} </style>
ma se volessi bloccare invece del footer la head?
provato ad inserire
<style type="text/css"> body #imHeader {position: fixed; top: 0px; left: 50%; margin-left: -480px; width: 960px;; z-index: 2} </style>
ma le scritte ed il menu vanno sopra la header nonostante sia fissata
Forse ti conviene aprire un nuovo post.
Comunque, se ho capito bene, puoi provare ad aumentare il valore z-index
Non so se può essere ancora valido/utile ma ti linko lo stesso questo vecchio esempio per la 7:
http://lemonsong.altervista.org/test_wsx5evo/pagina_7.html (non considerare la parte riguardante i css custom)
Chi può testare/adattare con/per la 9 ti potrà essere d'aiuto.
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Si aumentando il valore della z-index portato da 2 a 10 le scritte vanno sotto la header ma il menu purtroppo gli scivola sopra, provato anche a spostare il menu sopra la header me il problema sussiste come immagine in allegato.
provato anche a d inserire
#imMenuMain {position: fixed; top: 120px; width: 786px; z-index: 2; }
ma nulla
Grazie
Non so se risolve il tuo problema, comunque qui viene descritto come bloccare le varie sezioni del sito
http://www.essedi.altervista.org/menufisso/
imMenuMain non esiste nella v9,
il menu è imMnMn che ha uno z-index di 10000, se vuoi che scivoli sotto all'header devi darre a questo uno z-index di almeno 10001
ok grazie tante ho bloccato il menu, la head e il footer con il seguente codice a chi potesse servire
<style type="text/css">
body #imHeader {position: fixed; top: 0px; left: 50%; margin-left: -480px; width: 960px;; z-index: 5}
body #imFooter {position: fixed; bottom: 0px; left: 50%; margin-left: -480px; width: 960px; z-index: 2;}
#imMnMn {position: fixed; top: 0px; left: 50%; margin-left: -480px; width: 960px;; z-index: 10001; }
</style>
Sorry vi era un piccolo errore
<style type="text/css">
body #imHeader {position: fixed; top: 0px; left: 50%; margin-left: -480px; width: 960px;; z-index: 5}
body #imFooter {position: fixed; bottom: 0px; left: 50%; margin-left: -480px; width: 960px; z-index: 2;}
#imMnMn {position: fixed; top: 0px; left: 50%; margin-left: -480px; width: 960px; centre:auto; z-index: 10001; }
</style>
lo z-index:10001 va applicato a imHeader nel caso, come mi sembrava chiedevi, si volesse che il menu scivolasse sotto l'intestazione durante lo scroll
applicato a imMnMn è inutile
Per mia curiosità, potresti indicarci un sito in cui il tuo sistema funziona?
ho messo nel passo 1
<style type="text/css">
#imHeader {position: fixed; top: 30px; width: 960px; height:160px; z-index: 50;}
#imMnMn{position:fixed; top: 0px; left:auto;}
#imContent {padding-top: 190px; padding-bottom: 120px;}
#imFooter {position: fixed; bottom: 0px; left:50%; margin-left: -480px; z-index: 50;}
</style>
risultato perfetto bloccato head footer e menù
come da allegato
Scusami Esse ma è solo un progetto test senza sito
Era solo perché il tuo codice non poteva funzionare. Ora vedo che hai adottato il mio: capirai che non ho più bisogno di un sito di conferma.