Jump to content
AzateToi

[Résolu]Mettre mon menu sur toute la largueur de la page

Recommended Posts

Bonjours, j'aimerais que le menu de mon site soit sur toute la largeur de la page ainsi que mon "footer". Mais je voudrais que ça soit que c'est deux contenus qui soient sur toute la largeur, le reste ne changerai pas de place.

Voici mon site pour mieux comprendre et m'aider si possible : http://scoot85.com/index.php

 

Merci d'avance.

Edited by AzateToi (see edit history)

Share this post


Link to post
Share on other sites

Bonsoir,
 
Votre site est ultra-lent vérifiez que votre cache "Smarty" est activé, car ceci nuit gravement à votre référencement.
Vous avez également un problème de background, je vous suggère de remplacer ceci "background-image: url("../img/bg_background.png"); " à la ligne 66 de votre global.css par ceci "background: url("../img/bg_background.png") no-repeat scroll center center transparent;"

 

Pour votre problème de menu je vous suggère d'intégrer cela avec le background car la grille de Prestashop n'est pas conçue pour un thème "responsive" de base et à moins d'avoir de solides connaissances en CSS cela risque d'être complexe à mettre en place proprement.

 

Bonne soirée

  • Like 1

Share this post


Link to post
Share on other sites

Si j'ai bien compris la demande, vous voulez que le fond noir/gris du top-menu soit sur tout la largeur du site, et de même pour le fond du footer ?

Dans ce cas, pour le top-menu, veuillez ajouter à votre global.css, dans la partie pour le header, la ligne :

#leo-page.pattern {background: none repeat scroll 0 0 #252525;height: 40px;}

Pour le footer, c'est plus chiant parce que vous utilisez déjà un background sur body, et qu'on utilise pattern pour le fond du top-menu.
Va falloir faire un 'pattern2' (exemple de nom) et l'ajouter au global.css mais aussi dans le header.tpl !

1°) ouvrir header.tpl
2°) trouver ou commence <div id="leo-page" class="pattern">
3°) coller en dessous <div id="leo-page" class="pattern2">
4°) penser bien à refermer en ajoutant </div> dans le footer.tpl.
5°) coller dans global.css, à côté de #leo-page.pattern :

#leo-page.pattern2 {background: none repeat scroll 0 0 #252525;height: 400px;}

Voilà, votre site se trouve avec des barres barres horizontales, sans pour autant être décentrer ou avoir un quelconque problème. ;)

Share this post


Link to post
Share on other sites

Bonjours, merci beaucoup vous deux pour votre aide. 

Agostini Julien : Merci pour le cache smarty! Ca fonctionne largement mieux maintenant

FMR : Le menu fonctionne mais pour le footer cela ne fonctionne pas...

 

Et encore merci de votre aide!

  • Like 1

Share this post


Link to post
Share on other sites

C'est que vous avez oublier un truc. Je suis sûr de la manip, depuis le temps que je touche au .css.
Surement l'emplacement ou vous mettez le </div> dans le footer.tpl qui doit être mauvais. ;)

Edited by FMR (see edit history)

Share this post


Link to post
Share on other sites

Ah non, vous avez mal mis <div id="leo-page" class="pattern2"> donc forcément...

Là, vous avez :

<div id="leo-page" class="pattern">
<div class="page-container">
<div id="leo-page" class="pattern2">

Au lieu de :

<div id="leo-page" class="pattern">
<div id="leo-page" class="pattern2">
<div class="page-container">



Et le </div> dans le foter.tpl doit être ajouter juste avant </body>

Share this post


Link to post
Share on other sites

J'ai modifié comme vous me l'avez dis... Et je ne vois pas d'où vient le problème...

Share this post


Link to post
Share on other sites

Ahhh ! Pardon, pardon, me suis planté dans le code a appelé dans le .ccs pour le footer.
Ca ne marchera pas avec une couleur, il faut appelé une image.

Remplacez :

#leo-page.pattern2 {background: none repeat scroll 0 0 #252525;height: 400px;} par

#leo-page.pattern2 {url("../img/bg_footer.jpg") repeat fixed center bottom transparent; height: 400px;}
 et faire une image de 2px par 2px de la couleur voulue (#252525) et l'uploader dans prestashop/nom-de-votre-theme/img

Là, ca dervait marcher parfaitement. ;-)


 

Share this post


Link to post
Share on other sites

Bon, une technique qui fonctionne pour moi :

- Dans global.css, vous devez avoir :

#leo-page.pattern {background: none repeat scroll 0 0 #252525;height: 40px;}

#leo-page.pattern2 {background: none repeat scroll 0 0 #252525;height: 400px;}
 

- Dans header.tpl, supprimer la ligne <div class="page-container"> pour avoir :
 

<div id="leo-page" class="pattern">
<div class="pattern2" id="leo-page">

Bien sur, ne pas ajouter de </div> dans le footer.tpl du coup.



 
Edited by FMR (see edit history)

Share this post


Link to post
Share on other sites

Mdr ! On va y arriver ! ;)

 

Modifier dans global.css :
 

#leo-maincontainer {
    background: none repeat scroll 0 0 #FFFFFF;
    margin-bottom: 20px;
}

et

#leo-maincontainer {
    background: none repeat scroll 0 0 #FFFFFF;
    margin-bottom: 20px;
}

et dites moi ce que vous en pensez ? :D

Share this post


Link to post
Share on other sites

Si si, juste une faute de frappe... Vous avez pas remarqué ?? Deux fois la même chose d'écrit. ^^

Il manque :
 

#leo-header{
    background: none repeat scroll 0 0 #FFFFFF;
    margin-bottom: 20px;

}

Share this post


Link to post
Share on other sites

Si j'avais remarqué mais bon il est tard.. :P 

C'est mieux mais toujours un petit problème.. Je suis maudit :(

Share this post


Link to post
Share on other sites

Non, non, y a toujours une solution. :D
Il faut supprimer  (en rouge):
 

#leo-header{
    background: none repeat scroll 0 0 #FFFFFF;
    margin-bottom: 20px;

}

Edited by FMR (see edit history)

Share this post


Link to post
Share on other sites

Ohhhh! Ca fonctionne, vous êtes mon dieu ;)

Merci beaucoup d'avoir pris de votre temps pour m'aider! 

Share this post


Link to post
Share on other sites

Pas de soucis. J'espère que vous avez au moins compris les manipulations que l'on a fait ?
N'oubliez pas d'utiliser firebug pour vous aider, on gagne un temps fou quand on sait l'utiliser. ;)

Et pensez à passer le topic en 'Résolu'. :P

Share this post


Link to post
Share on other sites

Pour que l'image de votre logo en fond apparaisse correctement (sur les pages catégories, à gauche), remplacez par ci-dessous :
 

#leo-maincontainer {
    background: url("../img/bg_background.png") no-repeat scroll 40px center #FFFFFF;
    margin-bottom: 20px;
}

et

body {
    color: #222222;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 14px;
}

Et voilà, là, c'est entièrement fini et correct partout. ;)
Je pouvais pas vous laisser sans que ce soit impec'.
Bonne continuation. :D
Edited by FMR (see edit history)

Share this post


Link to post
Share on other sites

Je vous remercie, merci beaucoup... C'est très gentil de votre part de m'avoir aider.

Vous êtes une brave personne.

Bonne continuation à vous aussi :)

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More