Jump to content

Impossible de forcer le footer à toute la largeur de la page

lagraine

By lagraine
in Modules et thèmes gratuits

 Share

Recommended Posts

lagraine Newbie

lagraine

Posted
Posted

Bonjour,

 

J'ai essayé toutes les solutions évoquées dans le forum mais je n'arrive pas à forcer mon footer pour prendre toute la largeur de la page.

 

Voici mon fichier footer.tpl :

 

{if !$content_only}

</div>

<!-- Footer -->

<img src="../themes/lagraine/img/footer.gif" border=0 alt="boutique de produits ecologiques et naturels" UseMap="#Map"/>

<map name="Map">

<area shape="rect" coords="11,7,321,87" href="http://www.emilienature.com/content/17-qui-sommes-nous">

<area shape="rect" coords="330,7,648,92" href="http://www.emilienature.com/content/2-nous-contacter">

<area shape="rect" coords="651,6,952,88" href="http://www.facebook.com/EmilieNature" target="_blank">

<area shape="rect" coords="13,98,322,179" href="http://www.emilienature.com/content/1-livraison">

<area shape="rect" coords="333,96,642,182" href="http://www.emilienature.com/content/15-paiements">

<area shape="rect" coords="653,99,958,181" href="http://www.emilienature.com/content/13-retour-produit">

</map>

 

 

<div id="footer">

</div></div>

 

 

{/if}

 

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff0000"><tr><td>test</td></tr></table>

</body>

</html>

 

 

et voici le morceau de CSS qui gère le footer :

 

/* Footer */

#footer {

clear: both; display:block; width:100%; height:122px; padding:0px 0 0 0;

background: transparent url('../img/nature.gif') no-repeat bottom center;

}

#footer_fond {

clear: both; display:block; width:100%; height:122px;

background: transparent url('../img/naturefond.gif') repeat-x bottom center;

}

L'idée est qu'une des deux images soit centrée et que l'autre occupe toute la largeur de la page (le fond vert)

 

 

 

Avez-vous une idée ?

 

D'avance merci

 

Frédéric

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

Bonjour,

 

Dans ton fichier tpl :

 

{if !$content_only}
</div>
<!-- Footer -->
<img src="../themes/lagraine/img/footer.gif" border=0 alt="boutique de produits ecologiques et naturels" UseMap="#Map"/>
<map name="Map">
<area shape="rect" coords="11,7,321,87" href="http://www.emilienature.com/content/17-qui-sommes-nous">
<area shape="rect" coords="330,7,648,92" href="http://www.emilienature.com/content/2-nous-contacter">
<area shape="rect" coords="651,6,952,88" href="http://www.facebook.com/EmilieNature" target="_blank">
<area shape="rect" coords="13,98,322,179" href="http://www.emilienature.com/content/1-livraison">
<area shape="rect" coords="333,96,642,182" href="http://www.emilienature.com/content/15-paiements">
<area shape="rect" coords="653,99,958,181" href="http://www.emilienature.com/content/13-retour-produit">
</map>

</div>
<div id="footer"></div>

{/if}
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff0000"><tr><td>test</td></tr></table>
</body>
</html>

 

Et là ça devrait marcher ;)

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

Bonjour,

 

Ok en allant sur ton site je comprend pourquoi cela ne marche pas.

 

Donc dans ton fichier global.css à la ligne 16 enlève les margin-left et margin-right du body ainsi que le width à 1000px.

 

Ensuite pour la page tu fais ceci :

 

#page {
text-align:center;
width:995px;
margin: 0 auto;
}

 

Et attention cela doit bien être #page et pas .page

Link to comment
Share on other sites
Carl Favre Newbie

Carl Favre

Posted
Posted

Bonjour lagraine,

 

Sur ton site ton footer fait bien 100%, après ton image de fond elle n'est pas "configurée" pour se répéter.

 

Si tu remplaces dans #footer le "no-repeat" par "repeat" tu auras l'image sur toute la largeur et tu verras que ton footer fait bien 100%.

 

 

 

 

#footer {
clear: both; display:block; width:100%; height:122px; padding:0px 0 0 0;
background: transparent url('../img/nature.gif') repeat bottom center;
}

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

