WebSite X5Help Center

 
Marco B.
Marco B.
User

Footer fisso senza margini  it

Autore: Marco B.
Visite 2874, Followers 1, Condiviso 0  
Parole Chiave: basso,bloccato,footer,margini

Vorrei bloccare il footer in basso a fine pagina sito .Come fare??

Postato il
37 RISPOSTE - 5 UTILI
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

Penso intenda averlo sempre in vista...anche con la pagina lunga... 

Leggi di più
Postato il da Mirko Boschetti
Template By Silver™
Template By Silver™
User

position:fixed

Leggi di più
Postato il da Template By Silver™
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Marco B.
Marco B.
User
Autore

Ho provato con - #imFooter { position: fixed ;clear: both; height: 25px; background-color: #C0C0C0; } ma semplicemente scompare.


Leggi di più
Postato il da Marco B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Marco B.
Marco B.
User
Autore

non va!! stesso precedente risultato....

Leggi di più
Postato il da Marco B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... ma il codice dove lo inserisci e come...?

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Marco B.
Marco B.
User
Autore

cartella res template css.

Leggi di più
Postato il da Marco B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Marco B.
Marco B.
User
Autore

creato pagina con oggetto  html e nella  scheda css inserito #imFooter { position:absolute; bottom:0px;} ma ottengo stesso risultato il footer scompare

Leggi di più
Postato il da Marco B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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


Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 lemonsong  
 lemonsong  
User

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

Leggi di più
Postato il da  lemonsong  
Esse Di
Esse Di
User
 lemonsong  
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:

  1. il piè di pagina non si allinea orizzontalmente con l'intestazione ed il contenuto della pagina
  2. il contenuto della pagina si sovrappone al piè di paginasulla sinistra

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

Leggi di più
Postato il da Esse Di
Esse Di
Esse Di
User

Correzione del mio precedente post.

 lemonsong  
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:

  1. il piè di pagina non si allinea orizzontalmente con l'intestazione ed il contenuto della pagina;
  2. il contenuto della pagina si sovrappone al piè di pagina.

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

Leggi di più
Postato il da Esse Di
Esse Di
Esse Di
User
 lemonsong  
Nel profilo dell'autore del post vedo solo la versione 8, il CSS è per la 8.

Mi era sfuggito. Ovviamente non poteva sfuggire a te.

 lemonsong  

Se c'ha anche la 9, ora ha il CSS pure per quella Wink

No, perché bisogna prima risolvere il problema dell'allineamento a sinistra.

_______ oltre il 5° step ________

http://www.unofficialwsx5.com

Leggi di più
Postato il da Esse Di
 lemonsong  
 lemonsong  
User
Esse Di
No, perché bisogna prima risolvere il problema dell'allineamento a sinistra.

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

Leggi di più
Postato il da  lemonsong  
Esse Di
Esse Di
User
 lemonsong  
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

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

Leggi di più
Postato il da Esse Di
 lemonsong  
 lemonsong  
User

Come ho già scritto è un accrocchio Smile , 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 Smile

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

Leggi di più
Postato il da  lemonsong  
Esse Di
Esse Di
User
 lemonsong  
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

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

Leggi di più
Postato il da Esse Di
Marco B.
Marco B.
User
Autore

CMQ ho inserito il codice di lemonsong <style type="text/css">
body #imFooter {position: fixed; bottom: 0; width: 988px;}
</style> e mi funziona perfettamente....

Leggi di più
Postato il da Marco B.
Massimo F.
Massimo F.
User

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?

Leggi di più
Postato il da Massimo F.
Massimo F.
Massimo F.
User

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

Leggi di più
Postato il da Massimo F.
 lemonsong  
 lemonsong  
User

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

Leggi di più
Postato il da  lemonsong  
Massimo F.
Massimo F.
User

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

Leggi di più
Postato il da Massimo F.
Esse Di
Esse Di
User
Pc Doctor MerlinArt
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/

Leggi di più
Postato il da Esse Di
Template By Silver™
Template By Silver™
User
Pc Doctor MerlinArt
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

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

Leggi di più
Postato il da Template By Silver™
Massimo F.
Massimo F.
User

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>

Leggi di più
Postato il da Massimo F.
Massimo F.
Massimo F.
User

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>

Leggi di più
Postato il da Massimo F.
Template By Silver™
Template By Silver™
User
Pc Doctor MerlinArt
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

Leggi di più
Postato il da Template By Silver™
Esse Di
Esse Di
User
Pc Doctor MerlinArt
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>

Per mia curiosità, potresti indicarci un sito in cui il tuo sistema funziona?

Leggi di più
Postato il da Esse Di
Massimo F.
Massimo F.
User

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

Leggi di più
Postato il da Massimo F.
Massimo F.
Massimo F.
User

Scusami Esse ma è solo un progetto test senza sito

Leggi di più
Postato il da Massimo F.
Esse Di
Esse Di
User
Pc Doctor MerlinArt
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.

Leggi di più
Postato il da Esse Di