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

323 commentaires:

  1. Salut ! Merci beaucoup pour tout ces tutos, c'est vraiment trop trop bien d'avoir de l'aide dans la blogging (et surtout dans cet enfer de codage html.. ) merci ! :)
    Mais bon, malgré cette aide j'ai quand même réussi à me planter, j'ai bien créé mon menu déroulant, mais les liens (catégories 1 &2) qui se "déroulent" ne se déroulent pas en dessous de ma Catégorie 1, mais tout au bord du blog, donc impossible de cliquer dessus. J'espère que tu as quand même compris le problème malgré mes explications nulles :/
    merci d'avance !! :D

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Remplace ton code :

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

      Par :

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

      Et voilà ;)

      Supprimer
    2. Bonjour!
      J'ai exactement le même problème, quand je survole une catégorie du menu principale les sous-catégories s'alignent totalement à gauche de la ma page. Donc impossible de cliquer dessus...
      J'ai vérifié dans mon code HTM et j'ai bien écrit le code:

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

      Merci d'avance!
      Marjorie | http://www.ahintofrose.com/

      Supprimer
    3. Bonjour Marjorie,
      Le problème vient de ton thème. Il y a une ligne de code qui entre en conflit avec le code du tutoriel. Cherche la ligne suivante :

      .tabs-inner li {float:none !important; display:inline !important;}

      Supprime-là. Et voilà ;)

      Supprimer
  2. Bonjour, comment je peux faire apparaitre mon article sous un menu / sous-menu précis? Je ne trouve pas indication? J'ai bien reussi faire la barre de navigation, aussi écrire une article (c'est facile :) ), mais pas integrer mon article sous le menu. Merci en avance! Monika

    RépondreSupprimer
    Réponses
    1. Bonjour Monika,
      Si tu souhaites associer 1 article à un lien de ton menu, suit les explications de la partie "Un lien interne vers un de vos articles" du premier tutoriel sur la création de la barre de navigation : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienArticle

      Supprimer
  3. Bonjour, tout d'abord merci pour ces supers tutoriels. J'ai un problème depuis peu. Je n'arrive plus à trouver les codes htlm que tu donnes. Lorsque je vais dans l'encart modifier le code htlm tout à du changer suite à un thème que j'ai installer. Mais du coup je n'arrive pas à fair emon menu déroulant et pas mal d'autres tutoriels. J'ai chercher pas mal de solution mais j'en trouve aucune. Je te donne mon blog pour que tu puisse mieux comprendre. Merci d'avance :) http://beautifulbeautythings.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Jade,
      Si tu as installé un nouveau thème c'est normal que tu ne trouves plus les codes HTML que je donne car ton thème doit avoir des codes différents. Pour ton menu, tu peux utiliser les mêmes codes CSS que je donne pour modifier son apparence, mais colle-les avant la ligne suivante :

      /** Search **/

      Supprimer
  4. Bonjour, bonjour,

    Je reviens vers vous pour vous demander un (dernier j'espère ...) petit conseil. Menu déroulant tip-top grâce à vos conseils.

    Par contre, au niveau visuel, ça bloque un peu étant donné que je n'arrive pas à faire en sorte que les titres des menus déroulants soient de la même largeur que ceux de la barre de menu (dans mon cas "compte d'utilisateur" est aligné à gauche et donc pas équivalent à "catalogue en ligne".

    Je ne sais pas si ma question est très claire ^^

    Merci beaucoup, énormément, infiniment de votre aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a 3 codes à modifier pour augmenter la largeur du sous-menu. Tout d'abord, remplacez ce code :

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

      Par :

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

      Ensuite remplacez :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 130px; /* 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;
      }

      Par :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 196px; /* 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 pour finir, remplacez :

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

      Par :

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

      Et voilà ;)

      Supprimer
    2. Merci beaucoup de ton aide ! C'est exactement ce que je voulais faire !

      Est-ce que j'ose encore te demander quelque chose ?

      Est-il possible de faire en sorte que la mise en page soit différente sur la page d'accueil et les autres pages ? Dans l'absolu, j'aimerais bien que mes images/textes soient centré sur mes pages "actualités", "compte lecteur", "règlement" et "où nous trouvez", mais cela est impossible car la mise en page intègre les widgets à droite ...

      A nouveau, je ne sais pas si ce que j'écris est compréhensible ;-)

      Merci encore beaucoup pour tes précieux conseils ! Et belle fin de journée

      Supprimer
    3. Bonjour,
      Ajoute le code ci-dessous à ton thème en allant dans Modèle > Modifier le code HTML. Clique dans la boîte de code et appuie sur Ctrl et F en même temps. Dans la boîte de recherche colle :

      <body

      Appuie sut Entrer.

      Juste après la ligne qui commence par <body colle :

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <style type='text/css'>
      .main-inner .columns {
      padding-right: 0px !important;
      }
      </style>
      </b:if>

      Sauvegarde et ça devrait agrandir la zone des pages ;)

      Supprimer
    4. Merci ! Ca fonctionne parfaitement !

      Supprimer
  5. Bonjour depuis hier j'ai refait mon blog grâce a tes super tutos , mais aujourd'hui je bloque avec la barre de navigation j'ai reussi à la créer , à la mettre fixe en haut du blog a rajouter la barre de recherche mais dès que j'essaye d'ajouter une catégorie sous catégorie cela ne va pas j'ai tout qui s'affiche et aucune catégorie j'ai lu les commentaires de la 1er page pour trouvé solution j'ai tout tester tes conseils mais je ne trouve pas. Voici mon blog j'ai mis catégories sous catégories 1 et 2 au milieu de ma barre pour que tu regardes à quoi cela ressemble : http://chezchouby.blogspot.fr/ de plus quand j'ajoute cela et bien ma barre de recherche sort du cadre et dès que je retire catégories sous catégorie 1 et 2 la barre de recherche se remets correctement.
    Merci par avance pour ton aide.

    RépondreSupprimer
  6. NB : ne prends pas en compte mon précédent message j'ai trouvé la solution ...

    RépondreSupprimer
  7. Bonjour !

    Tout d'abord merci pour tout tes tutos qui sont juste géniaux !
    J'ai suivi les deux premiers tutos pour créer ma barre de navigation et maintenant celui-ci pour le menu déroulant ! Tout c'est très bien passé à l'exemption que ma barre de navigation refuse de se centrer ! J'ai pourtant tout suivi à la lettre !

    Enfin, j'espère que tu pourras m'aider ! Merci d'avance !

    Laura
    http://lauraseden.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Il y a une erreur dans ton code. Il manque la première ligne su code suivant :

      /* Centrer la Barre de Navigation */
      display: inline-block;
      float: none;
      }

      Rajoute :

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

      Après :

      /* Centrer la Barre de Navigation */

      Comme ceci :

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

      Et voilà :)

      Supprimer
    2. Merci beaucoup Catherine ! Ça marche parfaitement maintenant !

      Et encore merci pour tous ces tutos !!

      Supprimer
  8. Bonjour Catherine,

    Merci tout d'abord pour tous ces géniaux tutoriels que tu nous offres.
    Grâce à eux, je commence (un peu) à pénétrer les arcanes de la programmation html et css…
    Tes menus déroulants ont incontestablement apporté un plus à mon blog dont le résultat commence à me plaire vraiment :)

    Éternelle insatisfaite, je me demandais s'il était possible de faire un menu déroulant DANS un menu déroulant… Rien que ça…
    Qu'en penses-tu ?

    Merci pour ta réponse, je suis impatiente ;)

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Oui c'est tout à fait possible, il suffit de rajouter le code HTML du 2e menu déroulant dans un lien du 1er menu déroulant.

      Ensuite il faut ajouter un code CSS pour définir l'apparence de ce 2e menu déroulant. Essaye avec ceci :

      .tabs ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul li:hover ul {
      display: block !important;
      }

      .tabs ul ul ul {
      position: absolute;
      left: 165px;
      margin-top: -40px !important;
      top: auto;
      }

      .tabs ul ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul ul li:hover ul {
      display: block !important;
      }

      Et voilà ;)

      Supprimer
    2. bonjour, tout d'abord merci pour tout ton travail et tes conseil. je suis un peu perdu, ce code serait le code css pour faire un menu roulant dans un menu roulant ?

      Dans mon menu roulant je ne voit aparaitre mon titre 1 et mon sous titre 1-A, mais je voudrait quen passant ce sous-titre ca m'ouvre deux autres possibilité : 1-A-a et 1-A-b"; je ne sais pas si mon soucis vient-il de mon code html, car je pense avoir bien fait ce que tu as dit pour le css. ps: l'adresse de mon blog : http://maman-a-la-page.blogspot.fr/ Merci par avance pour ton aide

      Supprimer
    3. Bonjour Floriane,
      Le code ci-dessus est bien le code CSS pour que les menus-déroulants s'ouvrent correctement à partir d'un menu-déroulant.
      Pour que l'ensemble fonctionne il faut bien ajouter un nouveau menu-déroulant dans le lien sous lequel tu souhaites le faire apparaître.
      Attention à bien ajouter le code HTML du 2e menu-déroulant (de <ul> à </ul>) avant le code </li> du lien sous lequel le menu déroulant doit apparaître. Sinon ça ne marchera pas ;)

      Supprimer
    4. J'ai essayé, mais ca marche toujours pas j'ai refais les manip et revu le code htlm, mais peut etre qu'à force d'être dessus, je bloque.

      Si tu as un moment pourrais-tu voir ce qui cloche stp mon blog http://maman-a-la-page.blogspot.fr/

      la partie dont j'ai inscrit le code HTLM est : Alimentation qui doit se diviser en Allaitement et Rythme + Contenu

      mais qd je passe sur Alimentation, rien ne se produit.

      Merci encore pour tout.

      cdlt

      Supprimer
    5. Effectivement,
      Remplace ce code :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 150px;
      padding-top: 10px;
      z-index: 9999;
      }

      Par :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 150px;
      padding-top: 10px;
      z-index: 9999;
      overflow: visible;
      }

      Celui-ci :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 0px;
      }

      Par :

      .tabs .widget li:hover ul {
      display: block !important;
      margin-top: 0px;
      margin-left: 0px;
      }

      Et celui-ci :

      .tabs ul ul li:hover ul {
      display: block !important;
      }

      Par :

      .tabs .widget ul ul li:hover ul {
      display: block !important;
      left: 150px !important;
      margin-top: -41px !important;
      }

      Dis-moi ce que ça donne.

      Supprimer
    6. tout simplement parfait!!!! merci mille fois, je manquerai pas de faire ta pub, et tu figures dans ma listes de mes sites "coup de coeur" du moment ;)

      Supprimer
    7. Coucou,
      J'ai suivi ces instructions, car moi aussi je souhaite faire la même chose mais j'ai un petit beug, et je pense qu'il vient du gadget, j'espère que tu va pouvoir m'aider, bisous ! ;)
      En gros, j'ai d'abord "catégorie", ensuite dedans j'ai mode, beauté etc et dans mode j'ai voulu mettre tenues et hauls mais cela ne fonctionne pas ^^

      Voici le lien (c'est un blog test) http://blogtestmiss.blogspot.fr/

      Supprimer
    8. Bonjour,
      Retrouve ce code :

      .tabs .widget li:hover ul {
      display: block !important;
      margin-top: 0px;
      margin-left: 0px;
      }

      Et remplace-le par :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 0px;
      }

      Supprimer
    9. Merci beaucoup tu me sauve la vie comme toujours ! ^^
      C'est peut-être pour chipoté, mais il reste un petit détail (je pense que tu sera obligé d'aller voir pour comprendre ^^ http://blogtestmiss.blogspot.fr/) Mes sous-sous catégories comme " beauté " n'est pas aligné on va dire comme pour les sous-catégories mode, ça descend un peu alors que je voudrais que ça reste pareil, j'espère que tu m'a comprise et que tu pourra m'aider une énième fois ^^

      Supprimer
  9. Merci beaucoup pour ta réponse ;)

    Pas de problème pour ajouter le code HTML du 2e menu déroulant dans le lien du 1er menu déroulant : ça s'affiche directement en dessous (superposé au libellé suivant) mais j'imagine que c'est normal.
    En revanche, lorsque j'ajoute le code CSS (dans Modèle>Personnaliser>Avancé>Ajouter le fichier CSS, n'est-ce pas ?), ça disparait comme si je n'avais rien fait.
    Ça m'éneeeerve, iiiii !

    Tu voudrais bien m'aider encore une fois, s'il te plaît ?
    Merci beaucoup d'avance :)

    Mon blog : www.mampolette.com


    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,

      Ajoute le code CSS en allant dans Modèle > Modifier le code HTML. Clique sur le triangle noir à gauche de

      <b:skin>...</b:skin>

      Clique dans la boîte de code et appuie sur Ctrl et F en même temps. Dans le champ de recherche qui apparaît dans la boîte de code (et non en haut de la page web) colle :

      /* Content

      Colle les codes CSS juste au-dessus de cette ligne

      Supprimer
  10. Bonjour Catherine,

    malgré tes conseils, je n'arrive pas à créer une belle barre de navigation. Mes intitulés sont les uns au dessous des autres et pas côte à côte. Je ne trouve pas la balise /* Tabs à partir de laquelle tu expliquais la personnalisation de la barre de navigation.
    Je n'ai pas besoin de change les couleurs ni modifier l'aspect lors du passage de la souris, mais juste d'avoir tout ça bien aligné :)
    J'espère que tu pourras m'aider !
    A bientôt,
    Marie

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      Peux-tu me donner le lien vers ton blog pour que je puisse regarder ça ? :)

      Supprimer
  11. Le voilà : http://a-glowing-yogini.blogspot.fr/
    :)

    RépondreSupprimer
    Réponses
    1. Le problème vient de ton thème. Tu peux simplement ajouter les codes CSS suivants à la place pour modifier l'apparence de ton menu :

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      #barre_nav ul li:first-child {
      }

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav ul {
      }

      /* Police et Couleur des Liens */
      #barre_nav li a {
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      #barre_nav li a:hover {
      }

      /* Centrer la Barre de Navigation */
      #barre_nav li, #barre_nav li {
      }


      /* Apparence du menu déroulant */
      #barre_nav li ul {
      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;
      }

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

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

      #barre_nav li:hover li a {
      background-color: #C49DB8; /* Couleur du fond du lien */
      }

      #barre_nav 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;
      }

      #barre_nav ul ul a {
      color: #ffffff; /* Couleur des liens */
      }

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

      Colle ces codes juste avant :

      /* Posts

      Et voilà ;)

      Supprimer
    2. Hello !
      Ca ne fonctionne toujours pas :( Il faut que je supprime quelque chose en parallèle ?
      Si rien ne marche, je tenterai à partir d'un template de base de blogger.
      Merci pour tes conseils en tout cas !

      Supprimer
    3. Il faut maintenant que tu remplisses ces codes avec les lignes de code pour modifier l'apparence de ton menu comme expliqué dans la partie 2 du tutoriel sur la barre de navigation, et le tutoriel sur le menu déroulant ;)

      Supprimer
    4. Aaaaah ! Désolée d'être aussi nunuche ! Je m'y mets immédiatement !
      Merci :)

      Supprimer
    5. Hello Catherine !
      Merci beaucoup pour tous tes conseils ! Je m'en suis sortie avec le menu déroulant, et je suis à peu près contente de ce que j'ai fait.
      Merci encore pour ces articles très précieux, je recommande ton blog à toutes mes copines qui veulent améliorer le leur !
      Bises
      http://a-glowing-yogini.blogspot.fr/

      Supprimer
  12. Bonjour Catherine, tout d'abord je te remercie infiniment pour tous ces tutos géniaux, tu fais vraiment un sacré boulot et j'aime beaucoup!

    J'ai un soucis, j'ai essayé de créer un menu déroulant (dans la section voyages notamment) mais les sous-catégories sont visibles et il n'y a donc pas de menu déroulant.
    Pourrais-tu m'aider?
    Merci d'avance ;)

    Sonia
    http://lesjourneesdesonia.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Sonia,
      Il y a une erreur dans le code HTML de ton menu déroulant. Son code devrait se trouver avant </li> du lien sous lequel tu souhaites qu'il s'affiche, et non après.

      Au lieu d'avoir ceci :

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

      <ul>
      <li><a href="http://lesjourneesdesonia.blogspot.fr/2015/08/travel-kuala-lumpur-malaisie-summer-2015.html">Kuala Lumpur</a></li>
      <li><a href="http://lesjourneesdesonia.blogspot.fr/2015/08/bali-august-2015.html">Bali</a></li>
      </ul>

      Tu devrais avoir ceci :

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

      <ul>
      <li><a href="http://lesjourneesdesonia.blogspot.fr/2015/08/travel-kuala-lumpur-malaisie-summer-2015.html">Kuala Lumpur</a></li>
      <li><a href="http://lesjourneesdesonia.blogspot.fr/2015/08/bali-august-2015.html">Bali</a></li>
      </ul>

      </li>

      Il te suffit de déplacer le code du menu déroulant ci-dessus (entre <ul> et </ul>) avant le </li> du code du lien Voyages ;)

      Supprimer
    2. Je te remercie infiniment!
      keep rocking ! :)

      Supprimer
  13. Un grand merci pour ces articles ! C'est limpide, j'arrive enfin à modifier mon template, bonheur !

    RépondreSupprimer
  14. Bonjour, merci pour tes conseils!! Je commence tout juste a creer mon blog mais meme avec tes tutos je n'arrive pas a mettre au milieu ma barre de navigation, elle est centré mais en haut de ma barre de menu, pas au milieu (j'espère que tu comprends ce que je veux dire).
    J'espere que tu pourras m'aider!
    Merci d'avance
    Léa
    http://lagazettedelea.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Léa, je ne peux pas accéder à ton blog :/

      Supprimer
  15. Bonjour !
    Je n'arrive décidément pas à aligner correctement les sous catégories en dessous de la catégorie,
    mon Blog : http://goforwardeveryone.blogspot.fr/, je n'ai fais que la partie "Beauté" car je ne voulais pas me perdre, mais là j'avoue que je n'y arrive pas :(
    Merci d'avance pour on aide :D

    RépondreSupprimer
  16. Bonjour Cath,
    Je me permets de te solliciter encore (et te remercier, même si je l'ai déjà fait sur un autre post car tes tutos sont d'une aide précieuse !) car, après avoir réussi à faire la barre de navigation, je souhaiterais la rendre fixe, comme toi sur ton blog. Est-ce possible ? Merci et bon week-end à toi !

    RépondreSupprimer
    Réponses
    1. Bonjour Célia, j'ai fait un tutoriel sur le sujet : http://ladybirdr.blogspot.com/2014/12/fixer-la-barre-de-navigation-en-haut-du.html
      Tu peux trouver tous mes tutoriels sur la page Tutoriels accessible en haut du blog ;)

      Supprimer
    2. Ah merci ! Désolée, pourtant c'est pas faute de passer toute ma vie sur ton blog :) J'y cours !

      Supprimer
  17. Recoucou, deuxième problème...
    J'ai voulus continuer le déroulage, hors, tout se met à la suite, cela ne fait pas de catégorie...

    Je ne peux pas envoyer le code ici

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

    Merci de ton aide !! Je suis complètement perdue :(

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Retrouve le code suivant :

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

      Et remplace-le par :

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

      Supprimer
  18. Merci beaucoup pour cet article ! Ca faisait longtemps que j'étais à la recherche d'un tutoriel comme celui ci et qui soit simple à comprendre. J'ai hâte de tester !

    RépondreSupprimer
  19. Bonjour,

    J'ai le même soucis que certaines personnes qui ont commenté mais je ne retrouve pas dans mon code les éléments que tu indiques (comme par exemple ".tabs .widget li, .tabs .widget li {")
    J'ai télécharger un template et je tente comme je peux de le modifier pour l'apprivoiser...
    Voici mon probème : le template de base comprenait une partie slider, et une partie post populaire sous mon image. Je n'utilise finalement pas ses widgets mais ils apparaissent comme espace blanc entre mes articles et mon menu déroulant...
    Quand j'arrive à localiser dans le code ces éléments pour les retirer, mon menu déroulant s'affiche sous le corps de mon blog, donc en gros il ne sert plus à rien...

    J'ai tout tenté ! :(

    Voici l'adresse de mon blog : http://une-vie-mot-rose.blogspot.fr/

    J'espère que tu pourras m'aider :(
    merci,

    Une vie mot rose

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux diminuer l'espace entre le menu et le corps de blog en ajoutant le code suivant dans ton thème, au-dessus de la ligne /*Content par exemple :

      .wrapper.flexGRID {
      margin-top: -65px;
      }

      Modifie la valeur -65px en l'augmentant ou en le diminuant pour varier l'espace entre le menu et le corps du blog. Une valeur négative déplace le corps du blog vers le haut et une valeur positive, vers le bas.

      Supprimer
    2. Merci de ta réponse, en m'y replongeant ce soir j'ai trouvé la solution ! C'est le problème des templates téléchargés, ça rend service au début, c'est tout beau tout joli mais c'est pas de nous alors on ne maîtrise pas le code à 100%

      Supprimer
  20. Bonjour,

    Premièrement un grand merci pour tout tes tutos, c'est vraiment une grande aide ... J'ai suivi du début a la fin tes tutos à propos de la barre de navigation mais impossible que mon menu se déroule pourtant j'ai tout fais comme tu as dit, j'ai même relu les article une dizaine de fois, je suis après depuis hier c'est une catastrophe.... http://nouveausouvenir.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Je n'ai pas accès à ton blog (accessible seulement aux lecteurs invités), je ne peux pas voir le problème :/

      Supprimer
    2. http://nouveau-souvenir.blogspot.fr/

      Supprimer
  21. Bonjour Catherine,

    Tes tutos me sont très précieux dans l'élaboration de mon blog. Après pas mal d'heures passées dessus je commence à être plutôt contente du résultat visuel, ceci étant j'ai toujours quelques petites choses sur lesquelles je bloque :
    - Pour le moment je n'ai créé qu'un seul article mais je ne sais pas comment faire pour associer un libellé à une sous catégorie de mon menu déroulant (par exemple "sucré")
    - J'ai suivi ton tuto également pour fixer la barre de navigation en haut mais elle disparait dès je descend avec la souris
    - et dernière petite chose je ne sais comment réduire l'espace que je trouve trop important entre le header et le corps du blog.
    J'ai eu beau farfouiller des heures je n'ai pas trouvé de solutions.
    Si tu as le temps d'y jeter un oeil je te mets l'adresse de mon blog : http://basketsetgourmandises.blogspot.fr/
    Merci d'avoir pris le temps de me lire :)

    Christelle

    RépondreSupprimer
    Réponses
    1. Bonjour Christelle,
      Pour fixer ton menu en haut du blog, remplace le code suivant :

      /* ! Attention ! Nouveau code : Espacement avant et après la Barre de Navigation */
      div#barre_nav {
      margin-top: -50px; /* Espacement avant la Barre de Navigation */
      margin-bottom: 20px; /* Espacement après la Barre de Navigation */
      }

      Par celui-ci :

      /* ! Attention ! Nouveau code : Espacement avant et après la Barre de Navigation */
      div#barre_nav {
      margin-top: -13px;
      margin-bottom: 20px;
      position: fixed;
      top: 0;
      z-index: 999;
      width: 100%;
      left: 0;
      }


      Pour relier tes libellés à ton menu, il faut suivre les instructions de la 1ère partie du tutoriel ici : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienLibellé


      Pour réduire l'espace entre ton en-tête et ton blog, trouve le code suivant :

      .main-outer {
      border-top: 0 solid transparent;
      margin-top: 40px; /* Espace en-dessous du titre du blog */
      }

      Et remplace 40px par une valeur plus petite ;)

      Supprimer
  22. Bonjour Lady Blog !
    Félicitations ! Tes articles sont vraiment très très clairs ! Je n'avais jamais fait d'HTML et là je suis arrivée à faire la barre de navigation et à la personnaliser comme je voulais :D Grâce à toi, mon blog a beaucoup plus de gueule lol !
    Mais en fait l'HTML moi je pensais que c'était dur et tout, qu'il fallait être un pro mais en fait ça va c'est pas sorcier, c'est même très facile ! o_O (Le tout bien sûr est de ne rien oublier car le moindre point-virgule x)... d'où le fait de tout le temps sauvegarder comme tu le précises d'ailleurs ^^)
    Je compte lire tes autres tutoriels car vraiment je n'ai trouvé aucun blog qui expliquait aussi bien, et pourtant j'en ai lu plusieurs ! :)
    D'autre part j'aurais une question à propos de la barre de navigation, et plus précisément des catégories, en fait quand je clique sur une catégorie, dans laquelle j'ai mis un lien libellé avec search/label, cela m'affiche un texte encadré avant mes articles... Par exemple, quand je clique sur "Photomontages", ça me met "Affichage des articles dont le libellé est Photomontages. Afficher tous les articles" dans un texte encadré, comme ceci "http://edelweisser.blogspot.fr/search/label/Photomontages?max-results=8"...
    Que puis-je donc faire pour enlever ce texte encadré qui gâche un peu la page ? Est-ce que c'est obligé de rester ?
    Au pire en codant, on doit pouvoir enlever ça non ?
    Merci par avance, et félicitations encore, bonne continuation sur le blog ! ;)
    Aimie

    RépondreSupprimer
    Réponses
    1. Bonjour Aimie,
      J'ai fait un tutoriel sur le sujet ici :) : http://ladybirdr.blogspot.com/2015/02/supprimer-modifier-lencadre-sur-la-page.html

      Supprimer
  23. bonjour, merci pour vos tutos pertinents et très bien faits.
    Malgré ça, je n'arrive pas à installer une jolie barre de navigation sous mon titre de blog. Les codes htlm: grrrrr!!!!
    Cette barre de navigation amène à des pages et non des articles.
    Je n'arrive pas à espacer les thèmes et personnaliser la typo.

    Peut-on aussi créer une page avec un accès réglementer par code?

    Merci pour votre aide.

    Cecile

    mon blog: latelierdelalibellule.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Cécile,
      Comme tu as remis le gadget Pages je ne peux pas voir le problème :/
      Peux-tu remettre le gadget HTML ?

      Supprimer
  24. Enfin, enfin, ENFIN un tuto CLAIR et précis !! Depuis le temps que je voulais faire un menu déroulant, j'y suis enfin parvenue et je suis super contente du résultat ! Et en plus grâce à tes petits commentaires pour chaque rubrique, je pourrai revenir faire des modifications facilement !
    Merci BEAUCOUP ! Vu le temps que j'ai mis, ça a dû te prendre un sacré temps ! Merci infiniment =D

    RépondreSupprimer
  25. Un grand merci Cath, grâce à ton aide la barre de navigation reste bien fixe et j'ai pu réduire l'espace entre le header et "le corps" du blog.
    Pour mon autre requête (associer les libellés au menu déroulant) j'ai finalement changé d'avis et opté pour une page répertoriant les liens.
    Maintenant je vais m'atteler à trouver des icones sympa pour pinterest, la rubrique contact, instagram et le flux rss.

    Très bonne soirée à toi et merci encore pour le partage de tes connaissances et ta disponibilité ;)

    Christelle

    RépondreSupprimer
  26. Bonjour, je reviens vers vous concernant ma fameuse barre de navigation. Merci encore pour votre réponse et vos tutos géniaux! J'ai réessayé et j'ai finalement réussi! ouf! Par contre je me pose des questions.
    La première, est-ce que çela pose un problème d'avoir crée des pages pour mon menu (plus simples pour moi à différencier) et comment faire pour avoir des boutons Facebook et pinterest comme les vôtres dans le haut à gauche? Merci d'avance. Cecile, nouvelle bloggueuse pro!

    RépondreSupprimer
    Réponses
    1. Bonjour Cécile,
      Ça ne pose aucun problème que tu ais créé des pages pour ton menu. Tu peux y ajouter ce que tu souhaites : pages, articles, libellés, liens externes à Blogger ;)
      Pour les boutons vers les réseaux sociaux à droite du menu, c'est noté sur ma liste de tutoriels à faire ;)

      Supprimer
  27. Bonjour,

    je n'ai pas finalement pas suivi ton (excellent) tutoriel sur comment créer sa barre de navigation puisque celle que j'avais sur blogger me convenait très bien : j'ai un dégradé de couleur et la couleur de l'onglet survolé change, ce que je n'arrivais pas à faire avec tes indications. Par contre, j'aimerais pouvoir la centrer, est-ce que c'est possible avec le code "initial" du blog?
    Il donne ceci :
    .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;
    }

    /* Columns

    j'ai essayé de simplement copier/coller la partie du code servant à centrer le menu, mais cela n'a évidemment pas marché (mes bordures de séparations entre les onglets se sont simplement dédoublées...)

    Voilà, merci d'avance pour ton aide : )

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Rajoute le code suivant à la suite des codes CSS de ton menu :

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

      Ensuite rajoute :

      text-align: center;

      Avant le signe } du code suivant :

      .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);
      }

      Supprimer
    2. Merci : ) du coup j'ai finalement tout repris (créer et personnaliser la barre de navigation suivant ton modèle) mais je n'arrive pas à mettre de l'espace entre le texte et la bordure. J'ai essayé de rajouter "height : 40px" dans la partie "fond et bordure de la barre de navigation". ça a fonctionné, mais dans ce cas, il n'y a toujours pas d'espace entre le texte et la bordure du haut de la barre de navigation... Une idée? : ) (merci!)

      Supprimer
    3. Bonjour Victoria,
      Il faut ajouter :

      padding: 10px;

      dans la partie fond et bordure de la barre de navigation ;)

      Supprimer
  28. Bonjour,

    Je n'arrive pas à créer un menu déroulant à l'intérieur de mon menu déroulant, que faire ?

    Je voulais en dessous de la rubrique "Destinations" classer par continent puis par pays
    si tu peux regarder où ça bloque : travelwithkenza.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Kenza,
      C'est tout à fait possible. Il suffit d'ajouter un nouveau menu de <ul> à </ul> avant le </li> du lien sous lequel tu souhaites que ce nouveau menu déroulant apparaisse.
      Ensuite colle ces codes CSS :

      /* Codes CSS pour sous-menu déroulants */
      .tabs ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul li:hover ul {
      display: block !important;
      }

      .tabs ul ul ul {
      position: absolute;
      left: 165px; /* Espace à droite du menu-déroulant */
      margin-top: -40px !important; /* Espace en haut du sous-menu déroulant */
      top: auto;
      }

      .tabs ul ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul ul li:hover ul {
      display: block !important;
      }

      A la suite de tes codes CSS pour ton menu. Il faudra rectifier les valeurs des espaces à gauche et au-dessus du nouveau menu-déroulant en fonction. J'ai marqué les lignes à modifier avec des commentaires ;)

      Supprimer
  29. Bonjour,
    Je vous ai envoyé un commentaire sur votre premier article mais je n'ai pas eu de réponse.., un appel à l'aide, je n'ai pas trouvé de tuto car je pense que cela ne doit être quelque que l'on voit souvent.
    Mes images restent aligner à gauche même si je mets "aligner au centre", j'essaye de trouver des solutions en modifiant le code mais je ne trouve pas où est le problème..

    Merci d'avance encore :(

    RépondreSupprimer
    Réponses
    1. Bonjour Emilie,
      Je t'ai répondu ici : http://ladybirdr.blogspot.fr/2015/09/modifier-lapparence-globale-du-pied.html?showComment=1443962457304#c2167661638375966334

      Supprimer
  30. bonjour,
    mon blog est quasiment fini avec son beau menu déroulant. Un grand merci à toi.
    Je coince encore sur des petits détails:
    -peut-on diminuer les liens (ou la taille de la typo) du menu déroulant qui se chevauchent au corps du blog et car je souhaite mettre un troisième lien (est-ce trop d'ailleurs)?
    -mon menu déroulant est décaler au reste, est-ce normal?
    merci pour cette aide précieuse

    Cecile
    http://latelierdelalibellule.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Cécile,
      Ce n'est pas grave si ton menu déroulant chevauche le corps du blog car il n'apparaît que si on décide de survoler le lien ;)
      Pour rectifier la position du menu déroulant, il faut modifier la valeur de la ligne suivante :

      margin-left: -1px; /* Alignement avec le lien de la barre de navigation */

      du code suivant :

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

      Une valeur positive déplacera le menu déroulant à droite, et une valeur négative déplacera le menu à gauche ;)

      Supprimer
  31. Rebonjour Catherine, c'est encore Emilie, désolée !

    Je reviens pour vous demandez comment pouvons-nous faire pour que les titre de nos gadgets/widgets soient bien centrés ?
    Et si c'est possible de mettre des espaces entre les gadgets car je trouve que sur mon blog cela est trop serré, niveau esthétique c'est pas le top..

    Merci encore d'avance :D

    RépondreSupprimer
    Réponses
    1. Bonjour Emilie,
      Les titres de tes gadgets sont déjà bien centrés ;)
      Pour l'espace entre les gadgets, cherche le code suivant :

      #sidebar .widget {
      width: 277px;
      margin-right: 0;
      float: none;
      margin-bottom: 50px;
      background-color: #fff;
      padding: 20px;
      border: 1px solid #e1e1e1;
      clear: both;
      }

      Modifie la valeur de la ligne :

      margin-bottom: 50px;

      Augmente la valeur de 50px pour augmenter l'espace entre les gadgets, et diminue cette valeur pour diminuer cet espace ;)

      Supprimer
  32. Bonjour !
    Je viens de créér mon menu déroulant et je suis fort contente ! C'est vraiment clair et bien expliqué, merci beaucoup.
    Je souhaiterais peaufiner encore un peu tout de même : lorsque le menu déroulant de déploie, j'aimerais une bordure autour des liens, tout en faisant disparaitre la bordure inférieure du menu. Comme je ne sais pas si c'est clair, voici un blog avec un menu qui illustre parfaitement ce que j'aimerai réaliser :
    http://ledressingdeleeloo.blogspot.fr/search/label/beaute
    Est-ce faisable ou est-ce trop compliqué à mettre en oeuvre ?
    D'avance merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En fait il suffit d'ajouter une bordure à gauche, à droite, en bas du menu déroulant, mais pas en haut. Pour ce faire retrouve le code CSS de ton menu déroulant commençant par :

      .tabs .widget li ul {

      Rajoute les codes pour les bordures après cette ligne, comme pour le menu.
      Pour savoir comment rajouter des bordures, utilise les instructions suivantes : http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html#EspacementBordure

      Ensuite il faudra ajuster la position du menu déroulant pour recouvrir la bordure sous le menu. Pour cela (toujours dans le même code CSS), modifie la valeur de la ligne suivante :

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

      Teste plusieurs valeurs pour obtenir ce qui te plaît ;)

      Supprimer
  33. ALLELUJAH ! J'ai réussi à installer le menu déroulant tout bien comme il faut :D

    Un grand merci à toi ! Tes tutos sont vraiment au top !

    http://annabellew.blogspot.fr/

    RépondreSupprimer
  34. BOnjour, j'ai suivi à la lettre ton tutoriel sur le menu déroulant, sauf que mes sous catégories s'affichent directement comme une catégorie... j'ai beau essayé de modifier le codage en fonction de ce que tu disais dans les commentaires rien à faire, rien ne change ... peux-tu m'aider ?

    Merci !

    RépondreSupprimer
  35. Bonsoir, merci beaucoup pour vos tutos, mais j'ai rencontré des petits soucis, comme la barre qui ne veut pas se mettre au milieu, elle reste sur le côté gauche. Ensuite le menu déroulant n'apparait même pas donc j'ai supprimé à nouveau. Et j'ai un petit truc avec écrit "javascript" en dessous de la barre ... Je suis dessus depuis deux heures et j'ai essayé de mettre le menu en haut du blog, mais encore une fois ça ne marche pas. Je désespère vraiment ... :( J'attends de tes nouvelles .. Pour l'instant je laisse le code html comme ça, mais mon blog n'est pas présentable là avec cette pseudo barre de de navigation :/ En tout cas j'ai suivis comme tu as montré et ça ne marche pas chez moi ...Merci encore!

    RépondreSupprimer
    Réponses
    1. Bonjour Lily B,
      Peux-tu me donner le lien vers ton blog ?
      Il faut bien vérifier que tu as tous les codes indiqués et qu'il n'y a pas d'erreur comme un oubli de sign ; : { ou } dans tes codes CSS, ou de codes manquants ou en trop dans ton code HTML.

      Supprimer
    2. Voici le lien: http://www.becauseimagirl.be/
      C'est ça le problème, j'ai vérifié et j'ai fais exactement comme tu as dit :/ Encore merci d'avoir répondu :)

      Supprimer
    3. Pour centrer les liens de ton menu rajoute cette ligne :

      text-align: center;

      A ce code :

      .tabs-inner .widget ul {
      margin-top: 20px;
      margin-bottom: 20px;
      border-bottom: none;
      border-bottom-width: 5px;
      border-top: none;
      border-top-color: #96CA2D;
      border-top-width: 1px;
      }

      Pour le menu déroulant, je ne vois pas le code HTML du menu déroulant dans le code de ton menu :/

      Supprimer
  36. Hello!

    Je viens de passer sous MAC et je viens de réaliser que mon menu parfaitement déroulant sur PC (Chrome, Mozilla..) ne se déroule tout simplement plus sous Safari, plus du tout! :o
    Voici mon blog: http://www.julinfinity.com
    Est-ce que tu saurais pourquoi par hasard s'il te plait?

    Encore merci pour tout,

    Julie.

    RépondreSupprimer
    Réponses
    1. Coucou Julie,
      Je n'ai pas de Mac sous la main, mais j'essaye de regarder sur un mac ce weekend et je te tiens au courant ;)

      Supprimer
    2. Coucou, ne t'en fais pas le souci est réglé, mon opacité était à 0.9 et ça posait souci, ça ne s'affichait pas chez tout le monde sous Safari ou chrome sur Mac, je l'ai remise à 1 et c'est good! Merci quand même! :)

      Supprimer
    3. Ouf bonne nouvelle alors ;)
      C'est fou comme c'est souvent un tout petit détail qui cause les problèmes ^^ Le plus dur c'est de trouver ce détail.

      Supprimer
  37. Bonjour. Je tenais déjà à te remercier car grâce à toi j'ai fait beaucoup de progrès dans la présentation de mon petit blog. J'ai réussi à faire mes menus dans la barre de navigation et les menus déroulants pour les sous catégories. Du moins j'ai compris, j'ai juste testé pour la catégorie "Ballades".
    Je voulais juste savoir s'il était possible de mettre ces sous-catégories horizontalement et non verticalement .. en fait je voudrais faire un test pour voir si c'est plus pratique et visuellement plus joli car actuellement lorsque je suis déjà sur l'affichage d'une catégorie et que je veux en changer, et bien le menu deroulant chevauche sur le premier article .. je ne sais pas si je suis claire ...
    En fait, aligner les sous-catégories comme les liens sont alignés dans la barre de navigation ...
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Nadia,
      Oui c'est possible, remplace ce code :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 150px;
      padding-top: 10px;
      z-index: 9999;
      }

      Par celui-ci :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      left: 0;
      width: 100%;
      padding-top: 10px;
      z-index: 9999;
      }


      Ensuite remplace ce code :

      .tabs .widget li li {
      display: inline-block;
      float: none;
      margin: 0px;
      padding: 0px;
      width: 150px;
      }

      Par celui-ci :

      .tabs .widget li li {
      display: inline-block;
      float: none;
      margin: 0px;
      padding: 0px;
      width: auto;
      }

      Et voilà ;)

      Supprimer
  38. Coucou Catherine,

    Cela fais un bon moment que j'avais envie de crée un menu déroulant, car ton article me faisait de l’œil. Je m'y suis donc mis cet après-midi et j'ai deux petites questions à te poser :

    - Pour changer la police, l'écriture, le font et la taille de nos catégories du menu déroulant doit-t’ont copier le code html de l'article "La barre de navigation - partie 2 " est le remplir en fonction de ce que l'on souhaite obtenir ?

    - J'ai fais ce que tu as dis mais quand je survole le libelllé recette, le menu déroulant s'affiche avec recettes sucrées et recettes salées mais quand je clique dessus, on me met "Désolé, la page que vous recherchez dans ce blog n'existe pas. ", je ne comprend pas pourquoi, il y a t'il une manipulation à faire ?

    Bref merci pour tous ces tutos qui m'aide énormément, je crois que sans tes articles la plupart des blogs ne serais pas aussi joli et au gout de leurs auteurs.

    Pleins de bisous Camille ♥♥♥



    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Pour ta première question, oui tu peux utiliser les codes pour la police, les couleurs, etc. du tuto "La barre de navigation - partie 2 " ;)
      Ensuite, pour ta deuxième remarque, il y a un problème avec l'adresse URL de ton lien. Vérifie l'adresse URL que tu as entré, qu'il ne manque pas quelque chose, ou qu'il n'y a pas quelque chose en trop. Pour trouver les adresses URL de tes articles, pages et libellés suit les instructions de la partie 1 du tutoriel sur la barre de navigation ;)

      Supprimer
  39. Waouh !! Tu sais que tu es un génie !!!!! Merci beaucoup d'avoir pris le temps de regarder, trop gentille ! Je crois que j'ai compris en plus ...

    RépondreSupprimer
  40. Bonjour Ladybirdr, un énorme merci deja pour tes tutos ils sont juste fantastiques et on peut vraiment faire ce qu'on veut :)
    Petite question, peut-tu m'expliquer comment mettre un fond de couleur sur le barre de menu? Un peu comme tu as fait sur ton blog, mon blog est dans les tons rose et blanc et j'aimerais mettre la barre en rose :)
    Merci beaucoup, enormémeeeeeeeeeeeent :)

    RépondreSupprimer
    Réponses
    1. Bonjour, j'ai fait un tutoriel en 2 parties pour créer et personnaliser son menu :
      http://ladybirdr.blogspot.com/2014/02/customiser-son-blogger-la-barre-de.html
      et
      http://ladybirdr.blogspot.com/2014/03/customiser-son-blogger-la-barre-de.html

      Tu peux trouver un index de tous mes tutoriels en cliquant sur Tutoriels dans mon menu ;)

      Supprimer
  41. Bonjour(soir),

    En premier lieu et surtout : Un grand merci pour tes tutos qui m'aident énormément ! Et qui ont fait avancer l'esthétisme de mon blog. ;)

    En second lieu : J'ai beau regarder, effacer et recoller ... Je n'arrive pas à faire disparaitre un second menu déroulant. :/ En faite, il s'affiche en double.

    http://lefenuadetuii.blogspot.fr/

    Menu principal > CATEGORIES : Un second menu déroulant "SALEE / SUCREE" s'affiche en plus.
    Alors que ce dernier devrait être seulement affiché devant la sous catégorie "RECETTES".

    Je n'arrive pas à l'enlever sans faire disparaître également le bon.
    De plus, je n'arrive pas à le faire descendre pour aligner SALEE à RECETTES. ><

    Merci par avance.

    Bien cordialement,
    Tuii.

    RépondreSupprimer
    Réponses
    1. Bonjour Tuii,
      Tout d'abord retrouve ce code :

      .tabs .widget li:hover ul {
      display: block !important;
      margin-top: 0px;
      margin-left: 0px;
      }

      Et supprime !important comme ceci:

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 0px;
      }

      Ensuite remplace ce code :

      .tabs ul ul li:hover ul {
      display: block !important;
      left: 150px !important;
      margin-top: -41px !important;
      }

      Par celui-ci :

      .tabs ul ul li:hover ul {
      display: block !important;
      left: 150px !important;
      margin-top: -22px !important;
      padding-top: 0;
      }

      Et voilà ;)

      Supprimer
    2. Je te remercie infiniment !
      Mon soucis envolé grâce à toi ! ;)

      En te souhaitant une bonne continuation. :D

      Tuii.

      Supprimer
  42. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  43. Bonsoir Catherine, voilà mon problème. J'ai bien suivi ton tuto mais ce qui me gêne c'est que mes sous catégories ne sont pas en dessous de la catégories concerné et du coup on ne peux pas cliquer dessus, je laisse aller voir si tu as le temps sur www.leblogpoidsplume.blogspot.fr . Merci par avance !

    RépondreSupprimer
    Réponses
    1. Le problème vient d'un petit bout de code.
      Retrouve 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;

      Et tes menus déroulants apparaîtront sous les liens ;)

      Supprimer
  44. Bonjour Catherine,

    J'ai suivis toutes tes indications, j'ai refais ce tutoriel une dizaine de fois, j'ai regardé dans les commentaires mais rien n'y fait je n'y arrive vraiment pas, mon menu est bien crée, mais les catégories se mettent sous le domaine dans lequel je veux les mettre... Si tu pouvais y jeter un coup d'oeil ça serait vraiment sympa, c'est l'une des dernières choses que je veux changer sur mon blog pour qu'il soit opérationnel à mon goût.

    En tout cas je te remercie pour tous les tutos que tu as proposé jusqu'a présent car c'est grâce à toi que j'ai réussis à créer mon blog, sinon je pense que j'aurai abandonné depuis bien longtemps...

    Mathilde. - www.globetrotterlovers.com

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      As-tu bien ajouté le code CSS pour les menus déroulants ? Car je ne le trouve pas dans ton code CSS. Ces codes vont définir la visibilité par défaut du menu déroulant, et au survol du lien sous-lequel il se trouve.

      Supprimer
  45. Bonjour,

    Merci pour ta réponse j'avais un soucis avec mes mails je n'avais pas vu que tu m'avais répondu, je pensais que mon commentaire n'avait pas été publié, merci pour ta réponse ducoup j'ai remis le code CSS, mais cela me fait toujours la même chose... Impossible de créer le menu déroulant, les catégories s'ajoutent directement dans la barre de menu sous le "thème" dans lequel je veux les mettre...

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      Je vois bien les codes CSS du menu mais je ne vois toujours pas les codes CSS pour les menus déroulants :/

      Supprimer
    2. Merci beaucoup d'avoir regardé, je ne comprends pas car j'ai bien mis mon code CSS pour mon menu déroulant, car ma catégorie est "Parcours" et mes sous catégories sont "Nouvelle-Zélande", "Australie" et "Asie" quand je visionne mon blog mes sous catégories apparaissent bien mais pas en menu déroulant pourtant j'ai bien inscrit le code CSS dans le menu sinon mes sous catégories ne s'afficheraient pas à l'écran? Je désespère je comprend pas du tout...


      Merci beaucoup pour les libellés cela a bien fonctionné :)

      Supprimer
    3. Attention, le code du menu dans ton gadget avec les signes < et > c'est le code HTML. Le code CSS correspond au code qu'il faut ajouter dans Modèle > Modifier le code HTML au dessus de la ligne /* Columns par exemple.

      Tes liens s'affichent avec seulement le code HTML. Par contre le code CSS va permettre de modifier l'apparence, et la visibilité dans ce cas, des menus-déroulants ;)

      Supprimer
  46. Oh et j'avais une autre question, une fois les articles créer comment fait-on pour les ajouter dans une page du menu par la suite, je sais que c'est par rapport aux libellés, mais je ne comprends pas trop comment cela fonctionne, car j'ai essayé en mettant un libellé dans mon article mais il ne s'est pas affiché dans la page que je souhaitais... Merci, je suis désolé de t'embêter avec toutes ces questions, mais ce sont vraiment les deux choses qui me bloquent...

    RépondreSupprimer
    Réponses
    1. Pour associer un article à une catégorie il faut bien utiliser les libellés. Par contre le lien de ton menu ne doit pas renvoyer à une page mais à une recherche de libellé. Le lien du menu doit être comme ceci :

      http://tonblog.blogspot.fr/search/label/Libellé

      Pour trouver l'adresse URL exacte à utiliser, le plus simple c'est d'aller sur la page de ton article et de faire un clique-droit sur le nom de ton libellé sur cette page. Sélectionne copier l'adresse du lien et colle cette adresse dans le code HTML du lien de ton menu. Pour plus d'infos : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienLibellé

      Supprimer
  47. Hello Catherine!

    J'ai un tout petit souci et je voudrais savoir si tu peux m'aider?
    J'ai suivi tous tes tutos pour ma barre de navigation et mon menu déroulant...
    J'ai fixé ma barre de navigation en haut de mon blog comme tu l'as dit, c'est centré, nickel...Mais j'aimerais que le fond de la barre s'étende sur toute la largeur de mon blog, et après 1h d'essais je ne vois vraiment pas comment faire. Une astuce?

    Merci d'avance
    Caroline
    www.leslubiesdecaroline.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Caroline,
      Tu peux simplement ajouter la même couleur de fond au contenant de ton menu.
      Retrouve le code CSS suivant :

      /* Fixer la barre de navigation en haut du blog */
      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Et rajoute la couleur de fond de ton menu avant le signe } comme ceci :

      /* Fixer la barre de navigation en haut du blog */
      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      background-color: #6EB0B1; /* Couleur de fond */
      }

      Et voilà ;)

      Supprimer
  48. Salut je sais que tu as répondue a cette question mais je n'ai pas vraiment compris comment fait-on pour associer un article a une page ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tout dépend de ce que tu souhaites faire.

      Tu peux :
      1. Associer une page ou un article à un lien de ton menu (c'est la même méthode) : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienArticle
      3. Associer plusieurs articles à un lien de ton menu. Pour cela il faut utiliser les libellés. Commence par associer un même libellé à tous les articles que tu souhaites faire afficher ensemble (http://ladybirdr.blogspot.com/2015/02/ajouter-des-libelles-aux-articles.html).
      Par exemple tous mes articles de tutoriels ont le libellé Customiser son Blogger.
      Ensuite suit les étapes ici : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienLibellé

      Fais bien attention à l'adresse URL des liens de ton menu ! Car s'ils sont faux, cela ne marchera pas ;)

      Supprimer
  49. Bonjour Catherine,
    J'ai bien réussi la mise en place du menu déroulant, seulement les sous catégories se sont trouvées tout à gauche de la page alors que ma barre de navigation est centrée. J'ai donc joué sur ce paramètres comme tu l'as conseillé dans ton tuto :
    .tabs .widget li:hover ul {
    display: block;
    margin-top: 0px;
    margin-left: 450px; /* Alignement avec le lien de la barre de navigation */
    }

    Il était à -15 px je l'ai passé à 450 px... Donc visuellement ça passe... mais sais tu si il est possible que les catégories s'alignent en dessous de la catégorie de manière automatique ? Car si je rajoute d'autres sections dans la barre de navigation, il faudra changer ce paramètre manuellement de nouveau j'imagine..?

    De plus, je ne sais pas pourquoi ma barre de recherche empiète sur mon menu comme ça...?

    Merci encore pour tes tutos géniaux et ton aide précieuse !!

    Bon dimanche

    Sandrine

    RépondreSupprimer
  50. Catherine, j'ai finalement réglé le pb de sous catégories, j'ai passé la barre de navigation au dessus avec ton autre tuto et c'est revenu à la normale, j'ai enlevé ces 450 px et remis -15px ! Merci encore pour tes tutos !! Bon dimanche,

    Sandrine

    RépondreSupprimer
    Réponses
    1. Bonjour Sandrine,
      Contente que tu as pu régler le problème ;)

      Supprimer
  51. Bonsoir, je reviens vers toi pour le même problème. J'ai changé de thème, j'ai acheté un thème blogger or je ne trouve pas l'endroit dans le code html pour modifier les sous-categories.. elles n'apparaissent pas. C'est à dire que je cherche le l'endroit dans le code je ne trouve pas, or c'est prévu d'avoir un menu déroulant dans le thème :/ Je suis sous mac, le même problème qu'une fille plus haut.

    Ah et j'aurais une autre question également :)

    Mon blog: www.becauseimagirl.be

    RépondreSupprimer
    Réponses
    1. Bonjour Lily,
      Le menu-déroulant apparaît bien sur mon ordi. C'est peut-être un problème avec le thème que tu as acheté. As-tu essayé de contacter le vendeur sur Etsy ?

      Supprimer
  52. Coucou!
    Je te pose pas mal de questions en ce moment
    J'ai eu une idée je souhaite mettre le gadget formulaire de contact en pied de page jusque là c'est ok.
    Dans ma barre de navigation j'ai fais une page contact en fait je souhaiterais que quand les gens cliquent sur contact ça n'ouvre pas une page mais que ça les fassent descendre en pied de page j'espère que tu comprendras. Je te remercie par avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est tout à fait possible. Il faut tout d'abord trouver le nom de ton gadget (comme expliqué dans un précédent commentaire que je t'ai laissé, pour trouver le nom de ton gadget HTML). Dans ce cas le nom de ton gadget ressemblera à :

      ContactFormX

      Avec X étant un nombre.

      Ensuite il remplacer l'URL de ton lien Contact par :

      #ContactFormX

      En remplaçant X par le numéro de ton gadget ;)

      Le code HTML de ton lien contact devrait ressembler à ceci :

      <li><a href="#ContactFormX">Contact</a></li>

      Et voilà ;)

      Supprimer
    2. Tu es adorable merci beaucoup je t'ai posé pleins de questions alors je souhaite vraiment te remercier parce que tu prends le temps et grâce à toi je réalise le blog que je souhaite.
      J'ai encore commenté par mal avec des questions vu que mon blog n'est pas visible je souhaiterais savoir si tu veux que je te mette dans les lecteurs autorisés parce que je suis arrivé à résoudre pas mal de chose mais le soucis des navigateurs qui n'affichent pas les mêmes choses je ne sais pas comment faire
      Merci!

      Supprimer
    3. Pas de soucis, je t'ai expliqué comment faire dans une autre réponse ;)

      Supprimer
  53. Hello :) j'ai un gros problème avec mon menu déroulant, je n'arrive absolument pas à changer leur design (réduire la largeur, changer le fond etc) et quand je passe ma souris dessus les catégories disparaissent... Mon blog est : fairysfox.blogspot.fr
    Je suis dessus depuis 3h et je commence à saturer un poil ^^
    En plus de ça je n'arrive pas non plus à changer l'écriture de ma barre de navigation qui doit être en principe en Cardo...

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphanie,
      Je pense que cela vient de ton thème. En plus de ça je trouve quelques erreurs dans ton code : dil semblerait qu tu ai ajouté les codes CSS à l'intérieur d'un autre code. Tout ce qui suit ces erreurs est mal pris en compte.

      Tout d'abord retrouve cette ligne :

      }#menu, #menu ul /* Liste */

      Et remplace-la par :

      }

      Ensuite retrouve cette ligne :

      }{ z-index:100;

      Et remplace-la par :

      }
      #menu, #menu ul {
      z-index:100;

      Ensuite il faudrait déplacer tes codes CSS à partir de la ligne :

      /* Espacement et Bordure du Dernier Lien de la Barre de Navigation */

      Jusqu'au code (y compris) :

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

      Déplace le tout juste APRES le signe } du code commençant par :

      #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul

      Une fois que cela est fait. Regarde ce que cela donne. Il faudra sûrement faire des retouches car tu as pleins de codes CSS en plus qui définissent le visuel du menu, à partir de la ligne :

      #menu /* Ensemble du menu */

      Supprimer
  54. Bonjour Lily,
    un des meilleurs blog de tutos pour les nuls comme moi (tant pis je débute lol )
    les sous catégories s'affichent bien sous la bonne catégorie mais restent figés. Je ne trouve pas dans le Html la partie ".tabs .widget li, .tabs .widget ....." et ".tabs-outer" Donc je ne sais pas où mettre vos codes .
    peux tu m'aider
    merci beaucoup

    voici mon lien cgtplateformechimietavaux.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphane,
      Si tu ne trouves pas ces codes, alors rajoute-les juste au-dessus de la ligne :

      /* Content

      Comme ceci :

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

      .tabs-outer {
      overflow: visible;
      }

      /* Content

      Supprimer
  55. Bonsoir, j'ai un probleme avec mon menu-déroulant, car les sous-catégories apparaissent tout a gauche, or je voudrais qu'elles soit juste en dessous.. comment faire ? j'ai tout suivie a la lettre et je n'arrive pas a trouver mon erreur :/ mon blog est : lemondedepaulinee.blogspot.fr
    merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réglé le problème ? Car ton menu déroulant apparaît bien sous ton lien :)

      Supprimer
  56. Bonsoir Catherine. Alors là, je suis bien embêtée. J'ai terminé quasi toutes les modifications que je voulais apporter à mon blog grâce à tes tutos géniaux, mais là, je bute sérieusement.

    Je voulais ajouter une dernière rubrique à ma barre de menu que j'ai tout d'abord déplacé en haut de la page puis fixé (tout cela en suivant les explications de tes tutos). Sauf que... le gadget a disparu, je ne le vois plus dans "mise en page".
    Quand je vais dans "modifier le code HTML" je vois le code de la barre de menu, mais si j'essaye d'y apporter une modification j'ai un message d'erreur qui s'affiche lorsque je veux prévisualiser.
    Je n'y comprends rien.
    Je veux rajouter une rubrique qui redirige vers une page de mon blog.
    Comment dois-je faire ?

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Pour fixer le menu en haut du blog il n'y a pas besoin de le déplacer.
      Essaye de re-déplacer ton menu, de la ligne :



      A la ligne :



      Colle ton menu dans un nouveau gadget HTML/JavaScript dans Mise en page.
      Comme le code CSS pour fixer le menu est associé au code HTML de ton menu, il devrait toujours rester fixé en haut du blog ;)

      Supprimer
    2. C'est nickel ! J'ai fait comme tu as dit : j'ai copié le code de la barre de menu que j'ai collé dans un nouveau gadget et j'ai pu apporter les modifications que je voulais !
      Merci beaucoup !

      J'ai maintenant hâte que de nouveaux tutos arrivent pour continuer à améliorer tout ça !
      Je me suis permis de citer ton blog dans l'un de mes articles.

      Merci pour tout ! :-D

      Supprimer
  57. Bonjour Catherine!
    J'adore ton blog : ergonomique et didactique!! Bravo
    J'ai récemment créé un blog avec un menu en haut de la page. Je ne l'ai pas créé avec le gadget HTML/Javascript comme tu le proposes dans ton tuto, mais plutôt avec le gadget "Pages". Jusque là, pas de problème.
    Maintenant, pour certains onglets, j'ai besoin de créer un menu déroulant pour regrouper les libellés. Je me demande ce que je peux faire. J'ai essayé de suivre ta méthode mais je n'ai pas trouvé un moyen pour accéder au code HTML de ma liste d'onglets.
    Je te mets l'adresse de mon blog pour que tu aies une idée : http://laboecolo.blogspot.com/
    Les onglets auxquels je voudrais ajouter un menu déroulant sont le labo cosmétique et le labo culinaire.
    Voilà, j'espère que j'ai bien expliqué mon problème.
    Je te remercie d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement on ne peut pas ajouter de mon déroulant sur la gadget Pages, c'est pour cela qu'il faut créer un menu en HTML :)

      Supprimer
    2. ok. Merci beaucoup pour ta réponse.
      Bonne continuation ;)

      Supprimer
    3. Bonjour Catherine,
      J'ai appliqué ton tuto maintenant et ça marche!
      Sinon, il me reste deux ptits soucis à régler :
      1. Ma barre est bien centrée sur la largeur de la page. Je veux maintenant centrer le texte à la verticale.
      2. Quand je sélectionne une rubrique, j'aimerais que l'arrière-plan gris couvre toute la case, pas uniquement le texte.
      mercii pour ton aide!!

      Supprimer
    4. Bonjour,

      Remplace ton code :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      margin-top: 00px;
      margin-bottom: 20px;
      border-bottom: none;
      border-bottom-color: none;
      border-bottom-width: none;
      border-top: none;
      border-top-color: none;
      border-top-width: none;
      height : 40px;
      text-align: center;
      background: #fbfcfd;
      }

      Par celui-ci :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      margin-top: 0px;
      margin-bottom: 20px;
      text-align: center;
      background: #fbfcfd;
      }

      J'ai supprimé les ligne suivantes qui ne servent à rien :

      border-bottom: none;
      border-bottom-color: none;
      border-bottom-width: none;
      border-top: none;
      border-top-color: none;
      border-top-width: none;

      De plus, j'ai supprimé :

      height : 40px;

      Pour pouvoir ajouter de l'espace autour de tes liens et donc les centrer verticalement.

      Ensuite cherche ton code :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Courier;
      font-size: 15px;
      font-style: Bold;
      text-decoration: none;
      color: #5da9f9;
      margin-right: 30px;
      }

      Remplace-le par :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Courier;
      font-size: 15px;
      text-decoration: none;
      color: #5da9f9;
      padding: 10px 15px;
      display: inline-block;
      }

      J'ai supprimé :

      margin-right: 30px;

      Que j'ai remplacé par :

      padding: 10px 15px;
      display: inline-block;

      De plus, cette ligne :

      font-style: Bold;

      Etait fausse. Si tu veux mettre tes liens en gras, alors utilise cette ligne :

      font-weight: bold;

      Et voilà ;)

      Supprimer
    5. ça y est!! Ma barre de navigation est bien centrée, grâce à toi!!
      Mille mercis pour tes explications.
      Tu es un ange!!

      Supprimer
    6. Rebonjour Catherine,
      J'ai bien suivi ton tuto pour la création du menu déroulant.
      J'aimerais pourtant avoir la même largeur au niveau des sous-catégories et des catégories principales.
      Merci encore!!

      Supprimer
    7. Bonjour,
      Tu ne pourras pas avoir exactement la même largeur que le lien sous lequel le menu-déroulant apparaît. Mais tu peux augmenter la largeur de tes menus-déroulants en augmentant la valeur de la ligne :

      width: 150px; /* Largeur de la barre des sous-catégories */

      De ton code :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      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;
      }

      Augmente la valeur de 150px pour augmenter la largeur des menu-déroulants.
      De plus tu peux centrer tes menus-déroulants en remplaçant la ligne :

      margin-left: -15px; /* Alignement avec le lien de la barre de navigation */

      De ce code :

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

      Par :

      margin-left: 0; /* Alignement avec le lien de la barre de navigation */

      Comme ceci :

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

      Supprimer
    8. Merci beaucoup!! Tu me sauves!

      Supprimer
  58. Bonjour !

    Merci pour les tutos!

    J'ai bien réussi à créer le menu déroulant et à le mettre en forme comme je voulais, mais j'ai remarqué en voulant le tester qu'il m'était impossible de cliquer dessus. Je parle de la catégorie Miami, sous le libellé Etats-Unis. Impossible de cliquer sur Miami.
    Aurais-tu une idée de ce qui ne va pas? :/

    Bonne soirée

    Little Leeloo

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

      Supprimer
    2. Bonsoir,

      Pardon je pensais qu'il apparaissait.
      http://littleleeloo.blogspot.com

      D'ailleurs j'ai créé une mise en page en carré pour mes articles mais il y a des espaces blancs entre certains articles, je ne comprends pas trop.

      Supprimer
    3. Bonjour,

      Retrouve ton code suivant :

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

      Remplace ce code par celui-ci:

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


      Pour les articles, de quels espaces veux-tu parler ?

      Supprimer
    4. Merci beaucoup!
      Pardon pour la réponse tardive.

      Ca ne se voit pas trop sur la première page, mais dès que l'on clique sur "Articles plus anciens" on le remarque.
      Par exemple j'ai 9 articles placés en carré "3x3". Mais sur la ligne du milieu il n'y a qu'un seul article, ils sont tous décalés.
      Je sais pas si c'est très claire :/ Cela dépend peut-être de l'ordinateur où je regarde je n'ai pas testé avec un autre ordinateur (j'ai une surface)

      Bonne soirée et encore merci

      Supprimer
    5. Bonjour Leeloo,
      Le problème vient sûrement du fait que tu as posté des articles le même jour. Blogger regroupe les articles postés le même jour en colonne. Du coup cela fausse l'affichage en miniature. Pour régler facilement ce problème tu peux simplement changer la date de publication d'un des 2 articles ;)

      Supprimer
  59. Bonjour,

    Ayant télécharger un modèle blogger pour mon blog, j'essaie désespérément d'y intégrer un menu déroulant avec des sous-catégories. Malheureusement, lorsque je crée celle-ci, elles apparaissent à la suite des catégories principales. Par exemple, lorsque je crée la sous-catégorie "Recettes salées" (j'ai suivi votre tutoriel) dans "Culinarium" (catégorie principale), celle-ci apparaît en continu avec Culinarium "Culinarium Recettes salées", et encore une fois après, ce qui me donne "Culinarium Recettes Salées/Recettes salées". Alors j'ai bien essayé de suivre votre tutoriel, mais impossible de trouver "Tabs".
    Après moult tentatives, j'ai trouvé quel intitulé correspondait à mon menu, il s'agit de "sky-mega-menu", mais je ne sais comment le transformer pour obtenir un menu déroulant qui tienne ses promesses. Voici l'adresse de mon blog : http://larbre-en-ciel.blogspot.fr/
    Le contenu du code HTML correspondant (j'ai mis un peu ce qu'il y avait avant et après, pour situer la partie) :
    /* HEADER WRAPPER */
    #header-wrapper {
    margin:0 auto;
    overflow:hidden;
    padding: 0 28px;
    background:$(maincolor);
    z-index:300;
    display:none;
    position:relative;
    }

    .header img {
    display: block;
    }
    .header-right {
    float:right;
    padding:0;
    overflow:hidden;
    margin:55px 0;
    width:41.8%;
    max-width:468px;
    }
    .header-right img {
    display:block;
    }
    /**/
    /* defaults */
    /**/
    .sky-mega-menu,
    .sky-mega-menu * {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;
    background: none;
    }
    .sky-mega-menu {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    ul#sub-menu {
    padding: 0!important;
    }

    /**/
    /* level 1 */
    /**/
    .sky-mega-menu {
    position: relative;
    z-index: 999;
    background: rgba(255,255,255,0.9);

    font-size: 0;
    line-height: 0;
    text-align: right;
    }
    .sky-mega-menu:after {
    content: '';
    display: table;
    clear: both;
    }
    .sky-mega-menu li {
    position: relative;
    display: inline-block;
    float: left;
    padding: 5px;
    border-style: solid;
    border-color: rgba(0,0,0,.1);
    border-right-width: 1px;
    font-size: 13px;
    line-height: 40px;
    text-align: left;
    white-space: nowrap;
    }
    .sky-mega-menu li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    text-transform:capitalize;
    color: #666;
    transition: background 0.4s, color 0.4s;
    -o-transition: background 0.4s, color 0.4s;
    -ms-transition: background 0.4s, color 0.4s;
    -moz-transition: background 0.4s, color 0.4s;
    -webkit-transition: background 0.4s, color 0.4s;
    }
    .sky-mega-menu li > div {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -9999px;
    margin-top: 8px;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity: 0;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    }
    .sky-mega-menu li > div:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;
    }
    .sky-mega-menu li > div:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 24px;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(255,255,255,0.9);
    border-left: 5px solid transparent;
    }
    .sky-mega-menu li:hover > a,
    .sky-mega-menu li.current > a {
    background: #2da5da;
    color: #fff;
    }

    RépondreSupprimer
  60. La suite :
    .sky-mega-menu li:hover > div {
    left: 0;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    }
    .sky-mega-menu .right {
    float: none;
    border-right-width: 0;
    border-left-width: 1px;
    }
    .sky-mega-menu .right > div {
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu .right:hover > div {
    right: 0;
    left: auto;
    }
    .sky-mega-menu .right:hover > div:before {
    right: 24px;
    left: auto;
    }
    .sky-mega-menu .switcher {
    display: none;
    }


    /**/
    /* level 2+ */
    /**/
    .sky-mega-menu li li {
    display: block;
    float: none;
    border-width: 0;
    border-top-width: 1px;
    line-height: 21px;
    white-space: normal;
    }
    .sky-mega-menu li li:first-child {
    border-top: 0;
    }
    .sky-mega-menu li li a {
    padding-top: 12px;
    padding-bottom: 12px;
    }
    .sky-mega-menu li li > div {
    top: 0;
    margin: 0 0 0 8px;
    }
    .sky-mega-menu li li > div:after {
    top: 0;
    right: 100%;
    bottom: auto;
    left: auto;
    width: 8px;
    height: 100%;
    }
    .sky-mega-menu li li > div:before {
    top: 22px;
    right: 100%;
    bottom: auto;
    left: auto;
    border-top: 5px solid transparent;
    border-right: 5px solid rgba(255,255,255,0.9);
    border-bottom: 5px solid transparent;
    }
    .sky-mega-menu li li:hover > div {
    left: 100%;
    }
    .sky-mega-menu .right li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu .right li > div:after {
    right: auto;
    left: 100%;
    }
    .sky-mega-menu .right li > div:before {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu .right li:hover > div {
    right: 100%;
    left: auto;
    }


    /**/
    /* positions */
    /**/
    .sky-mega-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    }
    .sky-mega-menu-pos-bottom li > div {
    top: auto;
    bottom: 100%;
    margin: 0 0 8px;
    -o-transform-origin-y: 100%;
    -ms-transform-origin-y: 100%;
    -moz-transform-origin-y: 100%;
    -webkit-transform-origin-y: 100%;
    }
    .sky-mega-menu-pos-bottom li > div:after {
    top: 100%;
    bottom: auto;
    }
    .sky-mega-menu-pos-bottom li > div:before {
    top: 100%;
    bottom: auto;
    border-top: 5px solid rgba(255,255,255,0.9);
    border-right: 5px solid transparent;
    border-bottom: none;
    border-left: 5px solid transparent;
    }
    .sky-mega-menu-pos-bottom li li > div {
    top: auto;
    bottom: 0;
    }
    .sky-mega-menu-pos-bottom li li > div:before {
    top: auto;
    bottom: 22px;
    }

    RépondreSupprimer
  61. Et la fin :
    .sky-mega-menu-pos-bottom.sky-mega-menu-fixed {
    top: auto;
    bottom: 0;
    }

    .sky-mega-menu-pos-left li,
    .sky-mega-menu-pos-right li {
    display: block;
    float: none;
    border-width: 0;
    border-top-width: 1px;
    }
    .sky-mega-menu-pos-left li:first-child,
    .sky-mega-menu-pos-right li:first-child {
    border-top: 0;
    }
    .sky-mega-menu-pos-left li > div,
    .sky-mega-menu-pos-right li > div {
    top: 0;
    }
    .sky-mega-menu-pos-left li > div {
    margin: 0 0 0 8px;
    }
    .sky-mega-menu-pos-right li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu-pos-left li > div:after,
    .sky-mega-menu-pos-right li > div:after {
    top: 0;
    bottom: auto;
    width: 8px;
    height: 100%;
    }
    .sky-mega-menu-pos-left li > div:after {
    right: 100%;
    left: auto;
    }
    .sky-mega-menu-pos-right li > div:after {
    right: auto;
    left: 100%;
    }
    .sky-mega-menu-pos-left li > div:before,
    .sky-mega-menu-pos-right li > div:before {
    top: 22px;
    bottom: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    }
    .sky-mega-menu-pos-left li > div:before {
    right: 100%;
    left: auto;
    border-right: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu-pos-right li > div:before {
    right: auto;
    left: 100%;
    border-left: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu-pos-left li:hover > div {
    left: 100%;
    }
    .sky-mega-menu-pos-right li:hover > div {
    right: 100%;
    left: auto;
    }
    .sky-mega-menu-pos-left .bottom > div,
    .sky-mega-menu-pos-right .bottom > div {
    top: auto;
    bottom: 0;
    -o-transform-origin-y: 100%;
    -ms-transform-origin-y: 100%;
    -moz-transform-origin-y: 100%;
    -webkit-transform-origin-y: 100%;
    }
    .sky-mega-menu-pos-left .bottom > div:before,
    .sky-mega-menu-pos-right .bottom > div:before {
    top: auto;
    bottom: 22px;
    }
    .sky-mega-menu-pos-right li li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu-pos-right li li > div:after {
    right: auto;
    left: 100%;
    }
    .sky-mega-menu-pos-right li li > div:before {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu-pos-right li li:hover > div {
    right: 100%;
    left: auto;
    }
    .sky-mega-menu-pos-left.sky-mega-menu-fixed {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: auto;
    }
    .sky-mega-menu-pos-right.sky-mega-menu-fixed {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    }



    .sky-mega-menu li:hover > a,
    .sky-mega-menu li.current > a {
    background-color: #fff;
    color: $(maincolor);
    }


    .sky-mega-menu li ul{
    width: 233px;
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -9999px;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity: 0;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;

    }

    ul#sub-menu:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 24px;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(255,255,255,0.9);
    border-left: 5px solid transparent;
    }

    .sky-mega-menu-anim-scale li #sub-menu{

    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    }

    .sky-mega-menu-anim-scale li:hover #sub-menu{

    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);

    }

    .sky-mega-menu li:hover #sub-menu{
    left: 0;
    opacity: 1;
    -webkit-transform: translate(0, 0);

    }



    /* CONTENT WRAPPER */

    Merci d'avance de votre réponse et belle soirée à vous.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant le code de ton blog, ton menu actuel à été créé avec un gadget Liste de liens. Pour créer un menu déroulant il faut créer un menu dans un gadget HTML/JavaScript.
      Pour cela il faut suivre 3 tutoriels :
      - Pour créer le menu : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html
      - Pour modifier l'apparence du menu : http://ladybirdr.blogspot.fr/2014/03/commentaires-la-barre-de-navigation.html
      - Pour créer les menus déroulants : http://ladybirdr.blogspot.fr/2014/09/commentaires-creer-un-menu-deroulant.html

      Si tu ne trouves pas /* Tabs, pas de panique, colle les codes CSS (dans le 2e tutoriel) avant la ligne :

      ]]></b:skin>

      Supprimer
  62. Bonjour,

    Tout d'abord un grand MERCI pour tous ces chouettes tutos ! Moi qui n'y connaissait pas grand chose j'ai le sentiment de devenir douée (lol).
    J'ai suivi l'ensemble de tes tutos concernant la barre de navigation et c'est une réussite ! J'aimerai que mes onglets soit plus espacés et occupent l'espace sur presque la largeur du blog, je n'arrive pas à effectuer ce réglage une idée?
    Belle soirée

    RépondreSupprimer
    Réponses
    1. Bonjour Virginie,
      Pour espacer tes liens il te suffit d'augmenter la valeur de margin dans le code suivant :

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

      Remplace :

      margin-right: 20px;

      Par :

      margin-right: 20px; /* Espace à droite des liens */
      margin-left: 20px; /* Espace à gauche des liens */

      Comme ça tu pourras ajouter un espace de chaque côté des liens.
      Tu peux augmenter la valeur de 20px pour augmenter l'espace autour de tes liens ;)

      Supprimer
  63. Bonjour,
    Grâce à vos conseils, j'ai enfin réussi à créer mon menu déroulant ! Merci beaucoup !

    RépondreSupprimer
  64. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  65. Bonjour Catherine,

    Merci pour tous tes précieux conseils !
    Après avoir lu les commentaires, je me suis rendue compte que de nombreuses personnes avaient eu le même problème que moi: les sous-catégories s'affichent en dessous de la catégorie et il n'y a pas de menu déroulant...
    Mais je n'arrive pas à trouver de solution pour mon cas!

    http://www.laureheleneanceaux.com

    Bon dimanche !

    RépondreSupprimer
    Réponses
    1. Bonjour Laure-Hélène,
      Je ne trouve pas les codes CSS qui définissent le visuel de tes menus-déroulants dans ton code. Les as-tu bien rajouté ? C'est grâce à ces codes qu'on va pouvoir cacher le menu-déroulant par défaut et le faire apparaître au survol du lien de ton menu.

      Supprimer
  66. Bonjour, je suis vraiment désolée de vous embêter avec ça car j'ai un soucis très bête et jai eu beau regarder les commentaires je ne vois personne qui ait eu ce problème. Je m'explique: dès le départ du tuto je suis bloquée: je n'ai pas cette bande dans la mise en page qui propose de coller le script et je ne peux rajouter de gadget ... Est-ce à cause d'une mise à jour de la mise en page de blogger? Désolée si le sujet a déjà été abordé je n'ai rien vu à ce sujet ou peut être n'ai je pas le bon thème. Merci beaucoup! J'aimerai tellement pouvoir appliquer ce tuto ^^

    RépondreSupprimer
    Réponses
    1. Bonjour Paloma,
      As-tu réglé le problème ? Car je vois que tu as ajouté un menu-déroulant à ton menu ;)

      Supprimer
  67. bonjour Catherine

    tout d'abord merci beaucoup pour tout tes tutos.

    J'ai une problématique concernant mon menu déroulant que j'ai fixé en haut de ma page, mais le soucis est que lorsqu'on accède pour la première fois au blog il apparaît en arrière plan le message concernant les cookies et la case pour les accepter. Le soucis c'est que l'on ne peut la cocher car elle apparaît en arrière plan sous le titre et le message reste tant que l'on n'à pas cocher.

    as tu une solution

    merci

    voici mon blog : http://cgtplateformechimietavaux.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphane,
      Tu peux déplacer la barre de cookies en bas du blog. On pourra alors accéder aux liens de cette barre. Tu trouveras les instructions sur mon tutoriel suivant : http://ladybirdr.blogspot.com/2015/07/comprendre-et-modifier-la-barre-de.html

      Supprimer
  68. Bonsoir Ctaherine,
    Merci pour ce blog magnifique et de prendre le temps de repondre a nos questions.
    J ai lu quelques commentaires et j ai pu integrer deux articles a une sous categorie.(HAIR -DEBUTANT).
    Est-ce normal au debut de chaque categorie aprs avoir associees les articles ce commentaire apparaisse : "Showing posts with label Debutant. Show all posts " Comment faire pour qu;il disparaisse. ?
    Je voudrais aussi que la liste de mes sous categories apparaissent en un block commun pas des petits blocks individuels comme presentement.
    Merci de ton aide.
    http://africanbeautyhairblog.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Josiane,
      Pour la boite de message "Showing posts with label Debutant. Show all posts" j'ai fait un tutoriel qui explique comment le supprimer ou le modifier : http://ladybirdr.blogspot.fr/2015/02/supprimer-modifier-lencadre-sur-la-page.html

      Les liens de ton menu déroulant ont un bord arrondi ce qui donne l'impression qu'ils sont dans des blocs séparés. Pour régler ce petit soucis, retrouve ce code CSS :

      #navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
      background: #000000; /* change the background color of the drop down box */
      width: 150px;
      color: #ffffff; /* change the color of the drop down links */
      float: none;
      margin: 0;
      padding: 7px 10px; /* similar to above, change for the spacing around the links */
      }

      Rajoute la ligne suivante :

      border-radius: 0 !important;

      Juste avant le signe } de ce code CSS, comme ceci :

      #navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
      background: #000000; /* change the background color of the drop down box */
      width: 150px;
      color: #ffffff; /* change the color of the drop down links */
      float: none;
      margin: 0;
      padding: 7px 10px; /* similar to above, change for the spacing around the links */
      border-radius: 0 !important;
      }

      Et voilà ;)

      Supprimer
  69. Bonjour Catherine,
    Merci pour ce super tuto! J'ai réussi à faire quelque chose d'assez sympa mais je voulais savoir si tu savais comment faire une "sous-sous catégorie" dans le menu déroulant...
    Comme mon blog est un blog de recettes, les pages auxquelles je renvoie sont un peu lourde et j'aimerai pouvoir faire un mini menu-déroulant dans chaque sous-catégorie mais je ne sais pas comment faire à partir de ce que j'ai fait en suivant tes précieux conseils...
    Peux-tu m'aider? Mon blog est le suivant danslacuisinedhilary.blogspot.fr

    Merci d'avance!!
    Hilary

    RépondreSupprimer
    Réponses
    1. Bonjour Hilary,
      C'est tout à fait possible. Il suffit d'ajouter un nouveau menu de <ul> à </ul> avant le </li> du lien sous lequel tu souhaites que ce nouveau menu déroulant apparaisse.
      Ensuite colle ces codes CSS :

      /* Codes CSS pour sous-menu déroulants */
      .tabs ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul li:hover ul {
      display: block !important;
      }

      .tabs ul ul ul {
      position: absolute;
      left: 165px; /* Espace à droite du menu-déroulant */
      margin-top: -40px !important; /* Espace en haut du sous-menu déroulant */
      top: auto;
      }

      .tabs ul ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul ul li:hover ul {
      display: block !important;
      }

      A la suite de tes codes CSS pour ton menu. Il faudra rectifier les valeurs des espaces à gauche et au-dessus du nouveau menu-déroulant en fonction. J'ai marqué les lignes à modifier avec des commentaires ;)

      Supprimer
  70. Coucou!

    J'ai un problème avec mon menu déroulant, en faite je voudrais que l'écriture du "Qui suis-je?" qui se trouve en dessous de "À propos" soit aligné mais il y a un espace qui décale le texte vers la droite... Ensuite je voudrais changer la police de mon menu et mettre "Oswald" elle y est dans le code CSS mais ne s'affiche pas sur le blog.. Et je voudrais aussi faire un espace entre ma barre de navigation et le haut de l'ordinateur, je voudrais qu'il y est un espace blanc. Comment est-ce que je puisse faire ?

    Merci de ton aide. <3

    RépondreSupprimer
    Réponses
    1. Bonjour Lisa,
      Pour l'alignement de tes liens, il faut retrouver 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: 0px; /* Distance à gauche des liens */
      text-align: center;
      }

      La dernière ligne :

      text-align: center;

      Défini l'alignement des liens des menus déroulants à "centré". Remplace center par left comme ceci :

      text-align: left;

      Ensuite on va ajouter un espace à gauche de ces liens en remplaçant 0px de la ligne :

      padding-left: 0px; /* Distance à gauche des liens */

      par 14px comme ceci :

      padding-left: 14px; /* Distance à gauche des liens */

      Ton code CSS ressemble maintenant à :

      .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: 14px; /* Distance à gauche des liens */
      text-align: left;
      }


      Pour la police Oswald je la vois très bien de mon ordinateur ;)

      Il y a déjà un espace au-dessus de ton menu mais avant le fond du menu. C'est pour cela que cet espace est transparent. Il faut remplacer cet espace par un espace au-dessus des liens (et non au-dessus du menu).
      Pour cela retrouve ce code CSS :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      background: #FFFFFF;
      margin-top: 20px;
      margin-bottom: 10px;
      border-bottom: none;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 10px;
      border-top: dashed;
      border-top-color: #96CA2D;
      border-top-width: 0px;
      }

      Remplace la ligne :

      margin-top: 20px;

      Par :

      padding-top: 20px;

      Et voilà ;)

      Supprimer
  71. Bonjour,
    Alors déjà ce sont des super tutos. Mais malheureusement je n'ai même pas réussi à faire la première partie du tutoriel: ma sous-catégorie s'affiche bien mais elle reste même quand on ne la frôle pas avec la souris. Pourquoi?
    Est ce que je dois faire la suite du tuto pour que mon problème s'arrange?
    Merci d'avance ;)

    RépondreSupprimer
    Réponses
    1. Bonjour LyzzieEllana,
      Oui il faut faire la suite du tutoriel, et surtout la partie code CSS pour définir le visuel des menus déroulants, dont le faire apparaître seulement au survol du lien sous-lequel il se trouve avec la souris ;)

      Supprimer
  72. Bonjour,
    Je crie à l'aide car j'ai voulu faire un menu déroulant. J'ai suivie les instructions cependant, les sous-parties s'affichent comme une page à elle entière !!! ^^
    Comment faire ? Si vous ne comprenez pas mon problème voici le lien ^^'
    http://le-petit-monde-des-mots.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient très certainement de ton thème. As-tu supprimé les menus déroulants ? Car je ne les vois pas dans le code de ton menu.

      Supprimer
  73. Bonsoir !
    Mon menu déroulant fonctionne à merveille depuis que j'ai découvert ton blog, c'est top... Je m'arrachais les cheveux sur les codes et "tout ça" ! lol

    Ma petite question : Le menu et les sous menus sont-ils obligatoirement en majuscules ? Je n'ai pas trouvé comment faire autrement...
    Merci par avance de ta réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour Fofie M,

      Retrouve ton code suivant :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      text-transform: uppercase;
      font-family: Josefin Sans;
      font-size: 18px;
      font-style: oblique;
      text-decoration: none;
      color: #B089B7;
      margin-right: 20px;
      }

      Supprime la ligne :

      text-transform: uppercase;

      Et voilà ;)

      Supprimer
  74. Bonjour,

    Bonjour,
    Je vois qu'une autre personne à eu le même problème que moi mais il n'y a pas la réponse, le menu déroulant de s'affiche pas et les sous catégories se mettent sous mon onglets principal et pas dans un menu déroulant. Merci pour les précieux conseil et bonne année 2016 :)

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

      Supprimer
  75. Bonsoir Catherine,

    comme tout le monde, je te remercie pour ces tutos d'excellente qualité et d'une aide inestimable !
    Cependant je me retrouve face à un problème pour le menu déroulant.. Je le voudrais sous la catégorie Ma Bibliothèque, et je voudrais l'aspect d'un vrai menu déroulant.. Mais j'ai beau lire, relire, rerelire, je ne parviens pas à trouver la solution...
    Si tu pouvais m'éclairer s'il te plaît ?

    http://mona-borntoread.blogspot.fr/#

    Merci beaucoup :)
    Al

    RépondreSupprimer
    Réponses
    1. Bonjour Al,
      Retrouve ton code suivant :

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

      La ligne :

      display: inline-block !important;

      Entre en conflit avec le code qui cache le menu déroulant quand on ne survol pas la lien sous-lequel il se trouve, avec la souris.

      Remplace donc cette ligne par :

      display: inline-block;

      Et voilà ;)

      Supprimer
    2. Effectivement j'ai cherché partout sauf à ce genre d'endroits... Merci beaucoup !!!
      Une dernière chose si je peux me permettre ? Saurais-tu comment on règle la zone de survol de souris ? Par exemple je ne suis pas sur "ma bibliothèque" que ça commence déjà à apparaître.

      Supprimer
  76. je complète ma question précédente en fait je en trouve pas ".tabs .widget li, .tabs .widget li {" j'ai regardé partout rien ....

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu ne trouves pas ce code il suffit de le rajouter à le suite des codes CSS de ton menu ;)

      Supprimer
    2. encore moi je suis désolée je n'y arrive pas :
      http://kokoy-ladiet.blogspot.fr/
      Je vous donne le lien pour voir ou été le problème
      merci d'avance

      Supprimer
  77. Bonsoir Catherine! Je viens vers toi car j'aurais besoin de tes lumières! J'essaie d'intégrer un menu déroulant à ma barre de navigation, tout y est, sauf que j'ai un problème au niveau de la personnalisation! Lorsque le curseur pointe sur un des liens du menu déroulant, tout part en "freestyle" alors que j'aimerais que tout soit bien aligné! De plus, j'ai l'impression que les codes que j'ai mis pour la barre de navigation s'appliquent aussi au menu déroulant! Du coup ça met un bordel pas possible et je ne sais pas comment régler ça! Je te laisse voir par toi-même: http://www.ouaipkevin.fr
    Je te remercie d'avance pour ton aide!
    Kévin

    RépondreSupprimer
    Réponses
    1. Bonjour Kévin,
      Désolé pour le temps de réponse, avec les fêtes j'ai pris du retard dans la modération des commentaires :/
      As-tu réglé le problème ? Car je vois que ton menu est super ;)

      Supprimer
    2. Hello Catherine! :) Ne t'inquiètes pas je comprends tout à fait! ^^ Ouiiii au final j'ai trouvé le soucis, j'avais imposé une hauteur qui n'était absolument pas nécessaire en faite, je l'ai donc supprimé et tout est redevenu normal ^^

      Supprimer
  78. Coucou Catherine,
    tes articles m'aide énormément et je t'en remercie, cependant je n'arrive toujours pas à changer la couleur et la couleur du lien quand survolé par la souris de " Accueil Recette A propos". Je ne sais pas si tu as tout compris mais si tu préfère voila le lien de mon blog : http://delicesdecamille.blogspot.fr/
    Merci encore pour tous tes tutoriels.
    Bisous. Camille ♥

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Pour changer la couleur des liens Accueil, Recette et A propos, retrouve ce code CSS :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Arial;
      font-size: 20px;
      font-style: normal;
      text-decoration: none;
      color: #741b47;
      margin-right: 20px;
      }

      Remplace #741b47 par le code de la couleur de ton choix.
      Tu peux utiliser le site code-couleur.com pour trouver le code de la couleur que tu souhaites utiliser ;)

      Supprimer
  79. Génial j'ai réussit à faire mon menu déroulant, le problème c'est que dès que j'ai ajouté tout ce qu'il fallait la ligne au dessus de
    /*content
    ça m'a effacé tout le design que j'avais déjà fait, maintenant, mon fond d'écran est tout blanc
    http://ange-de-glace.blogspot.fr/p/news-du-mois.html
    Est-ce normal, et comment faire pour le modifier?
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Charlotte,
      Tu as oublié un signe } à la fin du dernier code CSS avant /* Content. Il te suffit de rajouter ce signe avant la ligne /* Content et voilà ;)

      Supprimer
    2. Merci beaucoup!
      Problème réglé, il me reste maintenant à personnaliser tout le reste. Avec un peu de temps et tes tutos géniaux ça devrait le faire.

      Supprimer
  80. Bonjour, bonsoir !

    Tout d'abord merci pour ces supers tutos qui me permettent de renouer tout doucement avec le language HTML :)
    Et surtout, bonne année !

    Dans mon blog je n'ai pas le même code que toi, et ayant déjà effectué ma mise en page CSS je n'ose plus trop y toucher.
    J'ai suivi tes conseil pour la bare de navigation,
    cependant je n'arrive pas à la mettre au milieu, ni à faire en sorte que les sous catégories ne se voient pas tant que l'on ne clique pas dessus :/

    Est-ce que tu pourrais m'aider ?

    Merci d'avance !

    Et l'eau :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien ajouté les codes CSS pour ton menu et tes menus déroulants ? Car ce sont eux qui vont définir le visuel de ton menu, dont le fait que le menu déroulant soit caché par défaut.

      Supprimer
  81. Bonjour Catherine, désolé de te déranger encore une fois, surtout que je suis presque sure que tu l'as déjà expliqué mais je n'arrive pas à trouver où.
    Donc voilà mon problème, j'ai crée mon menu déroulant avec la barre de navigation, mais je voudrais augmenter l'espace entre mes catégories de cette barre (entre new du mois, discipline, on ice...)
    http://ange-de-glace.blogspot.fr/

    Merci d'avance

    RépondreSupprimer
  82. Coucou LadyBird,

    Voilà, je suis en train de changer de plateforme pour mon blog ( de Wordpress à Blogger) j'ai donc du refaire toute ma présentation (chose que j'adore). Seulement j'ai un petit problème au niveau de ma barre de navigation. Lorsque je survole les catégories, il s'affiche un gros carré noir sur la catégorie en question. Pourtant, comme tu l'explique dans ton auto, j'ai modifié la couleur avec les codes... Je ne comprends donc vraiment pas pourquoi ça beugue... Si tu as une réponse...

    Je te remercie !

    Voici l'adresse du blog: http://sylverstonleblog.blogspot.fr
    Et voici mon adresse perso : Contact.sylverston@gmail.com

    RépondreSupprimer
  83. Coucou ;) C'est encore moi...

    J'ai décidé de mettre ma barre de navigation en haut de mon blog mais du coup "mon header" avec le titre de mon blog n'est pas fixe ... De plus, j'aimerai mettre ma barre de navigation tout le long de mon blog et épaissir les bords.

    Bisous <3

    RépondreSupprimer
  84. Coucou Catherine,

    Merci beaucoup pour tout cela ! Alors aujourd'hui j'ai decide de créer une nouvelle page dans mon menu or je ne comprend pas pourquoi mais le titre de la page (shop my style) dans le menu ne s'affiche pas du tout comme les autres.. pourtant je pense avoir fait la meme chose.
    Je te laisse regardez mon blog pour mieux comprendre www.chloeschlothes.com

    Merci énormément par avance,
    Chloe

    RépondreSupprimer
  85. Bonjour Catherine,
    Merci pour tes tutoriels qui m'inspirent pour mon blog.
    Aujourd'hui je rencontre des difficultés dans la création de mon menu déroulant.
    Comme dans des précédents commentaires, mon menu ne se déroule pas et reste visible en permanence.
    J'ai vu qu'il fallait ajouter dans le code CSS du blog overflow:visible.
    Je pense avoir trouvé ou insérer ce texte, mais je ne sais pas comment:

    '< div class='tabs-outer'>

    Est ce que tu as quelques conseils?
    Merci
    http://lalloux.blogspot.fr/search/label/Accueil

    RépondreSupprimer

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