Mettre un pied de page (footer) fixe

Statut : non résolu

Ce sujet contient 38 réponses, 6 participants et a été mis à jour pour la dernière fois par elisephoto, le il y a 7 années et 1 mois.

15 sujets de 1 à 15 (sur un total de 39)

1 2 3 →

Auteur

Messages
29 février 2012 à 8 h 26 min #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

2 mars 2012 à 16 h 47 min #819925

elisephoto
Participant

Initié WordPress
23 contributions

Personne pour m’aider?

2 mars 2012 à 19 h 25 min #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()

2 mars 2012 à 20 h 48 min #819927

Web4Space
Membre

Chevalier WordPress
278 contributions

Bonjour,

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

2 mars 2012 à 21 h 13 min #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.

3 mars 2012 à 14 h 35 min #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

3 mars 2012 à 16 h 25 min #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

4 mars 2012 à 19 h 57 min #819930

Web4Space
Membre

Chevalier WordPress
278 contributions

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

4 mars 2012 à 19 h 58 min #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”

🙂

4 mars 2012 à 22 h 13 min #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;
}
```
4 mars 2012 à 23 h 13 min #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

5 mars 2012 à 6 h 26 min #819934

Web4Space
Membre

Chevalier WordPress
278 contributions

Je vous dit le code a mettre ce soir

5 mars 2012 à 10 h 28 min #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;
}
```
5 mars 2012 à 20 h 01 min #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
5 mars 2012 à 20 h 26 min #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
Auteur

Messages

15 sujets de 1 à 15 (sur un total de 39)

1 2 3 →

Vous devez être connecté pour répondre à ce sujet.