Votre question

Modifier Menu Barre de navigation

Tags :
  • CSS
  • barre de navigation
  • menu
  • Programmation
Dernière réponse : dans Programmation
27 Avril 2012 11:22:58

Bonjour,
Voici l'adresse de mon site bâti avec wordpress : www.julien-sarcome.fr
La dispostion de la barre de navigation ne me convient pas. Comme vous pouvez le constater, j'ai mis l'arrière plan en blanc lors du survol des liens, mais le blanc ne concerne que "le tour du texte" et non toute la case.

Je souhaiterais obtenir le même effet que sur la barre de navigation de ce site : http://wpchannel.com/creer-menus-personnalises-wordpres...

C'est à dire la case pleine qui devient entièrement blanche lors du survol.
Quelqu'un pourrait-il m'aider en me disant où supprimer les petites marges qui semblent entourer mes liens ?

Merci d'avance !

Autres pages sur : modifier menu barre navigation

a c 232 L Programmation
27 Avril 2012 14:04:08

Salut,

Pour reproduire la même chose, il faut que tu mettes tes <a> à l'intérieur en display:block, et que tu supprimes les marges/paddings de tes <ul> et <li>

En clair il faut que tu aies ça :
  1. nav ul {
  2. padding: 0;
  3. }
  4. nav ul li {
  5. margin:0;
  6. }
  7. nav a {
  8. display:block;
  9. padding: 9px 20px 5px 25px;
  10. }


(A noter que pour le nav ul et le nav ul li, tu as déjà des valeurs de padding/margin, il faut les supprimer. Pour le nav a, il suffit d'ajouter les 2 propriétés données)
27 Avril 2012 19:03:41

Bonjour,
Merci de votre réponse. C'est ce que j'ai fais mais je n'obtiens toujours pas le résultat escompté.
Voici mon CSS :

  1. nav {
  2. display: block;
  3. margin: 10px -10px 0 -10px;
  4. font-family: arial;
  5. font-size: 14px;
  6. position: relative;
  7. padding: 0 30px;
  8. }
  9. nav a {
  10. display:block;
  11. padding: 9px 20px 5px 25px;
  12. color: #fff;
  13. text-decoration: none;
  14. }
  15. nav a:hover {
  16. border-bottom: 1px dashed #fff;
  17. background-color: #fff;
  18. }
  19. nav ul {
  20. padding: 0;
  21. }
  22. nav ul li {
  23. margin: 0;
  24. }
  25. nav ul ul {
  26. display: block;
  27. }
  28. nav ul ul li {
  29. min-width: 180px;
  30. padding: 0;
  31. }
  32. nav ul ul li a {
  33. margin: 0;
  34. }
  35. nav ul ul ul {
  36. left: 100%;
  37. top: 0;
  38. }
  39. nav ul li:hover > ul {
  40. display: block;
  41. }
  42. nav ul li.current_page_item > a, nav ul li.current-menu-ancestor > a, nav ul li.current-menu-item > a, nav ul li.current-menu-parent > a {
  43. border-bottom: 1px dashed #fff;
  44. color:#FFF;
  45. }
  46. /* --- --- [ nav-below ] --- --- */
  47. #nav-below {
  48. margin: 0px 0 20px 0;
  49. padding: 0px;
  50. }
  51. #nav-below a {
  52. color: #FFF;
  53. text-decoration: none;
  54. }
  55. #nav-below a:hover {
  56. border-bottom: 1px dashed #fff;
  57. background-color: #fff;
  58. }
  59. #nav-below .nav-previous {
  60. margin-left: 20px;
  61. padding: 9px 0;
  62. }
  63. #nav-below .nav-next {
  64. margin-right: 10px;
  65. padding: 9px 0;
Contenus similaires
a c 232 L Programmation
28 Avril 2012 01:15:33

Il ne doit pas tout y avoir ici, parce que tu avais des valeurs par défaut pour nav ul et nav ul li, que je ne vois pas ici.
Comme j'ai écris à la fin de mon message, pour le padding et margin pour nav ul et nav ul li, il faut supprimer les valeurs qu'il y a déjà.
30 Avril 2012 11:11:47

Oui après vérification j'avais uploadé le mauvais fichier style.
Effectivement avec la configuration que vous m'avez conseillé, le résultat est presque parfait, il ne me reste plus qu'une légère marge récalcitrante en bas.
Je n'arrive pas à la situer avec firebug
a c 232 L Programmation
30 Avril 2012 11:52:29

J'ai aussi un peu galéré pour le trouver... Mais ça a l'air de venir du display:inline-block sur le <ul>.

Une autre solution que le inline-block, c'est d'utiliser overflow:auto pour ton nav ul :
  1. nav ul {
  2. list-style: none;
  3. padding: 0;
  4. overflow: auto;
  5. }


Par contre, à voir si ça marche bien avec IE7/8 (de toute manière, il ne me semble pas que inline-block soit reconnu par IE7).
Je sais que généralement, j'évite les overflow:auto, car ça peut amener d'autres problèmes et il y a souvent une meilleure façon de faire ça, par exemple en ajoutant une div pour faire un clear avant la fin du bloc:
  1. <ul>
  2. <li ... />
  3. <li ... />
  4. <div style="clear:both"></div>
  5. </ul>


Le problème c'est que normalement faut pas mettre autre chose qu'un <li> dans un <ul>, donc le overflow:auto devrait être plus approprié


Edit: et tu peux me tutoyer... Par contre, j'ai pris l'habitude de tutoyer sur internet, si ça dérange dis-le moi :) 
30 Avril 2012 12:07:17

Super résultat avec le overflow, à priori pas de problème de compatibilité sur IE. Merci beaucoup :) 

Pas de problème pour le tutoiement, cela ne me gène pas.
De plus tu m'as apporté des réponses plusieurs fois déjà donc un grand merci.

Au risque d'abuser, j'ai un problème différent sur un autre site et je n'ai pas pu obtenir de réponse sur la communauté Wordpress.
Il s'agit de www.radicalepil.net
Je cherche à intégrer, dans ma sidebar de droite, un widget avec un menu accordéons des mes articles (qui représentent en fait les différents services de l'institut).
J'ai essayé 4 ou 5 widget différents, soit cela m'affiche les différents articles les uns à la suite des autres de manière très inesthétique et sans accordéon, soit cela m'affiche directement le code (si je passe par un widget de contenu HTML). Je pense qu'il y a un problème dans la compatibilité de mon thème (stravolinoMagazine) avec les widgets.

J'ai déjà modifié les valeurs suivantes dans le functions.php (%1$s et %2$s) pour une meilleure compatibilité mais j'obtiens le même résultat.
'before_widget' => '<div id="side-widget %1$s" class="side-widget %2$s">',
'after_widget' => '</div>',

As-tu une idée de l'endroit d'où cela provient ?
a c 232 L Programmation
30 Avril 2012 13:57:46

Je ne connais pas les fonctions internes de Wordpress, mais si c'est affiché de manière inesthétique, c'est certainement parce qu'il manque un fichier css et ou un fichier javascript ?
Possible que le thème ne soit pas compatible au départ, mais tu dois pouvoir modifier le style css de ton widget pour le rendre compatible normalement.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS