Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.


Ayant des problèmes de chargement des commentaires trop nombreux sur l'article original, je vous invite à laisser votre commentaire ici :)

Autres articles

120 commentaires:

  1. Salut j'ai créé mon menu déroulant mais quand je clique dessus ça m'écrit:Désolé, la page que vous recherchez dans ce blog n'existe pas.

    Je me demande quel est le problème.
    Le lien de mon blog: books-adventure.blogspot.fr


    J'espère que tu pourras m'aider, merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Ana,
      Si tu reçois cette erreur c'est qu'il y a une erreur dans l'adresse URL que tu as entré pour ce lien.
      Si tu souhaites renvoyer vers les articles d'un libellé il faut ajouter l'adresse URL de ce libellé dans le lien du menu comme expliqué dans la première partie du tutoriel sur la barre de navigation : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html

      Supprimer
  2. Bonjour ^^ je ne c'est même pas comment vous remercier pour tout vos conseille ^^ vous faites vraiment un travail fabuleux !!!!
    Mais évidement il y a vous et "moi", c'est pas facile pour tout le monde ^^
    J'ai donc une petite question. Comment puis je utiliser votre menu déroulant en y ajoutant une sous sous catégorie (heu donc du coup un menu sur trois niveaux) pour le code html sa fonctionne, mais il faudrait que je modifie le code CSS pour le décaler sur la droite car il apparait juste en dessous :-S je c'est pas si c clair ^^
    Merci d'avance !!!!!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour que les menus déroulants de 2e niveau s'affichent correctement, il faut ajouter les codes CSS suivants :

      .tabs .widget li:hover li ul {
      display: none;
      }

      .tabs .widget li li:hover ul {
      display: block;
      margin-top: -52px; /* Espace au-dessus */
      margin-left: 195px; /* Espace à gauche */
      }

      A la suite des codes CSS de tes menus déroulants.
      Remplace les valeurs par celles qui te conviennent.

      Ensuite ajoute la ligne suivante :

      overflow: visible;

      Avant le signe } de ce code :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 195px; /* Largeur de la barre des sous-catégories */
      padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index:9999;
      }

      Et voilà ;)

      Supprimer
  3. Merciiiiiiiiiiiiiii
    j'adore merci beaucoup !!!!

    RépondreSupprimer
  4. Coucou,

    J'ai fais le menu déroulant et les sous catégories, sauf que je n'arrive pas à faire en sorte que les sous catégories soient alignées avec leurs catégories respectives. Je ne suis pas très claire désolée ^^ Mais en gros lorsque je survole "catégories" mes sous catégories sont tout a gauche...

    Merci pour tout tes conseils :)

    RépondreSupprimer
    Réponses
    1. Bonjour Anne-Sophie,
      Dans le code suivant :

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      display: inline;
      float: none;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-right: 15px;
      padding-left: 15px;
      margin: 0px;
      }

      Il faut avoir inline-block après display, et non inline. Remplace donc la ligne :

      display: inline;

      Par :

      display: inline-block;


      Ensuite il faut corriger tes menus-déroulants.
      Retrouve ce code CSS :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 500px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 0px; /* Largeur de la barre des sous-catégories */
      padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index:9999;
      }

      Remplace la ligne :

      padding: 500px;

      Par :

      padding: 0;

      Et cette ligne :

      width: 0px;

      Par :

      width: 150px;


      Ensuite retrouve ce code CSS :

      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 5px; /* Distance au dessus des liens */
      padding-bottom: 5px; /* Distance en dessous des liens */
      padding-left: 10px; /* Distance à gauche des liens */
      text-align: right;
      }

      Remplace la dernière ligne par :

      text-align: left;


      Pour finir, corrige l'alignement horizontal de tes menus déroulants en modifiant la valeur de la ligne margin-left de ce code CSS :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 15px; /* Alignement avec le lien de la barre de navigation */
      }

      Une valeur positive, déplacera le menu vers la droite, une valeur négative vers la gauche ;)

      Supprimer
  5. Tes tutos sont juste tops et d'habitude je trouve la solution à mes problèmes comme une grande mais là je ne comprends pas car j'ai tout suivi à la lettre mais mes sous catégories restent affichés en permanence. Je ne comprends vraiment pas ce qui bloque.

    Merci d'avance :)
    http://dansleblogdesophie.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Je vois que tu as réglé le problème, tes menus déroulants s'affichent correctement ;)

      Supprimer
    2. Bonjour, oui et non :) En fait c'est dès que je souhaite suivre ton tuto afin de séparer la barre de menus en deux parties, les menus déroulants restent affichés :/

      Supprimer
    3. Bonjour Sophie,
      Le problème semble venir du code CSS pour aligner les 2 menus. Au lieu d'utiliser :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Utilise ce code :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Supprimer
    4. Je te remercie énormément, ta solution a fonctionné ! J'adore :)

      Supprimer
  6. Bonjour ! J'ai découvert ton blog cette semaine et il est génial !!! Merci pour toutes ces astuces! Je suis en train de créer mon blog, etj'ai créé ma barre de navigation selon ton tuto sans soucis. J'ai voili créer un menu déroulant, mais j'ai un soucis d'affichage. Mes sous -catégories s'affichent mais ne viennent pas en dessous de la catégorie, et elles restent affichées. Sais tu d'où peut venir le problème ??
    Merciiii

    RépondreSupprimer
    Réponses
    1. Bonjour Aurely,
      Ajoute ces codes CSS à la suite des codes CSS de ton menu déroulant :

      #barre_nav ul.first-nav li ul {
      display: none;
      }

      #barre_nav ul.first-nav li:hover ul {
      display: block;
      }

      Supprimer
  7. Bonjour,
    J'adore ton blog il est super, je ne savais pas que l'on pouvais faire autant de choses avec blogger !
    J'ai un petit souci dans ma barre menu je n'arrive pas à séparer les catégories j'ai du faire une erreur quelque part dans le codage.
    Voici mon blog pour voir ce qui ce passe : daylight-blog.blogspot.fr

    Sinon continue c'est super ce que tu fais vraiment !

    Et merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as simplement ajouté un espace en trop dans un des codes pour définir la marge autour des liens :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Arial;
      font-size: 18px;
      font-style: bold;
      text-decoration: none;
      color: #FEFEFE;
      margin-right: 10px;
      margin-left: 10 px;
      }

      Remplace la ligne :

      margin-left: 10 px;

      Par :

      margin-left: 10px;

      Supprimer
  8. Bonjour, j'ai suivi à la lettre pour faire le menu déroulant sauf que les sous catégories restent affichées et en plus elles ne sont pas en dessous de la "bonne" catégorie. En gros j'en ai sur 2 lignes. Comment faire ?
    Merci d'avance
    http://les-ateliers-au-paradis.blogspot.fr/

    RépondreSupprimer
  9. Re bonjour, j'ai maintenant un nouveau problème: à force de bidouiller les codes CSS , le fond de mon blog à disparut et il est maintenant tout blanc et impossible de le remettre comment faire ?
    Deuxième question (désolé) mes sous-catégories sont décalées vers la droite et elles restent apparentes comment faire pour qu'elles soient dessous la bonne catégorie et qu'elles apparaissent seulement quand on va sur la catégorie (j'espère mettre faite comprendre ...)
    Ton blog est génial j'adore !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu remettre les menus déroulant pour que je puisse voir d'où peut venir l'erreur ?

      Supprimer
  10. Bonjour,

    en suivant vos conseils j'ai un petit problème, pour mon menu déroulant j'ai bien mon menu initial et mes sous-catégories apparaissent en dessous alignées et non en cliquant dessus? merci de votre aide

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien vers ton blog pour que je puisse regarder le problème ?

      Supprimer
  11. Bonjour,

    en créant mon blog je me suis servie assidûment de vos articles de création et personnalisation de la barre de navigation et de menu déroulant.
    Mais je me suis rendue compte que depuis quelques temps le menu déroulant ne se déroulait pas, et pourtant il ne me semble pas avoir changé quelque chose dans le code html !
    J'ai essayé beaucoup de choses, j'ai même recréer un blog blogger où j'ai mis un code initial non modifié pour la barre de navigation et ça ne marche toujours pas...
    Pouvez vous m'aider ?
    L'adresse de mon blog initial : http://itsoh-solau.blogspot.com/
    L'adresse du nouveau blog où il y a que la barre de navigation : http://by-lau.blogspot.fr/

    Merci d'avance ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Sur ton blog initial les codes HTML et CSS de tes menus déroulants sont manquants. Essaye de les remettre car sans je ne peux pas voir d'où vient le problème :/

      Supprimer
  12. Bonjour Catherine.
    J'aimerais savoir comment on peut modifier la couleur de fond du premier lien du menu de navigation au survol de la souris. (par exemple sur mon blog les liens: Accueil, soins, maquillage, outfits, ...)
    Dans ce tuto, tu nous a expliqué comment faire pour les sous-catégories.
    Je voulais aussi savoir comment enlever les bordures en haut de la première sous-catégorie et en bas de la dernière sous-catégorie.
    Peux-tu m'aider?
    J'adore ton blog!
    Merci pour tout ce que tu nous apprends.
    Tiphaine - https://beaute-et-legerete.blogspot.be/

    RépondreSupprimer
    Réponses
    1. Bonjour Tiphaine,
      Pour cela il faut apporter quelques modifications au code CSS de ton menu.
      Retrouve ce code :

      /* Définit une largeur maximale pour le contenant du menu */
      #barre_nav div {
      max-width: 1100px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      }

      Remplace la ligne :

      margin: 0 auto;

      Par :

      margin: 0 auto -5px;

      Ensuite trouve cette ligne :

      /* Columns

      Juste au-dessus de cette ligne colle :

      .first-nav > li:hover {
      background-color: #F9F7FF; /* Couleur de fond des liens du menu au survol de la souris */
      }

      Et voila ;)

      Supprimer
    2. Chère Catherine,
      Je t'embête encore...
      On y est presque.
      J'aimerais que les liens dans ma barre de navigation soient centrés en hauteur entre mes bordures, que leur background ne déborde pas sur la bordure inférieure et qu'ils aient la même épaisseur que les liens des sous-cat. ou que les sous-cat aient la même épaisseur que les bloc des liens de la barre de nav.
      Et pour finir, j'aimerais que les blocs sous-catégorie soient alignées à gauche avec celui du lien de la barre de navigation ainsi que le texte.
      En fait, un truc tout propre comme dans ton tuto :)

      C'est vraiment dommage qu'on ne puisse pas te faire un petit dessin car j'ai l'impression de ne pas bien expliquer.

      J'espère que tu ne vas pas me détester après toutes ces questions.
      Merci pour ta précédente réponse

      Tiphaine

      Supprimer
    3. Bonjour Tiphaine,
      Pas de soucis, j'ai compris ;)
      Tout d'abord, avant d'apporter des modifications, il faut que tu déplaces les codes CSS pour tes menus déroulants. Ils sont avant les codes CSS pour ton menu, or ils devraient être après. Simplement parce que certains codes des menus déroulants vont prendre le dessus sur les codes du menu. Or pour cela, ils doivent être placés après les codes du menu.
      Retrouve ces codes CSS :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 100px; /* Largeur de la barre des sous-catégories */
      padding-top: 5px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index:9999;
      }
      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: auto; /* Alignement avec le lien de la barre de navigation */
      }
      .tabs .widget li li {
      display: block;
      float: none;
      margin: 0px;
      padding: 0px;
      width: 100px; /* Largeur de la barre des sous-catégories */
      }
      .tabs .widget li:hover li a {
      background-color: #FFFFFF; /* Couleur du fond du lien */
      }
      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 15px; /* Distance au dessus des liens */
      padding-bottom: 10px; /* Distance en dessous des liens */
      padding-left: 10px; /* Distance à gauche des liens */
      text-align: left;
      }
      .tabs .widget ul ul a {
      color: #9B8FB5; /* Couleur des liens */
      }
      .tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
      color: #8e7cc3; /* Couleur des liens quand survolés par la souris */
      background-color: #F9F7FF; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }

      Et déplace-les avant la ligne :

      /* Columns

      Ensuite, trouve ce code CSS :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Calibri;
      font-size: 12px;
      font-style: normal;
      text-decoration: none;
      color: #8e7cc3;
      text-transform: uppercase;
      padding-right: 15px;
      }

      Et supprime la ligne :

      padding-right: 15px;

      Cette ligne ajoute un espace à droite de tous les liens de ton menu, d'où ce petit décalage des liens sur la gauche.

      Retrouve maintenant ce code :


      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Supprime les !important comme ceci :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block;
      margin-left: 0;
      margin-right: 0;
      }

      Maintenant retrouve ce code :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 100px; /* Largeur de la barre des sous-catégories */
      padding-top: 5px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index:9999;
      }

      Remplace la ligne :

      padding-top: 5px; /* Distance entre barre des sous-catégories et barre de navigation */

      Par :

      padding-top: 11px; /* Distance entre barre des sous-catégories et barre de navigation */
      margin-left: -15px !important;

      Ceci décalera tes menus déroulants vers la gauche des liens du menu, et les déplacera sous la bordure du menu.

      Pour finir, trouve ce code :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Calibri;
      font-size: 12px;
      font-style: normal;
      text-decoration: none;
      color: #8e7cc3;
      text-transform: uppercase;
      padding-right: 15px;
      }

      Et ajoute la ligne :

      line-height: 1;

      Avant le signe }

      Tous tes liens (du menu et des menus déroulants) auront maintenant les mêmes marges au-dessus, en-dessous et sur les côtés des liens.

      Supprimer
    4. Super Catherine! Tout marche à merveille! Merci beaucoup!
      Bien à toi!
      Tiphaine

      Supprimer
  13. Coucou Catherine ! Comment vas-tu ? J'ai un soucis avec mon menu déroulant. Il est directe sous le texte et j'aimerais qu'il soit tout la barre grise du menu. Comment je pourrais faire ?
    Et je crois que c'est ça qui m'empêche de faire un menu déroulant dans un menu déroulant.

    Merci à toi pour ton aide !

    www.m-art-rion.blogspot.ch

    RépondreSupprimer
  14. Re ! :)
    En faite j'ai réussi à mettre l'espace sous le menu pour le menu déroulant mais maintenant je n'arrive pas à avoir le survol du lien du menu en blanc. J'y arrive mais seulement en surlignant le texte. J'aimerais que ça fasse la largeur du menu.
    Je ne sais pas si je me fais comprendre...

    www.m-art-rion.blogspot.ch

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      As-tu réussis à modifier la couleur au survol ? Car en survolant les liens de tes menus-déroulants, le fond des liens est blanc ;)

      Supprimer
  15. Hello ! Merci pour tous ces tutos c'est génial ! Je débute encore, mais grâce à toi je commence à comprendre un peu le codage c'est vraiment cool. Du coup mon blog n'est qu'une ébauche pour le moment donc ne prend pas peur. J'ai une petite question, j'ai voulu mettre un menu déroulant et j'ai réussi sauf que le menu se trouve tout à gauche du coup on ne peut pas cliquer dessus je n'arrive pas à le modifier. Peux-tu m'aider stp ? Merciii

    J'ai également l'impression que mon en-tête n'est pas centrée comment faire stp ?
    http://mariealafolie.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      Je vois que tu as réussi à régler le problème de ton menu déroulant.
      Pour ton image d'en-tête, ajoute le code CSS suivant :

      img#Header1_headerimg {
      margin: 0 auto;
      }

      Avant la ligne :

      ]]></b:skin>

      Supprimer
  16. Bonjour,
    Je vous remercie pour ce tutoriel qui aide beaucoup. J'ai un souci puisque avec mon thème, je devais avoir directement un menu déroulant sauf que depuis quelques temps, les sous catégories apparaissent dans le menu comme des catégories et je ne sais pas comment le modifier.
    J'ai essayé de demander de l'aide au vendeur du thème mais il ne veut pas puisque d'après lui, c'est le fait d'avoir modifié l'apparence du lien vers l'article qui a modifié le menu déroulant.
    Voici le lien de mon blog: http://simplymaissa.blogspot.fr/
    Merci d'avance,
    Maïssa

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      Le problème c'est que je ne sais pas comment le thème à été créé pour afficher les menus déroulants.
      As-tu apporté des modifications à ton code CSS qui modifieraient l'apparence des liens ?
      Si tu as effectué une sauvegarde de ton thème avant d'apporter les modifications, charge ta sauvegarde. Sinon, je te conseil de charger le fichier du thème que tu as eu en le téléchargeant.

      Supprimer
  17. Bonjour, je me permets de vous écrire car je n'arrive pas à finir la création de mon menu déroulant.
    Les sous catégories apparaissent mais elles sont complètement décallées. J'ai essayé plusieurs fois pensant que j'avais fais une erreur mais je n'arrive pas à régler le problème. Pourriez vous m'aider s'il vous plait. Je vous remercie par avance.

    Lien du blog: http://cecile-esbrat.blogspot.com.es/

    RépondreSupprimer
    Réponses
    1. Bonjour Cécile,
      Je ne vois pas le code HTML ni les codes CSS de tes menus déroulants sur ton blog. Je ne peux pas te dire d'où vient le problème. Vérifie bien que tu as le code suivant :

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      Et :

      .tabs-outer {
      overflow: visible;
      }

      Supprimer
  18. Bonjour, j'essaye de mettre mon menu déroulant au dessus du titre sauf qu'il ne se met pas dans la même mise en page que dans ton article et je ne vois pas d'où cela peut venir. Je te laisse mon blog : http://etincellesdemots.blogspot.fr/ Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Attention tu as déplacé ton menu dans ton en-tête, il faut coller le code HTML de ton menu avant la ligne :

      <header>

      Supprimer
    2. Ensuite n'oublie pas de modifier tous les codes CSS que tu avais pour ton menu, pour que l'apparence de ton menu reste le même ;)

      Supprimer
    3. Désolé de vous re-déranger, mais malgré avoir mis le code HTML avant la balise, ça ne change rien ! Qu'est-ce-que je fais mal ? Y'a-t-il une parti du code HTML que je n'ai pas vu ? Merci de votre réponse :)

      Supprimer
    4. Bonjour,
      Le code HTML est bien placé. Maintenant il faut remplacer les codes CSS pour qu'ils ciblent le menu, comme expliqué dans ce tutoriel ;)

      Supprimer
  19. Coucou! J'ai un petit problème avec mon menue déroulant; il y à un espace transparent entre le lien et la bordure, je voudrais qu'il soit blanc comment est ce que je peux faire? Merci d'avance! http://darkmaterialworld.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      Le problème vient d'une marge autour des liens de tes menus déroulants. Retrouve ce code CSS :

      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 5px;
      padding-top: 0px; /* Distance au dessus des liens */
      padding-bottom: 5px; /* Distance en dessous des liens */
      padding-left: 10px; /* Distance à gauche des liens */
      text-align: left;
      }

      Remplace la valeur de la ligne suivante par 0 :

      margin: 5px;

      Et voilà ;)

      Supprimer
  20. Bonsoir Catherine,
    J'ai créé mon menu ainsi que ma sous-catégorie en suivant tes tutos. Toutefois le lien de ma sous-catégorie reste affiché sous mon menu et je n'ai pas réussi à trouver le moyen de résoudre ce problème...
    Peux-tu me venir en aide stp ?

    Lenny

    RépondreSupprimer
    Réponses
    1. Bonjour Lenny,
      As-tu réglé le problème ? Car en allant sur ton blog je ne rencontre pas ce soucis.

      Supprimer
    2. Bonsoir,
      Non mon problème n'est pas réglé, je pense que tu ne le vois pas car mon lien et blanc comme la couleur de l'entête du blog.
      Si tu descends un peu sur le blog en te mettant sur l'image d'un de mes articles tu pourras voir ce qui cloche...

      Merci de prendre le temps pour m'aider à résoudre mes multiples problèmes, je te dois une fière chandelle !

      Supprimer
    3. Ah oui effectivement je ne l'avais pas vu ! ^^
      Essaie de déplacer tous tes codes CSS pour tes menus déroulants après les codes CSS de ton menu, donc juste avant la ligne :

      /* Columns

      En fait, l'ordre des codes CSS dans le thème à une incidence sur ce qui va être pris en compte. Les derniers codes CSS de la liste de codes vont prendre le dessus de ceux qui les précèdent. Or les codes des menus déroulants doivent prendre le dessus des codes du menu pour bien fonctionner ;)

      Supprimer
    4. Je dois sûrement mal m'y prendre mais ça n'a pas fonctionné... J'ai décidé de laisser tomber et de faire autrement.

      Merci quand même ^^

      Supprimer
  21. Bonjour, je viens de créer mon menu déroulant en suivant toutes les instructions.
    Le problème c'est pour le mettre en forme en allant dans "Modèle" puis "Modifier le code HTML", je ne trouve pas le code :

    .tabs .widget li, .tabs .widget li {

    Et ça, même en faisant Ctrl + F et en le collant dans la barre de recherche.
    Aurais-tu une solution ? Merci par avance.

    Mon blog : http://leslecturesdaymerie.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Aymerie,
      Tu peux rajouter le code donné si tu ne le trouves pas. Ajoute ce code avant la ligne :

      /* Columns

      Supprimer
  22. Bonsoir,
    J'ai bien suivi le tuto, d'ailleurs merci parce que c'est génial ! Mais petit souci, les sous-catégories apparaissent en-dessous de mes catégories de sorte que j'ai un menu à rallonge sur 3 lignes. Peux-tu m'aider stp ?

    RépondreSupprimer
  23. J'ai oublié mon blog c'est www.lemondestunlivre.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien ajouté les codes CSS qui vont définir l'apparence des menus déroulants ? Ces codes vont définir l'affichage des listes de liens sous forme de menu déroulant ;)
      Sit tu les as déjà ajouté, vérifie qu'il n'y a pas une erreur dans tes codes CSS. Vérifie qu'il n'y a pas un signe en trop ou manquant parmi les suivants :

      { : ; } /* */

      S'il manque un seul signe ou qu'il y en a un en trop, alors tout ce qui suit cette erreur n'est pas, ou mal pris en compte par le navigateur.
      Vérifie également les codes CSS qui précèdent les codes CSS de ton menu déroulant.

      Supprimer
    2. Bonjour,

      Je ne trouve pas le code : .tabs .widget li, .tabs .widget li {
      Comment faire ?

      Supprimer
    3. Eidt: en fait moi j'ai ça .tabs-inner .widget li a {

      En faisait cela, ça ne change rien : .tabs-inner .widget li a {
      display: inline-block;
      float: none;
      }

      .tabs-outer {
      overflow: visible;
      }

      Supprimer
    4. Bonjour,
      C'est normal que cela ne change rien avec .tabs-inner .widget li a { car ce n'est pas le bon code ;)
      Il te suffit d'ajouter :

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      A ton code CSS, avant la ligne suivante par exemple :

      /* Columns

      Supprimer
    5. Bonjour, désolé de te dérange encore mais je suis complètement perdue. Je ne mets donc tout ce que j'ai dans la partie */ Tabs pour que tu me dises où est le problème

      /* Tabs
      ----------------------------------------------- */
      .tabs-inner .section:first-child {
      border-top: $(header.bottom.border.size) solid $(tabs.border.color);
      }

      .tabs-inner .section:first-child ul {
      margin-top: -$(header.border.size);
      border-top: $(header.border.size) solid $(tabs.border.color);
      border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
      border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
      }

      .tabs-inner .widget ul {
      background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
      _background-image: none;
      border-bottom: $(tabs.border.width) solid $(tabs.border.color);

      margin-top: $(tabs.margin.top);
      margin-left: -$(tabs.margin.side);
      margin-right: -$(tabs.margin.side);
      }

      .tabs-inner .widget li a {
      display: inline-block;

      padding: .6em 1em;

      font: $(tabs.font);
      color: $(tabs.text.color);

      border-$startSide: $(tabs.border.width) solid $(content.background.color);
      border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
      }

      .tabs-inner .widget li:first-child a {
      border-$startSide: none;
      }

      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      color: $(tabs.selected.text.color);
      background-color: $(tabs.selected.background.color);
      text-decoration: none;
      }

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      Supprimer
    6. Bonjour,
      Il manque tous les codes CSS qui vont définir l'apparence des menus déroulants. Ces codes vont définir l'affichage des listes de liens sous forme de menu déroulant ;)
      Continue le tutoriel à partir de la partie personnalisation du menu déroulant.

      Supprimer
    7. Génial, merci ! Je me sens un peu bête de ne pas avoir suivi tout le tutoriel ^^ Par contre, comment faire pour bien espacer les noms des catégories ? Comme tu peux le voir sur mon blog, c'est tout serré et ce n'est pas très joli. Également, comment changer la couleur du fond de la barre de navigation ? Merci et désolé je ne suis pas très douée ^^

      Supprimer
    8. Bonjour,
      En fait, les codes CSS de tes menus sont à coller sous /* Tabs à la place de tes codes CSS existants. Du coup, comme les 2 versions de codes existent, ils entrent en conflit et l'apparence de ton menu n'est pas correctement pris en compte.

      Supprime les codes CSS qui se trouvent entre :

      /* Tabs
      ----------------------------------------------- */

      Et :

      /* Columns

      Déplace tous les codes CSS de ton menu (avant /* Content ) Avant la ligne :

      /* Columns

      Supprimer
    9. Bonjour,
      J'ai fais ce que tu as dit mais malheureusement cela n'a rien changé, les catégories sont encore collées les unes aux autres :/

      Supprimer
    10. Bonjour,
      Je ne vois plus aucun code CSS pour ton menu :/
      Tu as bien supprimé les codes CSS entre /* Tabs et /* Columns mais tu n'as pas déplacé les codes de ton menu avant /* Columns. Les as-tu supprimé ?

      Supprimer
    11. Oui j'ai supprimé et les codes sont avant */Content

      Supprimer
    12. Les codes avant /* Content sont les codes de tes menus déroulants et non de ton menu de base. Il manque toute la partie des codes CSS pour le menu de base.

      Supprimer
    13. Et je fais comment alors pour les retrouver ?

      Supprimer
    14. Bonjour,
      Reprend les codes CSS de ce tutoriel et ajoute-les avant les codes CSS de tes menus déroulants qui doivent se trouver juste après ceci :

      /* Tabs
      ----------------------------------------------- */

      Supprimer
    15. Enfin, je suis troop contente, merci beaucoup de ta patience et de tes conseils !! Ma soirée commence bien :D

      Supprimer
  24. Bonjour bonjour,
    Mes codes sous *Tabs/ ne marche pas du tout sur ma barre , je sais pas si c'est compréhensible mais, le menu déroulant, nickel, c'est la barre de base qui est pas bonne ): le fond est tout blanc alors qu'il devrait être légèrement jaune, le texte centré, et juste en dessous de la bannière ! J'ai loupé une étape ? :/

    http://le-boudoir-de-juliie.blogspot.fr/

    Merci beaucoup d'avance <3

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      As-tu remplacé ton menu par un gadget Pages ?
      Pour ce qui est du problème de l'apparence du menu, vérifie qu'il n'y a pas une erreur dans tes codes CSS. Vérifie qu'il n'y a pas un signe en trop ou manquant parmi les suivants :

      { : ; } /* */

      S'il manque un seul signe ou qu'il y en a un en trop, alors tout ce qui suit cette erreur n'est pas, ou mal pris en compte par le navigateur.
      Vérifie également les codes CSS qui précèdent les codes de ton menu ;)

      Supprimer
    2. Tu peux supprimer mes autres commentaires ahah ! j'ai tout trouvé !!! :D ça prend du temps, maiiis quand on fouille bien ! :P C'est donc tout bon ! Mon blog est PARFAIT, pile ce que je voulais !! ♥♥ Et ça, grâce à toi ! MERCI

      Supprimer
  25. Bonjour Catherine !
    Au moment de créer mon deuxième menu déroulant, ma deuxième barre de navigation (celle des réseaux), s'est remise centrée en dessous de ma première barre de navigation. Mon menu global s'est également épaissi.
    Aurais-tu une solution pour régler tout ça ? Je ne comprend pas d'où ça vient... J'ai essayé tellement de réglages que je suis perdue.

    Un grand merci !

    www.harmonylu.com

    RépondreSupprimer
    Réponses
    1. Bonjour Harmony,
      Il semblerait que tu ais réglé le problème du positionnement de la 2e barre de navigation. Pour ce qui est de la marge autour de tes menus (et donc de son épaisseur) cela vient de ce code CSS :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      margin-top: 22px;
      margin-bottom: 22px;
      border-bottom: solid;
      border-bottom-color: #000000;
      border-bottom-width: 0px;
      background: #ffffff;
      text-align: center;
      }

      Tu peux réduire la valeur de ces 2 lignes :

      margin-top: 22px;
      margin-bottom: 22px;

      Qui correspondent respectivement à la marge au-dessus et en-dessous de tes menus ;)

      Supprimer
  26. Bonjour,
    Je n'arrive pas à faire le menu déroulant, j'ai pourtant suivi à la lettre les étapes indiquées du tutoriel.
    Pourriez-vous m'aider svp?

    Voici mon blog: http://glaoshi.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Laurie,
      Il y a des erreurs dans ton code HTML.
      Il faut placer le code HTML du menu déroulant avant le code </li> qui ferme le lien de ton menu. Or tes menus déroulants sont placés après les </li>.
      Déplace tes menus déroulants à partir de <ul> jusqu'à </ul> avant le code </li> des liens correspondants.
      Par exemple tu as :

      <li><a title="Culture chinoise" href="#">Culture chinoise</a></li>
      <ul>
      <li><a href="http://glaoshi.blogspot.fr/search/label/f%C3%AAtes%20chinoises">Fêtes chinoises</a></li>
      <li><a href="http://glaoshi.blogspot.fr/search/label/tutoriel">Tutoriels</a></li>
      </ul>

      Or tu devrais avoir :

      <li><a title="Culture chinoise" href="#">Culture chinoise</a>
      <ul>
      <li><a href="http://glaoshi.blogspot.fr/search/label/f%C3%AAtes%20chinoises">Fêtes chinoises</a></li>
      <li><a href="http://glaoshi.blogspot.fr/search/label/tutoriel">Tutoriels</a></li>
      </ul>
      </li>

      Supprimer
    2. Ca marche! Je te remercie beaucoup!

      Supprimer
  27. Bonjour ! J'ai essayé d'appliquer ce tuto mais lorsqu'il faut écrire : .tabs .widget li, .tabs .widget li { dans la boite de dialogue en haut à droite de la boite de code, je pèse sur Enter mais ça ne change rien du tout... Est-ce que tu sais d'où vient ce problème ? Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Erine,
      As-tu bien suivi mes tutoriels 1 et 2 pour créer ton menu ? Si oui et si tu ne trouves pas le code, vérifie bien que tu n'as pas ajouté d'espace avant ou après le terme de recherche dans le champ de recherche.

      Si vraiment tu ne le trouves pas, tu peux rajouter le code avant la ligne :

      /* Columns

      Supprimer
  28. Bonjour , j'ai suffit le tutoriel et réussi à crée un menu déroulant :) . Cependant mes catégories ne sont plus alignées les unes à côté des autres ( elles sont un peu dispersé sur mon menu ) et je ne trouve pas comment régler ce soucis

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as des <ul> et </ul> en trop dans le code de ton menu. Les signes <ul> et </ul> permettent respectivement d'ouvrir et de fermer un liste de liens. Tu devrais avoir 3 listes de liens :
      - les liens de 1er niveau de ton menu
      - les liens du 1er menu déroulant
      - les liens du 2e menu déroulant

      Or les liens de 1er niveau Beauté et Food sont dans une liste supplémentaire.

      Remplace le code HTML de ton menu par :

      <ul>
      <li><a title="ACCUEILL" href="http://popsqueens.blogspot.be/">ACCUEIL</a></li>
      <li><a title="BEAUTE" href="#">BEAUTE</a>
      <ul>
      <li><a href="http://popsqueens.blogspot.be/search/label/Makeup">MAKE UP</a></li>
      <li><a href="http://popsqueens.blogspot.be/search/label/soins%20visage">SOINS VISAGE</a></li>
      <li><a href="http://popsqueens.blogspot.be/search/label/soins%20corporel">SOINS CORPOREL</a></li>
      <li><a href="http://popsqueens.blogspot.be/search/label/cheveux">CHEVEUX</a></li>
      </ul>
      </li>
      <li><a title="FOOD" href="#">FOOD</a>
      <ul>
      <li><a href="http://popsqueens.blogspot.be/search/label/mes%20adresses">MES ADRESSES</a></li>
      </ul>
      </li>
      <li><a title="CONTACT" href="mailto:popsqueen.mnr@gmail.com">CONTACT</a></li>
      </ul>

      Supprimer
  29. Oooh génial , merci beaucoup ! =)

    RépondreSupprimer
  30. Hello Catherine,
    Alors merci pour ton aide mon blog est de plus en plus à mon gout grace à toi !
    Mais voila j'ai un problème avec mon menu déroulant, il ne s'affiche pas correctement donc je ne peux pas passer à la personnalisation.
    Voila le lien de mon blog, tu verra le problème je pense ...
    http://pleasepleasetakeone.blogspot.fr

    Merci d'avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai répondu à ton autre commentaire ici : http://ladybirdr.blogspot.com/2015/08/modifier-la-largeur-de-l-et-du-menu-100.html?showComment=1489209248689#c7295609010135503699
      Peut-être que cela réglera ton problème ;)

      Supprimer
  31. Bonjour Catherine,
    Je cherche à réaliser un menu déroulant depuis plusieurs semaines sans succès. J'ai tourné et retourné ton tutoriel dans tous les sens mais je crois que je suis vraiment une bille!
    J'utilise un thème expose gratuit pour mon blog. La mise en page de mon menu actuel se trouve dans "navigation wrapper" avec un widget "page", le visuel me plait mais je voudrais intégrer des sous catégories et avec le widget pages je crois bien que c'est impossible. J'ai rajouté un widget hmtl comme sur le tuto mais alors les sous-catégories étaient fixes, visibles et n'appliquaient pas la mise en page de l'actuel menu ( police, couleurs , espacement...)
    Je suis allée dans mon code html du template aux alentours de la ligne 354 on trouve "Navigaion" et "Drop Down" j'en ai déduit que la cuisine se trouvait dans ce coin là lol J'y ai collé les codes html que tu indiques et là. J'ai vu apparaitre un 3eme menu ! Une petite icone à 3 lignes et quand je cliques dessus je retrouve non pas mes sous catégories mais les "pages" déjà existantes dans mon premier menu. Bref... je ne sais plus par quel bout le prendre lol Help!
    Voici l'adresse de mon blog : https://mesptitsbonbons.blogspot.fr/ j'ai annulé toutes mes modifications parce qu'elle rendaient le blog illisibles, mais j'aimerais beaucoup avoir ton avis sur le code html de mon template afin de savoir où je dois travailler exactement ;) Un immense merci par avance!
    Clémentine

    RépondreSupprimer
    Réponses
    1. Bonjour Clémentine,
      Ton thème devrait prendre en charge un menu déroulant si tu as une partie de code nommée "Drop Down". Tu devrais avoir reçu un document explicatif avec ton thème qui explique comment l'utiliser ? Si non, tu peux peut-être contacter le site sur lequel tu as eu le thème.

      Supprimer
    2. Merci beaucoup Catherine. J'ai tenté de contacter le site sans succès... J'ai tenté d'utiliser le widget "liste de lien" au lieu de "liste de pages" mais ça n'a pas fonctionné, la mise en page de mon menu se fait sur la base du widget "liste de pages" et c'est ce widget qu'il faudrait que j'arrive à détourner :/
      Je m'arrache les cheveux...

      Supprimer
    3. Bonjour Clémentine,
      J'ai regardé ton thème plus en détail et il me semble qu'il ne prend pas en charge les menus déroulants en fait. Ce n'est pas disponible dans la version démo en ligne.
      Néanmoins tu peux utiliser un gadget HTML pour créer ton menu avec des menus déroulants.
      Tu peux utiliser mon tutoriel pour créer un menu en HTML, auquel vient s'appliquer le tutoriel pour ajouter un menu déroulant sur lequel on se trouve. Il faudra simplement utiliser un code HTML légèrement différent pour ton thème.
      Ajoutes ce code dans un gadget HTML dans ta partie Navigation (en supprimant les gadgets Pages et listes de liens existants) :

      <!-- Début du menu -->
      <ul class="barre_nav menu">
      <li><a href="#0">lien</a></li>
      <li><a href="#0">lien</a>
      <!-- Début du menu déroulant -->
      <ul>
      <li><a href="#0">lien</a></li>
      <li><a href="#0">lien</a></li>
      </ul>
      <!-- fin du menu -->
      </li>
      <li><a href="#0">lien</a></li>
      <li><a href="#0">lien</a></li>
      </ul>
      <!-- Fin du menu -->

      J'ai ajouté des commentaires qui ressemblent à ceci : <!-- Début du menu -->. Ils n'ont aucun effet sur le code mais servent simplement à ajouter un commentaire pour s'y retrouver plus facilement.

      Modifie ce code comme expliqué dans mes tutoriels.

      Pour rappel :
      - Une ligne qui commence par <ul définit le début d'une liste
      - Une ligne </ul> définit la fin d'une liste
      - Une ligne <li><a href="#0">lien</a></li> définit un élément de la liste comprenant un lien
      - Remplace #0 par l'adresse url du lien et lien par le texte du lien.
      - Un menu déroulant est une liste de liens à l'intérieur d'un lien (avant le </li> qui ferme le lien).

      Pas besoin de suivre mon tutoriel n°2 sur la barre de navigation car ton menu prendra l'apparence définit par ton thème !
      Il faudra juste ajouter ceci :

      #navigation .widget .menu ul li {
      border: none;
      margin-bottom: 0px;
      padding-bottom: 0px;
      position: relative;
      }

      #navigation .widget .menu ul li ul {
      position: absolute;
      left: -17px;
      background: #f8f8f8;
      }

      #navigation .widget .menu ul li ul a {
      border: none;
      padding: 6px 17px;
      color: #343434;
      }

      #navigation .widget .menu ul li ul a:hover {
      color: #999999;
      background: transparent;
      }

      #navigation .widget .menu ul li ul li::after {
      display: none;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  32. Hello Catherine, tout d'abord un grand merci pour tous ces tutoriels trop biens!

    j'ai un souci avec le menu déroulant sur mon blog www.lauralexo.com
    en fait quand je suis toutes les étapes de ce tutoriel, les sous catégories s'affichent de la même manière que les catégories de ma barre de navigation.

    Penses tu pouvoir m'aider ?

    Merci,
    Laura

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Je ne vois pas les codes de ton menu déroulant sur ton blog. Si les liens de tes menus déroulants s'affichent comme tes liens du menu, vérifie que tu as bien ajouté les codes CSS qui vont définir l'apparence de tes menus déroulants, dont leur visibilité par défaut et au survol du lien sous-lequel ils se trouvent.

      Supprimer
  33. Salut Catherine :)
    J'espère que tu vas bien !
    Voilà j'aurais voulut savoir si tu allais faite un tuto pour faire un menu déroulant en 3 sous niveau comme tu l'as fait pour le blog Fiftyshadesqc ? Ou sinon est-ce que tu pourrais m'aider pour le code est-ce qu'il faut modifier du coup, que le code du crosscol ou bien le code du crosscol + les codes HTLM? J'aimerai faire un sous menu Voyage > Europe > France par exemple. Je ne sais pas si je suis claire haha mais en tout cas merci de ton aide précieuse et de tes tutos géniaux !Bisous
    Marianne
    Marianne

    RépondreSupprimer
    Réponses
    1. Bonjour Marianne,
      A la fin du tutoriel pour créer un menu déroulant j'ai mis à disposition un document à télécharger qui explique justement comment faire ;)
      Tu peux le trouver ici.

      Supprimer
  34. Bonsoir Catherine ,

    J'ai finalement cédé à la tentation du template aujourd'hui , cependant lorsque j'entre les codes que j'avais pour mon ancien menu ( qui fonctionnait très bien ) dans ce nouveau template , le menu déroulant ne s'aligne pas correctement ...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Rajoute ces codes CSS :

      .menu ul li ul {
      position: absolute;
      z-index: 999;
      background: #fff;
      display: none;
      }

      .menu ul li:hover ul {
      display: block;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  35. ça fonctionne merci infiniment !!!

    RépondreSupprimer
  36. Bon alors j'ai réussi à utiliser tes supers tutos sur la barre de menu, sur sa personnalisation et sur le menu déroulant, et sans tout casser ^^ Merci beaucoup !

    Par contre, avant d'aller voir tes tutos sur les ajouts de la barre genre bouton de recherche, j'ai trois questions par rapport à mon blog.
    - D'une part, j'ai une ligne de pointillés au-dessus de la barre - qui me signifie qu'un truc va pas, je l'ai déjà vue en reproduisant tes tutos - dont je n'arrive pas à me débarrasser.
    - Ensuite, j'aimerais savoir s'il est possible de rendre la barre de menu plus épaisse afin d'agrandir les liens qui s'y trouvent, parce que sur mon blog, c'est un peu petit et pas très visible :/
    - enfin, sur mon menu déroulant, je sais pas pourquoi, y'a des pointillés entre les liens, dont j'aimerais aussi me débarrasser, parce que c'est pas très esthétique et je pensais que les "bandes blanches" seraient accolées les unes aux autres...

    Mon blog est là http://darkriketz.blogspot.fr/ si tu veux y jeter un œil.
    Merci beaucoup pour tes tutos et pour ta patience !

    RépondreSupprimer
    Réponses
    1. Bonjour DarkRiketz,
      Pour les pointillés au-dessus de tes liens (dont ceux des menus déroulants), cherches ce code CSS :

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      Ajoute cette ligne avant le signe } :

      border-top: none !important;

      Comme ceci :

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      border-top: none !important;
      }

      Pour l'épaisseur de la barre as-tu réussi à obtenir ce que tu souhaitais ?

      Supprimer
    2. Comme je le pensais, les lignes de pointillés entre les liens des menus déroulants avaient la même origine que celle sur la barre elle-même. Merci beaucoup pour ton aide, ça a fonctionné parfaitement, il n'y a plus rien :D

      Pour l'épaisseur de la barre, j'avais déjà bidouillé un truc en tâtonnant, les liens sont assez visibles comme ça.
      Encore merci pour tous tes tutos et pour ta réponse ! :D

      Supprimer
  37. Bonjour,

    Tout d'abord un grand merci à toi, j'ai un petit soucis concernant mon menu.
    Il se trouve que j'aimerais faire plusieurs parties : Accueil (pas de menu déroulant), qui sommes nous (pas de menu déroulant), Index (menu déroulant), Autoédition (menu déroulant), Partenaires (menu déroulant), Rendez-vous (menu déroulant), Blogueurs (pas de menu déroulant), Mes Romans (menu déroulant), FAQ (pas de menu déroulant) Lectures Communes (menu déroulant), Rencontres (pas de menu déroulant)

    J'ai donc actuellement 3 menus déroulants : Index, Rendez-vous, Partenaires sauf que les deux derniers sont dans le premier et j'ai beau regardé encore et encore, je ne trouve pas ce qui cloche exactement.. Pourrais-tu y jeter un petit coup d'œil s'il te plait ?

    http://amabooksaddict.blogspot.fr/

    RépondreSupprimer
  38. Re,

    Je te recontacte suite à mon précédent commentaire, j'ai (enfin) réussi à faire le menu déroulant comme je le voulais. Merci pour tes supers tutos qui m'aident beaucoup !

    Bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour Amandine,
      Pas de soucis ;)

      Supprimer
  39. Bonsoir Catherine :)

    Encore moi , ma barre menu va vers la gauche et j'aimerais qu'elle soit centré ( j'ai téléchargé un thème je pense que c'est à cause de ça )...

    Bonne soirée et merci d'avance pour toute l'aide que tu as apporté à nos blog :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai une erreur quand j'essaie d'aller sur ton blog :/

      Supprimer
    2. Ah mince ... J'ai changé le nom de mon blog c'est peut-être à cause de ça : " http://bandedecopines.blogspot.be/" :)

      Supprimer
    3. Bonjour,
      Effectivement ça marche mieux avec ce lien ^^
      Retrouve ton code suivant :

      .menu {
      float:left;
      }

      Remplaces-le par celui-ci :

      .menu {
      float: none;
      text-align: center;
      }

      Ça devrait régler le problème ;)

      Supprimer
  40. Bonjour,

    Je voudrais qu'il y ait 2 menus déroulants dans ma barre de navigation. Je les ait créés mais je ne comprends pas comment les positionner où je le voudrais dans ma barre de navigation. Et comment les séparer car quand j'essaye de placer correctement le premier, le deuxième fait de même...

    voici le lien vers mon blog :http://alissandbooks.blogspot.ch/

    Merci d'avance pour votre réponse,

    Alissia :)

    RépondreSupprimer
    Réponses
    1. Bonjour Alissia,
      Le problème de positionnement viens de ce code :

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      display: inline;
      float: none;
      }

      Remplace la ligne

      display: inline;

      Par :

      display: inline-block;

      Ensuite retrouve ton code :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 461px; /* Alignement avec le lien de la barre de navigation */
      }

      Et remplace 461px par 0 comme ceci :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 0px; /* Alignement avec le lien de la barre de navigation */
      }

      Et voilà ;)

      Supprimer
    2. C'est parfait !
      Merci infiniment !!

      Supprimer
  41. Bonjour,
    Excuse-moi de te déranger. J'ai voulu rajouter une catégorie à mon menu déroulant et du coup les deux dernières catégories (Humeurs et Voyages) sont en dehors des lignes du menu comme tu peux le voir sur mon blog. Peux-tu m'aider pour les remettre aligner stp ?
    Je ne peux pas te laisser mon codage, ce n'est pas accepté.


    Merci d'avance,
    Louise
    http://www.lemondestunlivre.blospot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Louise,
      Tes 2 dernières catégories sont en dehors de ton menu (après la ligne </ul>). Il faut déplacer tes 2 derniers liens avant le </ul> qui ferme la liste de liens de ton menu.
      Une manière simple de faire ceci est de supprimer le </ul> qui se trouve juste au-dessus de la ligne :

      <li><a title="Humeurs" href="#">Humeurs</a>

      Et de rajouter </ul> juste avant le </div> à la fin du code HTML de ton menu. Et voilà ;)

      Supprimer
    2. Merci beaucoup, ça a marché ! Comme quoi rien d'un petit truc en plus peut tout changer ;)

      Supprimer
  42. Bonjour, merci énormément pour tout tes tutos, ils sont très efficaces, j'ai plusieurs menus déroulants qui fonctionnent bien mais mon problème c'est chaque fois que je veux rajouter une catégorie dans un d'eux tout se décale ou disparait et au final je n'y parviens pas, j'aimerais rajouter notamment des pays dans mon onglet "travel" je comprends vraiment pas d'ou vient le problème!!! http://www.travellingwheelberries.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      Vérifies bien que tu colles tes menus déroulants à l'intérieur du code du lien sous lequel il doit s'afficher. C'est-à-dire avant le </li> qui ferme le code HTML de ce lien.
      De même, si tu rajoutes un lien vérifies bien que tu colles le code du lien avant le </ul> qui ferme les liens de ton menu (s'il doit se placer à la fin de ton menu) ou après le </li> qui ferme le code du lien qui doit le précéder.
      Il faut faire très attention à ces codes car il définissent le début et la fin de chaque lien et menu ;)

      Supprimer
  43. Bonjour Catherine,
    Merci pour ce tuto très sympa ! J'ai néanmoins un petit soucis, mes sous catégories restent affichées sous mes catégories et je n'arrive pas à régler le problème même après avoir lu les autres commentaires ...
    Je te mets mon code ci dessous si tu veux bien jeter un oeil ainsi que l'adresse de mon blog : www.aunatur-elle.blogspot.fr

    code CSS :

    /* Apparence du menu déroulant */
    .tabs .widget li ul {
    color: #FEFEFE; /* Couleur des liens */

    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: absolute;
    width: 150px; /* Largeur de la barre des sous-catégories */
    padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
    z-index:9999;
    }

    .tabs .widget li:hover ul {
    display: block;
    margin-top: 0px;
    margin-left: -15px; /* Alignement avec le lien de la barre de navigation */
    }

    .tabs .widget li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 150px; /* Largeur de la barre des sous-catégories */
    }

    .tabs .widget li:hover li a {
    background-color: #DEF7D6; /* Couleur du fond du lien */
    }

    .tabs .widget li ul a {
    display: block;
    height: auto;
    margin: 0px;
    padding-top: 5px; /* Distance au dessus des liens */
    padding-bottom: 5px; /* Distance en dessous des liens */
    padding-left: 10px; /* Distance à gauche des liens */
    text-align: left;
    }

    .tabs .widget ul ul a {
    color: #ffffff; /* Couleur des liens */
    }

    .tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
    color: #ffffff; /* Couleur des liens quand survolés par la souris */
    background-color: #DEF7D6; /* Couleur du fond du lien quand survolés par la souris */
    text-decoration: none;
    }

    Merci de ton aide =)

    RépondreSupprimer
  44. Bonjour, tout d'abord, merci pour tes tutoriels. Je voulais savoir s'il était possible de créer un menu déroulant sans avoir préalablement personnalisé la barre de navigation et si oui, où intégrer le code CSS. En effet, la barre de navigation de mon template me plaît telle quelle et j'ai peur de tout casser en essayant de la personnaliser... Mais je voudrais tout de même créer un menu déroulant! Est-ce possible?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      On ne peut pas ajouter de menu déroulant aux gadgets Pages par exemple, car on n'a pas accès au code de ces gadgets. Il faut créer un menu en HTML pour pouvoir ajouter manuellement les menus déroulants dans la liste de liens du menu.

      Supprimer
  45. Hello ! On m'a conseillé ton blog pour démarrer le mien et.. Hallelujah ! Merci d'exister ! Toutefois j'ai un problème avec les menus déroulants. Même en copiant ton code et en l'intégrant au mien, les sous parties restent affichées ! Beaucoup d'autres personnes semblent concerner mais je ne comprends pas comment elles ont résolues le problème ! Peux-tu m'aider ?
    Je te mets l'adresse de mon blog :http://eva-cadabra.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Eva,
      Je vois que tu as résolu le problème ;)

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger