Jump to content

[Résolu] Taille Footer 100%

Keibo
 Share

Recommended Posts

Keibo Newbie

Keibo

Posted
Posted

Bonjour,

Je sais que ce sujet à été abordé des centaines de fois, mais les réponses que j'ai trouvées et que j'ai essayées pour la plupart n'ont pas fonctionné... à mon grand désespoir !

Voila je voudrais mettre le background de mon footer sur toute la largeur du body.

footer.tpl :

        {if !$content_only}


<!-- Footer -->
    
{$HOOK_FOOTER}

   {/if}

       <!-- FOOTER NR2 -->



Navigation



{l s='Accueil'}
{l s='Univers Homme'}
{l s='Univers Femme'}
{l s='Univers Garçon'}
{l s='Univers Fille'}





Qui sommes nous ?



{l s='Notre Histoire'}
{l s='Nos Actualités'}
{l s='Mentions Légales'}
{l s='Conditions générales de vente'}
{l s='???'}





Compte



{l s='Inscription'}
{l s='Connexion'}
{l s='Mon Compte'}
{l s='Mon Panier'}
{l s='Nous Contacter'}





Newsletter


                               {if isset($msg) && $msg}

{$msg}
                               {/if}
                                   <form action="{$link->getPageLink('index.php')}" method="post">

<input type="text" name="email" size="18" value="{if isset($value) && $value}{$value}{else}{l s='your e-mail' mod='blocknewsletter'}{/if}"></p>



{l s='Subscribe' mod='blocknewsletter'}
{l s='Unsubscribe' mod='blocknewsletter'}

                                           <input type="submit" value="ok" class="button_mini" name="submitNewsletter" />

                                   </form>






       <!-- SUB-FOOTER -->


           JDL Création - Bijoux de fabrication artisanale française | Copyright © 2011. Tous droits réservés | SARL au capital de 7000€

   </body>
</html>

Link to comment
Share on other sites
Broceliande Newbie

Broceliande

Posted
Posted
Bonjour Otaku
Il serait intéressant de nous donnez
-Sous quelle version de Prestashop êtes vous
-Sous quel thème êtes vous ?
-Quel est le lien de votre boutique histoire de jeter un coups d’œil sur l'incident*
Cordialement,


+1 , ce serait un minimum...


Basiquement , néanmoins, compte tenu que le block footer fait la largeur du block center_column , tu peux simplement faire un background plus large et ajouter un background-position: -xxx 0; css sur le block footer

un exemple , tu fais un bg de 1600 de large , ta colonne centrale fait 940 , alors il te reste 1600-940 = 660 pixels à répartir de chaque coté , soit 330 de décalage.

Donc si ton bg est appliqué au footer , un background-position: -330px 0; va recentrer la partie centrale de l'image sur la colonne centrale , et ton background sera en mesure de s'afficher pleine largeur jusqu'à 1600 pixels de large.

Ca sous entends que sur le div footer et que sur aucun des conteners de ce dernier tu n'aies un overflow:hidden;

Mais théoriquement ça doit marcher.
Link to comment
Share on other sites
Keibo Newbie

Keibo

Posted
  • Author
Posted

Merci pour vos réponses !

Alors déjà désolé de ne pas avoir précisé certaines informations...

Je tourne sous PS 1.4.1, le template est Deco_Evo. Par contre je ne préfère pas donner l'url car le site et le design ne sont pas pour moi et je tiens à le garder "secret" pour le moment et je ne pense pas que ça gêne.

Broceliande, merci pour ton astuce, je vais tester ça de suite ! J'ai entendu parler de sortir le div footer du div page pour que le bg prenne toute la largeur, sais-tu comment faire ?

Merci d'avance !

Link to comment
Share on other sites
Broceliande Newbie

Broceliande

Posted
Posted
Merci pour vos réponses !

Alors déjà désolé de ne pas avoir précisé certaines informations...

Je tourne sous PS 1.4.1, le template est Deco_Evo. Par contre je ne préfère pas donner l'url car le site et le design ne sont pas pour moi et je tiens à le garder "secret" pour le moment et je ne pense pas que ça gêne.

Broceliande, merci pour ton astuce, je vais tester ça de suite ! J'ai entendu parler de sortir le div footer du div page pour que le bg prenne toute la largeur, sais-tu comment faire ?

Merci d'avance !


Si ça gène pas mal parce que pour une solution toute faite , qui nous prendrait sans doute 30 secondes , là faudrait qu'on installe une 1.4 exprès , qu'on télécharge le thème dont tu parles, qu'on l'installe ....

Franchement je vais parler pour moi car d'autres peuvent en avoir envie .. mais ça me fait trop de temps perdu pour simplement t'apporter une solution css toute faite , que je t'ai déja décrite plus haut en détail et que tu peux probablement appliquer toi même si tant est que tu connaisses le css un petit peu.

Je suppose que c'est le cas puisque tu sembles être prestataire d'après ce que tu dis pour une tierce personne.

En tout cas moi , pas de lien , pas de code , comprends le , c'est une question de temps ... que je n'ai pas. ;)
Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted
Merci pour vos réponses !

Alors déjà désolé de ne pas avoir précisé certaines informations...

