Centrer les liens du menu

[caco]

Bonjour,

 

J'utilise Prestashop 1.5.3.1, et je souhaiterais centrer les liens du menu. J'ai regardé partout, utilisé Firebug, suivi les conseils d'alsacréation et lus les sujets du forum qui en parlent, mais je n'y arrive toujours pas.

 

J'ai donc modifié le fichier superfish-modified.css, et vous pouvez voir en pièce jointe ce que j'obtiens.

J'y suis presque, je voudrais juste que mes liens soient les uns à côté des autres, et non pas les uns sur les autres.

 

Voici mon code modifié:

.sf-menu li {
margin-left: auto;
margin-right: auto;
width: 980px;
float:  left;
position: relative;
border-right: 1px solid black;
}

 

J'ai simplement ajouté:

margin-left: auto;
margin-right: auto;
width: 980px

Pouvez-vous m'aider?

 

Merci par avance,

menu.tiff

[Stéphane Chonez]

bonjour,

 

 

logiquement retirez le width et remettez le float

.sf-menu li {
margin-left: auto;
margin-right: auto;
float:  left;
}

[caco]

Si je retire "width", rien ne bouge dans le menu, tout reste aligné à gauche. Quand je le rajoute, les liens apparaissent comme dans le fichier que j'ai joint.

[Office56]

Je suis dans le même cas je voudrai centrer ce menu mais impossible ...

[Stéphane Chonez]

Pouvez vous nous donner des liens pour voir en direct, ce sera plus simple?

[Divine]

Bonjour,

 

Essaye plutôt de retirer le "float:left"

[Office56]

Si tu veux absolument un lien voici le prestashop officiel : http://demo-store.prestashop.com/fr/

On veut juste centrer ce menu du module blocktopmenu.

 

Merci d'avance pour vos réponses

[Divine]

Bonsoir,

 

En fait si j'ai bien compris ce sont les liens à l'intérieur du menu que tu veux centrer.

Si c'est bien cela il te faut effectuer deux manipulations :

 

D'abord tu appliques le background du menu, ainsi que le border-radius et le box-shadow à la classe "sf-contener" au lieu de la classe "sf-menu". Tu y laisses la propriété "clear:both" et tu y ajoutes une hauteur :

 

.sf-contener {background: url("../img/bg_blocktopmenu.png") repeat-x scroll 0 0 transparent;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 2px #C6C6C6;clear: both; height: 34px}

 

Ensuite sur la classe "sf-menu", tu vires le background, border-radius et box-shadow que tu as appliqué précédemment au sf-contener. Tu vires le "float:left" et tu y appliques un "margin:0 auto!important". Tu appliques également une largeur en fonction de la largeur globale de tes catégories. Au final, pour la classe "sf-menu", tu ne dois plus avoir que les propriétés suivantes :

 

.sf-menu {margin: 0 auto !important;padding: 0 5px;width: 855px}

[caco]

Merci pour cette explication, je vais essayer ça !

[Divine]

Alors tu as réussi ?

[caco]

Malheureusement non...

Je ne retrouve pas les mêmes propriétés que celles que tu mentionnes pour les classes .sf-menu et .sf-contener

Voilà les propriétés que j'ai:

/*** ESSENTIAL STYLES ***/
.sf-contener {
clear: both;
}
.sf-menu, .sf-menu * {
margin:   0;
padding:  0;
list-style:  none;
}
.sf-menu {
margin: 10px 0;
padding:0;
width:980px;/* 980 */
background: #EA6720;
}

 

J'ai malgré tout essayé de faire les modifications que tu proposes et je mets en pièces jointes, mon menu d'origine et mon menu modifié.

 

Mon url est : http://lhuilerieblan...insight.net/fr/

 

Merci encore!

menu-origine.tiff

menu-modifie.tiff

[Divine]

Alors essaye ceci :

 

/*** ESSENTIAL STYLES ***/
.sf-contener {
clear: both;
background: #EA6720;
border-radius: 3px;
height: 34px;
margin: 0 0 10px;
}
.sf-menu {
margin: 0 auto;
padding:0;
width: 358px;
}

 

Et enlève toutes les autres propriétés du "sf-menu" (box-shadow, etc...)

[caco]

Malheureusement, ça ne change rien. :-(

C'est étrange que ce soit si compliqué à réaliser....

[caco]

Un petit up pour le sujet, quelqu'un doit bien détenir la solution! ;-)

[BreizhInWeb]

Un petit up pour le sujet, quelqu'un doit bien détenir la solution! ;-)

+1