Footer con effetto simile alla sticky bar 
Author: Gabriele D.Avrei una domanda per qualche esperto di modifica del codice. Cerco di spiegare:
Mi piacerebbe fare in modo che un "footer" (lo chiamo footer ma potrebbe essere qualcosa di diverso) rimanga sempre visibile e disponibile sul fondo pagina indipendentemente dal fatto che stia eseguendo uno scroll di pagina ed indipendentemente dal fatto che la finestra del browser venga allargata o ristretta. In pratica mi piacerebbe poter disporre di una barra il cui effetto è esattamento quello della Sticky Bar... ossia un elemento il cui contenuto si sovrapponga al body, restando sempre in primo piano, ma che però resti sempre fissa sul fondo pagina!
Il motivo della richiesta è dovuto al fatto che sto cercando di fare un sito tutto basato su monopagine in Full Height, ossia una pagina che si adatta dinamicamente alla finestra del browser e che non mostri nessun tipo di scroll. Questo lo riesco a fare solo ponendo a 0 l'altezza minima di header e footer. La mancanza di un header la risolvo sfruttando la Sticky Bar, ma sul fondo pagina non ho possibilità di porre niente... in quanto se inserisco un footer, questo viene considerato come elemento successivo alla scheda Full Height e quindi mi vincola a dover fare uno scroll per visualizzarne il contenuto.
Spero di essere stato abbastanza chiaro!
Grazie,
Gabriele
... potresti fissare il footer sul fondo della finestra o condizionarlo con codice extra...
... ma! ... io senza link non posso valutare...
... poi mi sembra strana una mono pagina senza scroll, però, tutto è possibile come lo era con SwishMax, ...ammenochè non si tratti di più pagine-mono contenuti collegate...
.
Author
e che codice dovrei usare per fissare il footer a fondo pagina?
...!... tutto è relativo; ...puoi prendere spunto anche da qui: https://helpcenter.websitex5.com/en/post/208449
Author
Si hai ragione che senza link non puoi valutare, ma ho appena iniziato a lavorare su un nuovo progetto... quindi per ora non ho nessun link disponibile.
Il metodo con l'inserimento dello stile #imFooter sembra non funzionare... per lo meno non vedo alcuna differenza tra inserire quella riga o non inserirla.
Guardando un po' su varie fonti... credo che per fare ciò che mi serve dovrei inserire degli elementi HTML in posizione fixed ed usando un adeguato z-index. Diciamo che l'intento sarebbe quello di creare un template simile a questo: https://www.studiomedicodegiovanni.it/
Come vedi è tutto monopagina, con elementi allineati a sinistra e a destra (le frecce di cambio pagina) e sul fondo pagina (altra freccia di cambio pagina ed elementi come le icone social e la cookie privacy) che restano sempre vincolati ai bordi della finestra e su un livello superiore ed indipendente da quello del body ...ma in effetti con ciò che mette a disposizione website la vedo dura!!! :D
Togli il footer dal modello e inserisci i dati del fotter nelle varie pagine e abilita il Full Height in stile righe, poi con le ancore fai in modo di far cambiare le pagine dove vuoi tu.
E' più facile a fare che a spiegare
... penso che un sottile footer fisso non debba dar fastidio più di tanto...
Author
Il problema è che se inserisco un footer tramite il modello di Website, sottile o spesso che sia, non ho più la schermata a monoscheda fissa... ho sempre un obbligato scroll necessario per andare a visualizzare il footer.
Author
Avevo già provata questa strada ma non funziona... non è possibile far in modo che gli elementi rimangono vincolati al fondo pagina.
... non penso, ...ma bisognerebbe vedere qualcosa...
... potrebbe essere un qualcosa di > questo genere...
.
Author
Mi sono espresso male. Inserendo lo stile #imFooter l'effetto è quello di avere effettivamente gli oggetti contenuti nel footer sempre visibili a fondo pagina. Però poi nel layout c'è la presenza di un footer che per forza di cose non fa parte del gruppo di righe che compongono la scheda Full Height... quindi si ha sempre lo scroll verso il basso.
... potrebbe essere un qualcosa di > questo genere...
Si, credo che l'unica soluzione percorribile sia proprio quella di aggiungere lato codice degli elementi extra tipo questo.
... con il codice che ti ho indicato prima nel post #3 ... il footer dovrebbe presentarsi come nel mio ultimo esempio...
... per produrre un link delle prove basta un click; ...o esportando su un dominio gratuito (Altervista...), o in una sottocartella "prove" del tuo sito: www.tuosito.it/prove/ ...
... così almeno si vedrebbe qualcosa di concreto su cui basarsi evitando supposizioni...
.
Author
Ti ringrazio per l'aiuto KolAsim, grazie al tuo semplice esempio e leggendo altre fonti su internet sono riuscito a introdurre elementi che rimangono sempre vincolati ad ogni bordo della finestra del browser (sinistra, destra, alto, basso) e su un livello separato e superiore rispetto al contenuto del body... lo faccio inserendo un oggetto HTML nella pagina desiderata ed introducendo le poche righe di codice necessarie... in pratica quindi posso fare tutti i layout che avevo in mente.
... sì, il classico mio metodo con il DIV_CUSTOM tuttofare...
... purtroppo io non ho il PC per provare, ma penso che anche il FOOTER fissato in basso dovrebbe vere gli stessi effetti del mio esempio, ...ma se non viene postato un semplice esempio, non posso valutare eventuali altri accorgimenti da applicare...
... comunque l'importante è che hai trovato una alternativa...
ciao
.
Author
Ho provato più e più volte, ma per fare quello che serve a me, ossia un layout mono-scheda senza scroll, ti assicuro che non funziona! Cioè... come avevo già scritto, inserendo il codice #imFooter { position:fixed; bottom:0px; } è vero che tutti gli elementi inseriti nel footer vengono posizionati sempre visibili sul fondo pagina... ma tuttavia continua ad essere presente anche il "vero" footer (definito nella Struttura del Modello con una sua altezza minima) che è indipendente dalla scheda Full Height... e di conseguenza si è vincolati ad avere uno scroll che ti porta a visualizzarlo.
... forse sfuggirà qualcosa; ...per togliere i dubbi se vuoi puoi fare questa prova...
...prendi uno spazio WEB free, per esempio su Altervista, come per esempio ha fatto ieri Mirko per postare > questo esempio in supporto a questo Topic...ed esporta un esempio semplificato con le caratteristiche necessarie allo scopo...
... oppure puoi esportare direttamente in una sotto cartella per le prove del tuo sito...
... quanto detto è importante e da fare sempre per le prove reali dei propri esperimenti, e/o valutare l'evolversi del sito prima di pubblicarlo ufficialmente...
... se potevo farlo io forse avrei potuto darti la soluzione già tre giorni fa...
.
Author
Ecco il test che volevi: http://www.gabrieledanesi.com/paginatest/
Ho inserito prima della chiusura di HEAD le righe:
<style>
#imFooter { position:fixed; bottom:0px; }
</style>
Come vedi il comportamento coincide con quanto ho scritto sopra.
Author
Ed inoltre si perde anche l'allineamento centrato degli oggetti presenti nel footer.
...così per test...
...e senza codici extra, solo con le funzionalità del programma, certo un po' da perfezionare
ma tenendo conto che avrò impiegato circa 15 minuti in tutto...
(niente footer, solo oggetti copiati nell'ultima riga... , ovviamente ha senso per siti di poche pagine, fatto come l'ho fatto io...)
http://pcuty.altervista.org/FPEX/
oppure:
http://pcuty.altervista.org/FPEX/tipo2.html
Author
Grazie per la prova Claudio,
avevo provato anch'io a seguire questa strada... ma purtroppo come avrai notato anche dal tuo test, gli oggetti inseriti in ultima riga non andranno mai a rimanere vincolati sul fondo pagina. Mentre per quelli laterali è possibile vincolarli spuntando la funzione di estendere la riga a tutta la finestra, ma anche così facendo vai a togliere contenuto al body perchè quelle righe faranno comunque parte del contenuto principale del body!
Più tardi ti faccio vedere come ho risolto io.
... relativamente al tuo esempio, ...in teoria, e salvo imprevisti, ...dovrebbe funzionare questo mio codice che avevo usato per le mie pagine elastiche; ...provalo:
<style>
#imPageIntContainer { position:fixed;width:100%;height:100%;}
#imFooter { position:fixed; bottom:0px; }
</style>
.
Author
Allora così viene risolto il problema dello scroll sul footer e la pagina resta effettivamente fissa... però rimane il problema che gli elementi del footer si allineano a sinistra anzichè essere centrati.
Author
Ho fatto l'upload con il nuovo codice che mi hai suggerito: http://www.gabrieledanesi.com/paginatest/
... se si usa codice extra, poi si crea una catena da saper controllare a seconda dei casi e degli oggetti coinvolti...
#imFooter { position:fixed; bottom:0px; width:100% !important; }
... provalo...
.
... grazie anche a Claudio per il suo esempio, ...ove in tipo2 invece del footer andrebbero controllati gli oggetti in fondo, #imCell_3 , #imCell_4... se ho visto bene...
.
ciao
.
Author
Così funziona molto bene! http://www.gabrieledanesi.com/paginatest/
Questa cosa mi permette di introdurre anche elementi in più rispetto a ciò che sarei riuscito a fare... grazie infinite per la tua pazienza e disponibilità!!!
Voglio mettere anche una pagina di test sulle modifiche che avevo introdotto ieri tramite l'oggetto HTML. Ecco il link: http://www.gabrieledanesi.com/paginatest2/
Che ne pensi? Essendo poco esperto... il codice che ho introdotto è corretto o potrebbe dare qualche problema su alcuni browser?
... sì, ...il codice lo hai inserito correttamente nella sezione /head adatta, ...e pare funzionare bene...
ciao
Author
Ritorno sulla questione... in quanto inserendo il codice
<style>
#imPageIntContainer { position:fixed;width:100%;height:100%;}
#imFooter { position:fixed; bottom:0px; }
</style>
effettivamente eravamo giunti al risultato voluto... ma ho poi scoperto che ciò è dovuto al fatto che si rende bloccato il contenitore pagina... questo è un problema perchè nel caso siano presenti pagine a più schede, o comunque con molti contenuti (come ad esempio il blog)... si preclude la possibilità di navigazione in quanto è tutto bloccato! Esistono vie alternative per aggiustare la cosa?
... se aggiungi contenuti è ovvio che la pagina debba poter scrollare, come da dubbi già espressi nel mio primo post...!...
... altrimenti metti il codice nelle proprietà della pagina al Passo_4, di quelle sole pagine che realizzerai ad hoc con unici o pochi contenuti...
.
Author
Grazie!