Mettre un pied de page (footer) fixe

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 39)
  • Auteur
    Messages
  • #506364
    elisephoto
    Participant
    Initié WordPress
    23 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : wp 3.3.1
    – Version de PHP/MySQL :
    – Thème utilisé : melville (minimaliste)
    – Extensions en place :
    – Nom de l’hebergeur : 1&1
    – Adresse du site : http://www.elisephotographe.com

    Problème(s) rencontré(s) :

    Bonjour,

    J’essaie de faire en sorte que mon menu reste fixe en bas de la page et que mes articles puisses défiler sans que le menu bouge.
    Pouvez-vous me dire si c’est possible? Et ce que je dois faire pour cela?

    J’ai fait pas mal de recherches sur le net mais je ne sais pas comment l’implanter dans mon thème, voici ce que j’ai trouvé : http://yidille.free.fr/plux/valign/?9-pied-en-bas-de-fenetre.
    ou celui la: http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

    Merci pour votre aide

    #819925
    elisephoto
    Participant
    Initié WordPress
    23 contributions

    Personne pour m’aider?

    #819926
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    rien de plus simple: dans les fichiers du thème wordpress se trouve un fichier footer.php qui contient toutes les “instructions” du footer.
    Il suffit donc de l’ intégrer dans chaque page du site via l’ instruction php”: get_footer()

    #819927
    Web4Space
    Membre
    Chevalier WordPress
    278 contributions

    Bonjour,

    Vous souhaitez que le footer soit fixe au site, ou à l’écran ?

    #819928
    elisephoto
    Participant
    Initié WordPress
    23 contributions

    Bonsoir,

    Je voudrais que, quand les gens viennent sur mon site les article défile avec l’ascenseur mais le footer reste toujours visible en bas, les articles passent en “dessous” du footer.

    #819924
    Web4Space
    Membre
    Chevalier WordPress
    278 contributions

    Alors, le site en question est bien http://elisephotographe.com/ ?
    Si, effectuer les opérations suivante:

    -Ouvrez le fichier style.css via WordPress (onglet Apparence, Éditeur), ou avec un logiciel FTP (comme FileZilla, répertoire: wp-content/themes/melville/style.css),
    -Cherchez le style #menu

    #menu {
    width:1160px;
    margin: 0 auto;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    -moz-box-shadow: 1px 4 20px #dddddd;
    -webkit-box-shadow: 1px 4 20px #dddddd;
    box-shadow: 1px 4 20px #dddddd;
    }

    -Remplacez la avec le code suivant:

    #menu {
    width:100%;
    margin: 0 auto;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    -moz-box-shadow: 1px 4px 20px #dddddd;
    -webkit-box-shadow: 1px 4px 20px #dddddd;
    box-shadow: 1px 4px 20px #dddddd;
    position:fixed;
    bottom:0;
    }

    -Enregistrer, et voila

    #819929
    elisephoto
    Participant
    Initié WordPress
    23 contributions

    Bonjour,

    Merci infiniment car cela fonctionne à merveille. Juste besoin d’un dernier coup de main car je souhaiterais retrouver mes marges du menu originale mes 1160px mais “centrer”.

    Elise

    #819930
    Web4Space
    Membre
    Chevalier WordPress
    278 contributions

    Vous souhaitez que la barre grise ne fasse pas tout l’écran, juste 1160px, et centrer ?

    #819931
    elisephoto
    Participant
    Initié WordPress
    23 contributions

    oui la le menu prend toute la page en longueur alors que je souhaiterai qu’il soit juste niveau de la page blanche et qu’il n’aille pas sur le “rose”

    🙂

    #819933
    christofes
    Participant
    Chevalier WordPress
    103 contributions

    Pour ton petit souci, il faut remette width :1160px; au lieu de width: 100%;
    Pour centrer ton footer, tu ajoute text-align: center;

    #menu {
    width:1160px;
    margin: 0 auto;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    -moz-box-shadow: 1px 4px 20px #dddddd;
    -webkit-box-shadow: 1px 4px 20px #dddddd;
    box-shadow: 1px 4px 20px #dddddd;
    position:fixed;
    bottom:0;
    text-align: center;
    }

    #819932
    elisephoto
    Participant
    Initié WordPress
    23 contributions

    Bonsoir,

    Cela ne fonctionne pas. Visuellement j’ai la barre qui va sur la gauche et qui n’est donc pas centrée. J’ai essaye pas mal de possibilité je ne vois pas ce que je peux modifier :(

    #819934
    Web4Space
    Membre
    Chevalier WordPress
    278 contributions

    Je vous dit le code a mettre ce soir

    #819935
    christofes
    Participant
    Chevalier WordPress
    103 contributions

    bonjour
    je viens de regarder ton CSS, tu as une id=”menu” et juste en dessous une class=”menu-footer”, 1ere solution déplacer le text-align dans menu-footer ou 2eme solution aligner menu et menu-footer

    1ere solution

    #menu {
    	width: 1160px;	
    	margin:0  auto;
    	border-right: 1px solid #cccccc;
    	border-left: 1px solid #cccccc;
    	-moz-box-shadow: 1px 4 20px #dddddd;
    	-webkit-box-shadow: 1px 4 20px #dddddd;
    	box-shadow: 1px 4 20px #dddddd;
                    position: fixed;
                    bottom: 0;    
    }
    
    
    #menu div.menu, #menu div.menu-footer {
    	background-color: #777;	
    	border-bottom-style: double; 
    	border-bottom-color: #777; 
    	border-bottom-width: 0px;
    	border-top-style: double; 
    	border-top-color: #777; 
    	border-top-width: 0px;
    	text-align: center;
    }

    2eme solution

    #menu, #menu div.menu-footer {							
    	margin-left: auto;					
    	margin-right: auto;
    }
    
    #menu {
    	width: 1160px;	
    	border-right: 1px solid #cccccc;
    	border-left: 1px solid #cccccc;
    	-moz-box-shadow: 1px 4 20px #dddddd;
    	-webkit-box-shadow: 1px 4 20px #dddddd;
    	box-shadow: 1px 4 20px #dddddd;
                    position: fixed;
                    bottom: 0;
    }
    
    #menu div.menu, #menu div.menu-footer {
    	background-color: #777;	
    	border-bottom-style: double; 
    	border-bottom-color: #777; 
    	border-bottom-width: 0px;
    	border-top-style: double; 
    	border-top-color: #777; 
    	border-top-width: 0px;
    }

    #819937
    christofes
    Participant
    Chevalier WordPress
    103 contributions

    Bonsoir
    Je viens de m’apercevoir qu’il manquait le px après le 4, je viens de faire les corrections.

    1ere solution

    #menu {
    width: 1160px;    
    margin: 0px  auto;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    -moz-box-shadow: 1px 4px 20px #dddddd;
    -webkit-box-shadow: 1px 4px 20px #dddddd;
    box-shadow: 1px 4px 20px #dddddd;
    position: fixed;
    bottom: 0px;    
    }
    
    #menu div.menu, #menu div.menu-footer {
    background-color: #777;    
    border-bottom-style: double; 
    border-bottom-color: #777; 
    border-bottom-width: 0px;
    border-top-style: double; 
    border-top-color: #777; 
    border-top-width: 0px;
    text-align: center;
    }

    2eme solution

    #menu, #menu div.menu-footer {
    margin-left: auto;
    margin-right: auto;
    }
    
    #menu {
    width: 1160px;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    -moz-box-shadow: 1px 4px 20px #dddddd;
    -webkit-box-shadow: 1px 4px 20px #dddddd;
    box-shadow: 1px 4px 20px #dddddd;
    position: fixed;
    bottom: 0px;
    }
    
    #menu div.menu, #menu div.menu-footer {
    background-color: #777;
    border-bottom-style: double; 
    border-bottom-color: #777; 
    border-bottom-width: 0px;
    border-top-style: double; 
    border-top-color: #777; 
    border-top-width: 0px;
    }

    Je suis désolé pour le petite désagrément

    #819938
    Web4Space
    Membre
    Chevalier WordPress
    278 contributions

    Bonjour,

    Essayez la solution de @christofes pour voir, et si sa marche pas, je vous donnerais un autre code

15 sujets de 1 à 15 (sur un total de 39)
  • Vous devez être connecté pour répondre à ce sujet.