Le footer a beau faire 100%, tant qu'il est limité par la largeur de l'élément qui le contient, il prendra la largeur de cet élément et non pas celle du site. Donc il fera 100% de l'élément qui le contient...

Ici il y a un margin-left et un margin-right ainsi qu'un width placés sur le body qui empêchent le footer de bien prendre toute la largeur du site.

 

Donc comme je l'ai dit plus haut, la solution c'est de virer ces propriétés du body ;)

Link to comment
Share on other sites
lagraine Newbie

lagraine

Posted
  • Author
Posted

J'ai vérifié et je ne me suis pas trompé dans la manip .... et je n'ai aucun margin-left, margin-right ou width dans le body

 

a titre de test, quand j'augmente le width de mon paragraphe suivant, mon footer s'élargi bien mais cela augmente la taille de toute la page (donc scrollbar) et cela décale le contenu de la page vers a gauche

#page {

text-align:center;

width:995px;

margin: 0 auto;

}

 

Je peux peut-être t'envoyer mon CSS par MP ?

 

Encore merci pour ton aide ;-)

Link to comment
Share on other sites
lagraine Newbie

lagraine

Posted
  • Author
Posted

Peux-tu me dire quel plugin tu utilises pour analyser le CSS ?

 

car je ne comprends pas d'ou vient le margin-left .... voici mon code css pour le body :

 

body {

background-color: #D7E9FB;

font-size: 11px;

font-family: Georgia;

color: #678bb0;

text-align:center;

}

Link to comment
Share on other sites
lagraine Newbie

lagraine

Posted
  • Author
Posted

oops je viens de comprendre, ce matin j'ai remis une version du css avec les margin-left car la modif d'hier suite aux conseils de Divine avait généré d'autres petits soucis de mise en page .... mais quoi qu'il en soit même sans les margin-left ca ne fonctionnait pas ....

 

bref, je continue a chercher ....

Link to comment
Share on other sites
lagraine Newbie

lagraine

Posted
  • Author
Posted

je viens maintenant de remettre la version modifiée du CSS sur base des conseils de Divine (sans les margin).

 

Je constate deux choses :

  • Le problème de footer est toujours présent (pas de changement)
  • Le contenu de ma page est désormais aligné à gauche au lieu d'être centré

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

Oui car tu n'as pas fait tout ce que je t'ai dit ;)

 

Premièrement tu dois appliquer ceci pour ta page dans ton fichier global.css :

 

#page {
text-align:center;
width:995px;
margin: 0 auto;
}

 

Et il faut bien que tu remplaces le .page (avec le point devant) par #page (avec le dièse devant). Le point est utilisé pour une classe et le dièse pour un identifiant. Or ta page est définie en identifiant et pas en classe.

 

Ensuite il faut comme l'a dit Carl que tu remplaces le "no-repeat" de l'image de ton footer par "repeat" afin que l'image de ton footer se répète sur toute la largeur.

Link to comment
Share on other sites
lagraine Newbie

lagraine

Posted
  • Author
Posted

Ca fonctionne. Un grand merci à vous deux pour vos explications et votre patience ;-)

 

Une dernière question : Avez-vous une idée pourquoi j'ai toujours un scrollbar vertical alors que la largeur de mon body est de 995 px ?

 

Bonne soirée

Link to comment
Share on other sites
Divine Community Regular

Divine

Posted
Posted

Oui cela vient de ton menu de navigation en haut de ton site.

 

Dans le fichier css de ce module (droppy.css) à la ligne 30 ajoute un width:700px à #categories_block_top_sc_ul

 

Tu auras donc ceci dans ce fichier css :

 

#categories_block_top_sc_ul {
background-color: transparent;
left: 290px;
text-align: center;
top: 48px;
width:700px;
}

 

Et normalement la scrollbar va disparaître ;)

Link to comment
Share on other sites
capclem Newbie

capclem

Posted
Posted

Bonsoir,

Je suis intéressé également par votre solution, mais j'avoue être perdu ne trouvant aucun de ces lignes dans mon global.css et footer.tpl :wacko:

Je réalise une nouvelle boutique en presta 1.4.5.1 à partir du prestashop_template_15.

