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

85 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

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