Footer prenant toute la largeur de la page

[Laurent_hunter]

Bonjour,
J'aimerais que le footer, plus précisément, l'arrière plan du footer prenne toute la largeur de la fenêtre, tout en restant centrer sur la page.
Si on pourrais m'indiquer la procédure a suivre s'il vous plait ?

J'ai quelque exemple de site tournant sous prestashop :
http://www.miss-lili.com/ Dans ce cas id logo prend également la largeur total de la fenêtre.. (Le panier est très bien réussi)
http://www.woodeos.com/
http://www.bestform.fr/eshop/

Donc j'aimerais savoir comment faire pour avoir un footer et un header qui prend la total largeur de la fenêtre,
ce qui permet d'avoir 3 font d'écran du body, un au niveau de l'id logo,du body de la page, et le footer.

Cordialement;
Laurent

[Atch]

Bonsoir,

Sujet déjà abordé quelques fois sur le forum... En faisant une petite recherche vous auriez eu toutes les explications.

En gros, dans le thèmes de base , le header et le footer se trouvent dans le div page qui fait 980 px de large.
Pour avoir un footer et un header à 100% il faut les sortir du div page et ajouter ensuite un div conteneur de 980px à l intérieur des deux div.


V++

Atch

[Laurent_hunter]

merci atch, j'avais effectivement trouver; un forum qui en discuter, mais je perdais la possibilité de mettre un background sur la page centrale, pour cela que j'ai reposé la question en ajoutant, l'élément header..
Tu pourrais m'indiquer le fichier a modifier comportant les div, et le code complet qui dois apparaitre une fois la modification effectué s'il te plait

[Rosiel]

Bonjour,

Moi aussi je serais intéressée par le fichier, l'endroit, et le code. Ce n'est pas facile... Merci bien.

[dsc]

Bonjour,

 

Quel est le fichier dans lequel il faut modifier les div ?

Serait-il possible d'avoir le code complet une fois la modification effectuée ?

 

Merci pour votre aide.

[Oron]

Bonjour

 

Pour chaque fichier il y a un fichier *.tpl , dans theme/prestashop (ou dossier du theme utilisé)/header.tpl ou footer.tpl

Et là vous pouvez faire des modifications Attention garder un original !!

 

Autrement il y a aussi les fichiers css dans le dossier du thème utilisé pour faire des modifications.

[Game7]

Bonjour Laurent_hunter,

 

Pour obtenir un footer qui fait toutes la largeur de l'écran il faut que tu sortes la div du footer de la div page dans le fichier footer.tpl comme ceci :

 

Fichier d'origine :

{if !$content_only}

</div>

 

<!-- Right -->

<div id="right_column" class="column">

{$HOOK_RIGHT_COLUMN}

</div>

</div>

 

<!-- Footer -->

<div id="footer">{$HOOK_FOOTER}</div>

</div> <- \* on va déplacer la fin de la div page au dessus du footer */

{/if}

</body>

</html>

Après modification ça donne ceci :

{if !$content_only}

</div>

 

<!-- Right -->

<div id="right_column" class="column">

{$HOOK_RIGHT_COLUMN}

</div>

</div>

</div> <- \* en plaçant la fin de la div page ici on sort le footer de la page et il devient indépendant */

<!-- Footer -->

<div id="footer">{$HOOK_FOOTER}</div>

 

{/if}

</body>

</html>

Oublie pas dans ton back office d'activer dans préférence/performance/forcer la compilation smarty pour que les modifications .tpl soient pris en compte, si tu es sous prestashop 1.4.

 

Ensuite pour la forme du footer tu vas dans ton global.css à la ligne suivante :

#footer {

 

clear: both;

\* La tu règles les couleurs, hauteur, bordures etc... ce que tu veux. */

}

Bonne continuation

[dsc]

Bonjour,

 

Merci à Game7et à Oron, cela marche parfaitement.

Merci également à l'équipe technique de Prestashop dont voici la réponse :

 

Concernant la largeur du footer, le contenu du fichier footer.tpl est :

{if !$content_only}

</div>

<!-- Right -->

<div id="right_column" class="column">

{$HOOK_RIGHT_COLUMN}

</div>

</div>

<!-- Footer -->

<div id="footer">{$HOOK_FOOTER}</div>

</div>

{/if}

</body>

</html>

Dans la partie "footer", on peut voir qu'une div est fermé mais pas ouverte. En fait, c'est la div page (ouverte dans header.tpl) il suffit donc de mettre la ligne en gras juste au dessus du if, c'est à dire apres avoir fermer la div page.

Ensuite, il faudra aller dans le fichier global.css (contenue dans le dossier css) pour donner les bons style à cette div.

[Vinc3nzo]

Bonjour,

 

Merci pour cette solution si SIMPLE! ...

 

Mais je rencontre un petit souci... j'ai un .PNG (50x50px gris transparent) et je desire lui attribuer une hauteur auto ou autre hauteur.

 

voici le code actuel que j'utilise:

 

#footer {
background: url("../img/bg-center.png") repeat-x bottom center;
}

 

Merci

Edited March 13, 2013 by Vinc3nzo (see edit history)