L'idée est de réaliser un footer sur toute la largeur et également sous le menu du haut...

Merci pour vos lumières !

Link to comment
Share on other sites
sebban Newbie

sebban

Posted
Posted

Bonsoir, j' avais déjà essayer de modifier le footer pour mon site j'avais même trouver un module pour un "footer" personnaliser mais je n’étais pas arriver a faire quelque chose de propre et j avais abandonné j'en profite qu'un topic se soit ouvert pour vous demander votre aide )) l'adresse de mon site

c'est http://www.andthelightwas.com

 

en avance merci

Link to comment
Share on other sites
Carl Favre Newbie

Carl Favre

Posted
Posted

Comme ton footer est contenu dans la <div id="page"> il va falloir le sortir de là.

 

Tu peux prendre donc la <div id="footer"> et tout ce qu'il y a dedans et la mettre après le dernier </div> et tu devrais avoir ton 100%.

 

Ca te donnera quelque chose du genre :

 

<div id="page">......</div>

<div id="footer">....</div>

Link to comment
Share on other sites
sebban Newbie

sebban

Posted
Posted

Yes merci de vos conseil j'ai suivi le tuto de divine et j'ai réussi à mettre le footer sur toute la largeur de la page, pour le "header" cela se complique, j'ai cette partie dans le fichier header.tpl

 

<div id="page">

 

<!-- Header -->

 

<div id="header" class="clear">

<div>{include file=$tpl_dir./wizwnavbar.tpl}</div>

<h1 id="logo">

<a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img src="{$img_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />

 

</a>

 

<!--- Display jQuery slideshow on home page start -->

<div id="slideshow">

<ul id="nav">

<li id="prev"><a href="#">Previous</a></li>

<li id="next"><a href="#">Next</a></li>

</ul>

 

<ul id="slides">

<li><a href="#"><img width="942" height="80"

 

src="{$base_dir}themes/theme001/img/slide1.png" alt=""></a></li>

<li><a href="#"><img width="942" height="80"

 

src="{$base_dir}themes/theme001/img/slide2.png" alt=""></a></li>

 

<li><a href="#"><img width="942" height="80"

 

src="{$base_dir}themes/theme001/img/slide3.png" alt=""></a></li>

 

<li><a href="#"><img width="942" height="80"

 

src="{$base_dir}themes/theme001/img/slide4.png" alt=""></a></li>

<li><a href="#"><img width="942" height="80"

 

src="{$base_dir}themes/theme001/img/slide5.png" alt=""></a></li>

 

</ul>

</div> <!-- slideshow -->

<!--- Display jQuery slideshow on home page end -->

 

</h1>

 

{$HOOK_TOP}

 

</div>

 

<!-- Left -->

<div id="content">

<div class="clear">

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

{$HOOK_LEFT_COLUMN}

</div>

 

et je voudrias juste que la wiznavbar occupe tout la largeur de la page mais quand je fais les modif expliqué dans le tuto ca ne fonctionne pas, meme en essayant de mettre "<div id="page">" juste en dessous de <div>{include file=$tpl_dir./wizwnavbar.tpl}</div>

 

maintenant pour le footer il me reste à faire 5 colones de liens centré au milieu de page. merci de votre aide =)

Link to comment
Share on other sites
sebban Newbie

sebban

Posted
Posted

Bonjour, merci de pour ta réponse, j'ai essayer ta solution mais le centrage ne se fait pas correctement, il y a un leger décalage vers la gauche. Voici le code css que j 'ai dans le footer.

 

/*--------------footer------------*/

#footer {

background:url(../img/footerLeft.png) no-repeat 0 0 #c9c9c9;

width:100%;

padding:0;

border:none;

}

.footerRight {

background: none repeat scroll right 0 #FE9A2E;

height: 100px;

margin: auto;

border-top: solid 1px black;

width: 980px;

}

#footer .indent {

padding:22px 26px;

}

#footer .block_various_links {

width:800px;

}

.select {

overflow:hidden;

}

 

Sinon pour faire plusieurs colonnes de liens dans le footer, je dois utiliser les balise <Td></Td> dans le fichier footer.tpl, c'est ca? Merci d'avance ))

Link to comment
Share on other sites

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...