image dans le footer en longueur [RESOLU]

[dzill38]

Bonsoir a tous,

Je souhaiterais integré une image dans le footer, qui prend l integralité de la longueur j ai essayé de modif le css en integrant dans mon global.css :

   float: left; height:200px; width: 100%; text-align: right; margin: auto;
   background: transparent url('../img/bg_fond.png') repeat-x scroll 0 0; } 
       overflow:hidden; 

l'image s integre bien dans le footer, mais l espace de gauche et de droite reste en blanc.

Quelqu un a un tuyau ?

Merci par avance !

[MayMo design]

faut voir si la div qui contient l'image n'aille pas une propriété de background : #fff.
pouvez vous nous donner un lien pour voir de prés!!

[Sébastien Plénat]

si c'est sur le site cani-mode, essais avec une image de 980px de large

[dzill38]

bonsoir voici le lien de test

http://www.lindoli.com/prestashop/

[Divine]

Bonsoir,

Si tu veux que l'image en question prenne toute la longueur de la page, il faut sortir la div contenant l'image de la div page.

[dzill38]

bonsoir,

je pense avoir enlever la div du footer.tpl
mais un coup d oeil d un expert serait pas de refus

Je precise il s agit du theme "basique" de prestashop

{if !$content_only}


<!-- Right -->

               {$HOOK_RIGHT_COLUMN}


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

   {/if}


 
   </body>
</html> 

[Divine]

Presque mais cela serait plutôt comme ça :

{if !$content_only}


<!-- Right -->

               {$HOOK_RIGHT_COLUMN}


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



   {/if}
   </body>
</html> 

[dzill38]

j ai testé mais sans succés :/

[Divine]

Si si, ta div contenant l'image prend bien toute la largeur de la page à présent.
Par contre si tu n'adaptes pas ton image à cette largeur, tu ne risques pas de voir le changement

Au passage je ne comprend pas pourquoi tu ne gères pas l'appel de cette image directement dans ton css plutôt que dans ton tpl ?

[dzill38]

j ai essayé dans le css :

#ImageFondFooter {
   -moz-background-clip: border;
   -moz-background-inline-policy: continuous;
   -moz-background-origin: padding;
 background: #84AD24 url('../img/bg_fond.png') repeat-x 0 0;        /* Couleur de fond en dessous     */
   background-color: #906078;                                                                /* du bandeau du bas            */
   font-size: 11px;
   line-height: 1.2em;
   magin-top: 0px;
   padding-top: 0px;            /* déplace l'image centrale (ImageFooter.jpg) X pixels plus bas que le haut de le bandeau de fond (FondImageFooter.jpg) */
   padding-bottom: 0px;        /* rajoute X pixels libres entre l'image centrale du footer (ImageFooter.jpg) et la bas de la page */
}

apres de multiple recherche mais bon si tu as plus simple je suis prenneur ! et merci beaucoup au passage pour ton aide !

[dzill38]

et si tu peux m indiquer le bon code pour la largueur, ca m aiderait beaucoup je suis un peu novice en css !

[Divine]

En fait dans ton css, il te suffit d'appliquer un background avec ton image en repeat-x pour #ImageFondHeader et de définir une hauteur à la valeur que tu souhaites.

La largeur n'est pas nécessaire puisque la div est sortie de la page donc elle va automatiquement faire la largeur de la page. Au pire tu mets 100%
L'important c'est vraiment d'appliquer ton image en background et de la faire se répéter en largeur.

[dzill38]

desolé de t embeter mais peux tu me donné le code exact a appliqué ?
ca m aiderais enormement, je te remercie en tout cas pour ton support !

[Divine]

#ImageFondFooter {
   background: #84AD24 url('../img/bg_fond.png') repeat-x; 
   height:300px;
}

La hauteur de 300px n'est qu'un exemple, tu mets la valeur que tu souhaites.

[dzill38]

probleme resolu avec le footer.tpl :

{if !$content_only}


<!-- Right -->

               {$HOOK_RIGHT_COLUMN}


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


   {/if}
   </body>
</html> 

et le global.css a la ligne #footer

#footer {

   font-size:11px; background: url('../img/bg_fond.png') repeat-x; clear:both; width:100% !important;  height:300px;
   } #footer.inside{width:980px; margin:auto; }

Un gros merci pour ton aide

[Divine]

Héhé pas de problème