Je tourne sous PS 1.4.1, le template est Deco_Evo. Par contre je ne préfère pas donner l'url car le site et le design ne sont pas pour moi et je tiens à le garder "secret" pour le moment et je ne pense pas que ça gêne.

Broceliande, merci pour ton astuce, je vais tester ça de suite ! J'ai entendu parler de sortir le div footer du div page pour que le bg prenne toute la largeur, sais-tu comment faire ?

Merci d'avance !


Bonjour,

il suffit de fermer la div de page avant d'ouvrir la div du footer et donc il suffit de conter les ouvertures et les fermeture, ou de rassembler tout le code du header et du footer sur une page de code pour remettre le tout dans le bon ordre.
Link to comment
Share on other sites
Keibo Newbie

Keibo

Posted
  • Author
Posted
Bonjour Otaku
Il serait intéressant de nous donnez
-Sous quelle version de Prestashop êtes vous
-Sous quel thème êtes vous ?
-Quel est le lien de votre boutique histoire de jeter un coups d’œil sur l'incident*
Cordialement,


+1 , ce serait un minimum...


Basiquement , néanmoins, compte tenu que le block footer fait la largeur du block center_column , tu peux simplement faire un background plus large et ajouter un background-position: -xxx 0; css sur le block footer

un exemple , tu fais un bg de 1600 de large , ta colonne centrale fait 940 , alors il te reste 1600-940 = 660 pixels à répartir de chaque coté , soit 330 de décalage.

Donc si ton bg est appliqué au footer , un background-position: -330px 0; va recentrer la partie centrale de l'image sur la colonne centrale , et ton background sera en mesure de s'afficher pleine largeur jusqu'à 1600 pixels de large.

Ca sous entends que sur le div footer et que sur aucun des conteners de ce dernier tu n'aies un overflow:hidden;

Mais théoriquement ça doit marcher.


J'ai ajouté à mon css dans ma div footer :

background: url("../img3/testfooter.jpg") no-repeat scroll center top #2F2F2F;
background-position: -489px 0;

L'image s'affiche mais seulement dans le cadre et pas sur toute la page, j'ai vérifié qu'il n'y ai pas de overflow:hidden comme tu me l'a dit...

Pour info mon image fait 1920px - 942px du cadre donc 489px de chaque cotés.
Link to comment
Share on other sites
Keibo Newbie

Keibo

Posted
  • Author
Posted
Merci pour vos réponses !

Alors déjà désolé de ne pas avoir précisé certaines informations...

Je tourne sous PS 1.4.1, le template est Deco_Evo. Par contre je ne préfère pas donner l'url car le site et le design ne sont pas pour moi et je tiens à le garder "secret" pour le moment et je ne pense pas que ça gêne.

Broceliande, merci pour ton astuce, je vais tester ça de suite ! J'ai entendu parler de sortir le div footer du div page pour que le bg prenne toute la largeur, sais-tu comment faire ?

Merci d'avance !


Bonjour,

il suffit de fermer la div de page avant d'ouvrir la div du footer et donc il suffit de conter les ouvertures et les fermeture, ou de rassembler tout le code du header et du footer sur une page de code pour remettre le tout dans le bon ordre.


J'ai appliqué ta solution qui marche parfaitement ! Maintenant il faut que je règle encore 2-3 détails. Merci beaucoup !
Link to comment
Share on other sites
  • 2 months later...
dsc Newbie

dsc

Posted
Posted

Bonjour,

 

C'est mon 1er site avec prestashop, je suis entrain de créer le site www.modsandart.com avec la V.1.4., j'aimerais que le footer prenne toute la largeur de l'écran, mais je n'y arrives pas malgrès tous les conseils trouvés sur le forum, quelqu'un pourrait maider svp ?

 

Merci.

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

Bonjour,

 

C'est mon 1er site avec prestashop, je suis entrain de créer le site www.modsandart.com avec la V.1.4., j'aimerais que le footer prenne toute la largeur de l'écran, mais je n'y arrives pas malgrès tous les conseils trouvés sur le forum, quelqu'un pourrait maider svp ?

 

Merci.

 

Bonjour votre site à aujourd'hui cette structure :

 

<head>
<body id="index">
<div id="page">
<div id="header">
<div id="columns">
<div id="footer">
</div>
</body>

 

il suffit pour avoir un footer 100% sortir le <div id="footer"> de la balise <div id="page">

 

D’abord transformez votre <div id="page"> en <div class="page">

Ensuite dans le css éditez :

 

#page {
   margin: 0 auto 2px;
   text-align: left;
   width: 980px;
}

 

en 

.page {
   margin: 0 auto 2px;
   text-align: left;
   width: 980px;
}

 

maintenant passons à la structure du site en lui même :

 

éditez le footer.tpl pour sortir le <div id="footer">

 

Pour cela il faut remonter le </div> de <div class="page"> (à placer au dessus du div footer)

 

cela va remettre le footer en 100% de large comme son papa qui est body :)

 

Par contre faut recentre le contenue de footer et pour cela il faut utliserr la class "page", ça donne au final :

 

<head>
<body id="index">
<div class="page">
<div id="header">
<div id="columns">
</div>
<div id="footer">
<div class="page">
le contenu du footer ( le hook footer)
</div>
</body>

 

V++

 

Atch

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
  • 9 months later...
  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...