Jump to content

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

AzateToi
 Share

Recommended Posts

AzateToi Newbie

AzateToi

Posted
Posted (edited)

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)
Link to comment
Share on other sites
Agostini Julien Newbie

Agostini Julien

Posted
Posted

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
Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted

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. ;)
Link to comment
Share on other sites
AzateToi Newbie

AzateToi

Posted
  • Author
Posted

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
Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted

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>

Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted

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

 

Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted (edited)

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)
Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted

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

Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted

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

Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted (edited)

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