membre13 Posted April 24, 2013 Share Posted April 24, 2013 Bonjour à tous, Je viens de faire développer un site sur prestashop mais j'aimerais devenir indépendant et pouvoir maitriser les bases. je souhaiterais modifier la taille des boutons de ma barre de menu principal de page d'accueil. Plus précisement, je vais supprimer l'un des liens donc j'aimerais réorganiser la barre correctement pour ne pas qu'il y ait un bouton vide ou des différences de taille. J'ai téléchargé filezilla pour avoir accès au FTP, je me retrouve devant de nombreux fichiers et je ne sais vers lequel m'orienter. Comment faire? Dîtes moi si en tant que débutant je peux arriver à effectuer cette modification? Merci de votre aide. Link to comment Share on other sites More sharing options...
Dev On Web Posted April 24, 2013 Share Posted April 24, 2013 Bonjour, Utilisez Firebug avec votre navigateur afin d'identifier le fichier où se trouve la ligne CSS que vous devez modifier. Link to comment Share on other sites More sharing options...
membre13 Posted April 24, 2013 Author Share Posted April 24, 2013 Bonjour, Merci pour votre aide. J'ai téléchargé Firebug, j'ai localisé la ligne à modifier avec le html: <ul class="sf-menu sf-js-enabled sf-shadow"> Cependant je n'arrive pas à trouver le css correspondant. Pouvez-vous m'indiquer comment faire ? Merci par avance. Link to comment Share on other sites More sharing options...
membre13 Posted April 24, 2013 Author Share Posted April 24, 2013 C'est bon je viens de trouver comment faire. Par contre je n'arrive pas à réduire la largeur des boutons avec la simulation intégrée à Firebug, savez-vous quelle est le nom du champ à modifier? Merci. Link to comment Share on other sites More sharing options...
Yaku Posted April 24, 2013 Share Posted April 24, 2013 Bonjour, C'est très certainement l'attribut "width" soit en pixel (px) soit en pourcentage (%). Link to comment Share on other sites More sharing options...
membre13 Posted April 24, 2013 Author Share Posted April 24, 2013 Bonjour, Oui il y a un attribut "width", cependant lorsque je sélectionne un bouton dans la barre de menu du site avec firebug et que je modifie l'attribut c'est le texte qui se décale et non pas les lignes séparatrices du bouton concerné. En revanche quand je sélectionne la barre entière les extrémités se raccoucirssent. Au final mon problème c'est que je n'arrive pas à sélectionner chacun des boutons indépendamment pour modifier leurs dimensions. Link to comment Share on other sites More sharing options...
Yaku Posted April 24, 2013 Share Posted April 24, 2013 Bonjour, Oui il y a un attribut "width", cependant lorsque je sélectionne un bouton dans la barre de menu du site avec firebug et que je modifie l'attribut c'est le texte qui se décale et non pas les lignes séparatrices du bouton concerné. En revanche quand je sélectionne la barre entière les extrémités se raccoucirssent. Au final mon problème c'est que je n'arrive pas à sélectionner chacun des boutons indépendamment pour modifier leurs dimensions. Tu peux envoyer un lien vers la page concernée que je regarde avec firebug? Link to comment Share on other sites More sharing options...
membre13 Posted April 24, 2013 Author Share Posted April 24, 2013 Ok merci. Voila le lien: http://www.dynveo.fr Il s'agit de la barre de menu verte. J'aimerais modifier la taille des boutons des liens "huile de krill" et "trans resveratrol" pour qu'ils aient une longueur identique. Link to comment Share on other sites More sharing options...
Yaku Posted April 24, 2013 Share Posted April 24, 2013 Le problème c'est l'image de fond utilisée dans ton menu qui inclut les séparations grises : http://www.dynveo.fr/modules/blocktopmenu/img/fd-menu.jpg Ces séparations ne sont donc pas calculées automatiquement en fait avec la taille de tes balises "li" qui incluent les textes de tes différents menus. Je pense donc qu'il te faut refaire ton image de fond en enlevant les séparations grises et donc faire une image totalement verte de la même taille ou bien revoir le style du div en prenant cette image en 1px de large qui se répète en x c'est à dire que l'image se répétera autant de fois qu'il faut pour remplir toute la largeur de ton menu. Et les séparations grises tu pourras les faire avec un style sur tes balises li. Ce n'est peut être pas très clair ce que je dis... Si tu ne vois pas, je tâcherais de te donner des exemples plus précis. Link to comment Share on other sites More sharing options...
membre13 Posted April 24, 2013 Author Share Posted April 24, 2013 Merci. Je comprends tout à fait ce que tu me dis par contre je ne sais pas comment le retranscrire dans le code. L'option deux me semble plus simple: répéter l'image. Qu'appelles tu "div"? Comment faire ensuite pour intégrer les séparations grises? Merci encore. Link to comment Share on other sites More sharing options...
Yaku Posted April 24, 2013 Share Posted April 24, 2013 Bon j'ai testé ça vite fait mais je n'ai pas le temps de faire mieux car je dois partir. Mais tu peux déjà faire ça pour te donner une idée. Dans un premier temps, supprime les width:260px qu'il y a ta balise li et à la balise a du menu "Trans Resveratrol" (fais une recherche de "width:260px" dans tes fichiers pour trouver dans quel fichier ça se situe). Puis fais une copie quelque part de ton fichier "superfish-modified.css" et remplace le code du fichier par : .sf-contener { background-color: #90CD54; border-radius: 4px 4px 4px 4px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); clear: both; height: 53px; width: 976px; } .sf-right { display: none; } .sf-menu, .sf-menu * { list-style: none outside none; margin: 0px; padding: 0px; } .sf-menu { float: left; height: 37px; margin: 8px; padding: 0px; width: 960px; } .sf-menu ul { position: relative; } .sf-menu li:hover { visibility: inherit; } .sf-menu li { border-right: 1px solid #CCCCCB; float: left; position: relative; text-align: center; width: 15%; } .sf-menu li#fin { border-right: 0px solid #CCCCCB; } .sf-menu li#home { width: 5%; } .sf-menu li#home a { height: 32px; padding-top: 5px; width: 49px; } .sf-menu li a { color: #FFFFFF; display: block; font-size: 17px; height: 37px; line-height: 35px; position: relative; text-decoration: none; text-shadow: 0px 1px 1px #1B1B1B; } .sf-menu li#home a:hover, .sf-menu li a:hover { background: none repeat scroll 0px 0px #71BA2C; } .sf-menu li a .sf-sub-indicator { display: none; } .sf-menu li li, .sf-menu li li li, .sf-menu li li li li { display: none; } Ensuite, il te faudra créer un style spécifique pour le dernier menu "Blog" pour qu'il n'y ait pas de trait gris sur la droite comme c est le dernier menu. Il faudra aussi modifier les styles qui s'applique au survol des liens du menu et puis réajuster selon ce que tu veux ovtenir au final mais c'est déjà un premier jet de ce que tu peux faire comme modifications pour obtenir autre chose sans utiliser l'image de fond. Je repasserai ici demain Bon courage! Heureusement, comme beaucoup de chose, le CSS est bien documenté sur internet ce qui pourra grandement t'aider. Link to comment Share on other sites More sharing options...
membre13 Posted April 24, 2013 Author Share Posted April 24, 2013 Ok parfait. Je vais prendre le temps de regarder. Bonne soirée. Merci. Link to comment Share on other sites More sharing options...
Yaku Posted April 25, 2013 Share Posted April 25, 2013 Des nouvelles? Link to comment Share on other sites More sharing options...
membre13 Posted April 25, 2013 Author Share Posted April 25, 2013 Salut, En fait je n'arrive pas à retrouver le width:260px sur filezilla. J'arrive à localiser sur firebug mais comment ensuite savoir dans quel fichier il se trouve? J'ai par contre trouvé "superfish-modified.css" sur filezilla. Merci. Link to comment Share on other sites More sharing options...
Yaku Posted April 26, 2013 Share Posted April 26, 2013 Bonjour, Il faut que tu rapatrie tous les fichiers sur ton disque et que tu fasses la recherche avec ton éditeur web dans le dossier où sont situés les fichiers. Bonne journée Link to comment Share on other sites More sharing options...
membre13 Posted April 26, 2013 Author Share Posted April 26, 2013 Bonjour, Je n'ai pas d'éditeur web, lequel tu utilises? Est-il gratuit? Merci. Link to comment Share on other sites More sharing options...
Yaku Posted April 26, 2013 Share Posted April 26, 2013 J'utilise Dreamweaver mais il n'est pas gratuit. Tu peux utiliser Notepad++ qui est gratuit si je ne me trompe pas : http://notepad-plus-plus.org/fr/download/v6.3.2.html Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now