modifictatioin du menu horizontal de julien breux

[phil3001]

Bonjour à tous

j'ai installé le module menu horizontal de julien breux et j'aimerai lui apporter des modifications mais j'ai besoin d'aide.

j'aimerai à la place de la grande barre horizontal y mettre des blocks pour chaque items mais qui prenne la longeur du texte.

ce qui fait que chaque block serait de largeur differente.

ci joint une image de ce que j'aimerai faire

je me doute qu'il faille modifier le css du module mais j'ai pas trop d'idée

pouvez vous m'aidez ?

[Arnaud Drieux]

Salut phil

Alors c'est déjà pas mal que tu sache que c'est le css du module et pas le global.css

Sinon en premier il faudrait que tu te fasses tu lamelle de background comme sur la photo ci-jointe, que tu vas répéter sur x

soit par exemple

background: transparent url(htttp://bababa/..../mondossier/fon-menu.jpg) repeat-x left top;

T'auras déjà tout ton fond fait.
Pour ajouter la petite bordure bleu sur la gauche de chaque bouton, il te faut ça

border-left: 1px solid #codedetacouleur;

Ensuite il faudra que tu colles un autre fond pour le dernier bouton voir la deuxieme image
et du coup pareil que l'autre sans répétition

background: transparent url(htttp://bababa/..../mondossier/fon-menu-droite.jpg) no-repeat left top;

Et là tu dois enlever la bordure sur ce dernier sinon ça va pas faire beau. Donc

border-left:none;

et si ça marche pas, parce que la bordure des boutons prend le dessus, tu mettras ça

border-left:none !important;

Normalement it's good

Bonne journée

[phil3001]

bonjour et merci pour l'aide

le problème c'est que j'ai du faire une erreur car ca marche pas.

le border left reste a l'extremité gauche et ne se repete pas.


en plus je voudrais que l'espacement horizontal du séparateur s'ajuste à la taille du texte.


merci encore

.sf-menu {
   -moz-background-clip: border;
   -moz-background-origin: padding;
   -moz-background-size: auto auto;
   background-attachment: scroll;
   background-image: url("../img/essai.jpg");
   background-position: left top;
   background-repeat: repeat-x;
   border-left-color-ltr-source: physical;
   border-left-color-rtl-source: physical;
   border-left-color-value: red;
   border-left-style-ltr-source: physical;
   border-left-style-rtl-source: physical;
   border-left-style-value: solid;
   border-left-width-ltr-source: physical;
   border-left-width-rtl-source: physical;
   border-left-width-value: 1px;
   float: left;
   height: 53px;
   line-height: 1.2;
   margin-bottom: 0.8em;
   margin-left: -2px;
   margin-top: -26px;
   padding-bottom: 0;
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 0;
   width: 959px;

[Arnaud Drieux]

Bizarre tout ce code.

le border et la taille qui s'ajuste au texte, c'est dans la partie li {} qu'il faut regarder .sf-menu {} étant l'intégralité du menu.

Dans l'ordre :
.sf-menu - tout le menu entier
.sf-menu li - les liens
.sf-menu li a - le texte présent dans les liens.

Pour résumer ton border-left et ton width:auto , sont à mettre dans la partie sf.menu li {

[phil3001]

bonjour,

super ca commence à prendre forme

j'ai encore quelques questions

il y a un 'border' sur la partie droite de la barre de recherche et j'aimerai le supprimer

Comment faire en sorte que les barres verticales descendent sur toute la hauteur de mon image

et la dernière est que j'aimerai que la barre noire soit plus à droite mais je n'y arrive pas. quand j'essaie quelque chose c'est tout qui se déplace.

j'y ai mis l'image afin que ce soit plus simple pour m'aider.

merci

[Arnaud Drieux]

il faut que tu prennes le code de l'onglet recherche et lui placer un

border-right: none !important;

sinon pour la hauteur des images, regarde si ce n'est pas a cause des padding dans

li {

Et pour le noir, ben c'est juste la taille qu'il faut que tu definisses la taille