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

Exemple de code CSS de menu n°1

Comme promis, voici un premier exemple de menu et comment le créer vous-même !

Ce premier menu se présente comme suit : centré avec un texte en majuscules, et une bordure bleu/vert sous le lien quand il est survolé par la souris.

Tuto Blog : Exemple code CSS menu blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/

Suivez le lien pour les explications ;)

Introduction

Avant de commencer, je vous invite à lire les précédents tutoriels à propos de la barre de navigation sous Blogger :


Ensuite, pensez à sauvegarder votre blog avant d’y apporter des modifications ! On ne sait jamais !

On peut maintenant passer aux choses sérieuses ;)

Code CSS de Menu Blogger

Dans la 1ère partie du tutoriel, je vous ai expliqué comment créer la liste de liens qui compose votre barre de navigation.

Dans la partie 2 du tutoriel, je vous ai parlé de CSS et plus particulièrement comment ajouter le code suivant à votre blog, et comment l'utiliser.
/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
.tabs-inner .section:first-child ul {
}

/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
}

/* Police et Couleur des Liens */
.tabs-inner .widget li a {
}

/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
}

/* Visibilité de la Bordure des Liens */
.tabs .widget ul {
}

/* Centrer la Barre de Navigation */
.tabs .widget li, .tabs .widget li {
}
C’est en jouant sur ce code CSS que nous allons styliser notre menu.

Centrer le menu

On commence d’abord par centrer le menu. Pour cela on s’intéresse aux codes suivants :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
}

/* Centrer la Barre de Navigation */
.tabs .widget li, .tabs .widget li {
}
Et on ajoute le code :
text-align: center;
Et
display: inline;
float: none;
Comme ceci :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
text-align: center;
}

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

Code CSS de Menu Blogger

Mise en forme des liens

Pour les liens, on s’intéresse à la partie :
/* Police et Couleur des Liens */
.tabs-inner .widget li a {
}
Les liens sont :
  • En police « Calibri » de taille 14 pixels (14px)
  • De couleur noir (#000000)
  • En majuscules (uppercase)

On ajoute donc les codes suivants :
/* Police et Couleur des Liens */
.tabs-inner .widget li a {
font-family: Calibri;          /* Police des liens */
font-size: 14px;               /* Taille des liens */
color: #000000;                /* Couleur des liens */
text-transform: uppercase;     /* Texte en majuscules */
}
Ce qui donne :

Code CSS de Menu Blogger

Espacement des liens

Pour ajouter un espace entre les liens il faut ajouter 2 codes :
  • un premier qui ajoute une marge à droite (ou à gauche) de tous les liens du menu.
  • un 2e pour enlever cette marge au dernier lien (ou premier).

Le 2e code est important car sinon le menu ne sera pas centré correctement, mais décalé.

On s’intéresse donc aux parties :
/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
.tabs-inner .section:first-child ul {
}

/* Police et Couleur des Liens */
.tabs-inner .widget li a {
}
Tout d’abord, on ajoute une marge de 20 pixels, par exemple, à droite de tous les liens du menu avec le code :
margin-right: 20px;
Comme ceci :
/* Police et Couleur des Liens */
.tabs-inner .widget li a {
font-family: Calibri;
font-size: 14px;
color: #000000;
text-transform: uppercase;
margin-right: 20px;      /* Ajoute un espace de 20 pixels à droite des liens */
}
Ensuite on spécifie que l’on ne veut pas d’espace après le dernier lien, avec le code :
margin-right: 0px;
Comme ceci :
/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
.tabs-inner .section:first-child ul {
margin-right: 0px;
}
Ce qui donne :

Code CSS de Menu Blogger

Mise en forme des liens quand survolés par la souris

Maintenant qu’on a défini l’allure de base de notre barre de navigation, on va définir le style des liens quand survolés par la souris. Pour cela on s’intéresse aux parties :
/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
}

/* Visibilité de la Bordure des Liens */
.tabs .widget ul {
}
Dans cet exemple, une bordure apparait sous le lien quand il est survolé. Cette bordure a les caractéristiques suivantes :
  • Bordure solide (solid)
  • De taille 2 pixels (2px)
  • De couleur bleu (#53DDD0)
  • Espacé de 8 pixels du lien (8px)

On écrit donc :
/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
border-bottom: solid;             /* Style de bordure : solide */
border-bottom-width: 2px;         /* Taille de la bordure */
border-bottom-color: #53DDD0;     /* Couleur de la bordure */
padding-bottom: 8px;              /* Espacement de la bordure avec le lien */
}
Pour être sûr de bien visualiser la bordure il faut ajouter le petit code suivant :
/* Visibilité de la Bordure des Liens */
.tabs .widget ul {
overflow: visible;                /* Pour bien voir la bordure */
}
Ce qui donne :


Et voilà ! Vous avez réussi à reproduire ce 1er exemple de menu ;)

Pour le personnaliser encore plus, vous pouvez changer la police, la taille du texte, etc. Pour cela je vous invite à revoir la partie 2 de la personnalisation de la barre de navigation. De même, si vous avez du mal à comprendre le code CSS utilisé, je vous conseil de relire ce post.

Si vous voulez changer les couleurs mais que vous ne connaissez pas le code hexadécimal (#53DDD0) qui correspond, je vous conseille le site code-couleur.com, assez simple d’utilisation.

Si vous avez des questions laissez un commentaire ;)

Autres articles

69 commentaires:

  1. j'ai presque tout compris... mais je n'arrive pas à centrer mon menu. je n'ai que deux rubriques, peut-être cela vient de cela.

    RépondreSupprimer
    Réponses
    1. D'après ce que j'ai pu voir, je crois que tu t'es trompé en écrivant le code CSS. Entre les "ul" et les "li" on se perd facilement ^^.

      Est-ce que tu as bien écrit ceci :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      }

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

      Vérifie aussi que tu as bien un espace avant le premier "{", que tes lignes se terminent avec un ";", et qu'il n'y a pas d'espace avant les ":".

      J'espère que ça résoudra ton problème :)

      Supprimer
  2. Merci beaucoup pour ce tuto ! Je viens de créer mon blog et autant dire que je n'y connais.. rien du tout ^^ Du coup, merci beaucoup, c'était très clair ! J'espère trouver d'autres tutos pour m'aider à personnaliser mon blog :)

    RépondreSupprimer
  3. Bonjour,
    merci pour ce tuto!
    Comment faire dans le css pour faire apparaitre une liste de categorie quand on survole un lien de la nav bar ?

    RépondreSupprimer
  4. Coucou, merci pour toutes ces descriptions, tu expliques très très bien . J'ai réussi à faire la barre de navigation que je voulais ; seul petit soucis , les pointillés au dessus de la barre que je ne veux pas :O pourrais-tu m'aider voici mon code :

    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin-right: 0px;
    }

    /* Fond et Bordure de la Barre de Navigation */
    .tabs-inner .widget ul {
    background: #FFFFFF;
    text-align: center;
    }

    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {
    font-family: Crafty Girls;
    font-size: 16px;
    font-style: bold;
    color: #8E3557;
    text-transform: uppercase;
    margin-right: 20px;
    padding-bottom: 8px;
    border-bottom: double;
    }

    /* Visibilité de la Bordure des Liens */
    .tabs .widget ul {
    overflow: visible;
    }

    /* Police et Couleur des Liens quand Survolés par la Souris */
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    border-bottom: solid;
    font-size: 22px;
    border-bottom-width: 2px;
    border-bottom-color: #53DDD0;
    padding-bottom: 4px;
    }

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

    Merci beaucoup de ta réponse :)



    RépondreSupprimer
    Réponses
    1. Salut Tequila Beauty,

      Rajoute le code suivant à la suite du code de ta barre de navigation :

      .widget ul li {
      border-top: none !important;
      }

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

      Supprimer
  5. Coucou ! Tout d'abord merci beaucoup pour ce blog avec des explications sur claires et précises c'est un régal ! Je viens de me lancer dans la création de mon blog et tes tutos me permettent d'y voir plus clair pour le personnaliser car autant dire que je n'y connais RIEN du tout lol. Voila j'ai réussi à faire ma barre de navigation mais j'aimerais qu'elle soit plus large car je la trouve perdu dans ma page. Voici ce que j'ai pu réaliser grâce à ton blog:

    /* Tabs
    ----------------------------------------------- */
    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin-right: 0px;
    }

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

    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {
    font-family: Calibri; /* Police des liens */
    font-size: 14px; /* Taille des liens */
    color: #000000; /* Couleur des liens */
    text-transform: uppercase; /* Texte en majuscules */
    margin-right: 20px; /* Ajoute un espace de 20 pixels à droite des liens */
    }

    /* Police et Couleur des Liens quand Survolés par la Souris */
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    border-bottom: solid; /* Style de bordure : solide */
    border-bottom-width: 2px; /* Taille de la bordure */
    border-bottom-color: #53DDD0; /* Couleur de la bordure */
    padding-bottom: 8px; /* Espacement de la bordure avec le lien */
    }

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

    /* Visibilité de la Bordure des Liens */
    .tabs .widget ul {
    overflow: visible; /* Pour bien voir la bordure */
    .widget ul li {
    border-top: none !important;
    }

    Où dois-je le modifier?
    Merci milles fois d'avance!

    RépondreSupprimer
    Réponses
    1. Salut Manon,

      Est-ce que tu peux m'envoyer le lien de ton blog pour que je puisse voir quel est le problème ?

      Supprimer
    2. http://anordinarygirldiary.blogspot.fr/

      Supprimer
  6. Hey !!!
    En tout cas, merci de tout mon cœur, j'en avais marre, j'arrivais pas a trouver un Template correct pour mon blog, enfin plutôt un Template "comme je veux"... Haaaalala.. Les filles, toute compliquées !
    Et puis je me disais, je pourrais modifier mon code.. j'avais pas le courage jusqu’à ce que je tombe sur ton blog !!!! Alors merci merci merciiii !! Tu peux aller voir mon blog, j'ai bien mit a profit tes tutos !

    Je t'ai d'ailleurs ajouté à mes blog coup de cœur !!!

    kisses

    RépondreSupprimer
    Réponses
    1. De rien ! Je suis contente de pouvoir aider ^^
      Ton blog est vraiment sympa ! T'as fait du beau boulot :D
      Et ça fait plaisir de recevoir de commentaires aussi enthousiastes !! ^^

      Supprimer
    2. Merci beaucoup !!! Si il est aussi bien maintenant c'est un peu grâce à toi !!! :)
      Bisous

      Supprimer
  7. Bonjour,

    J'ai utilisé plusieurs de ces tutos pour mon blog, mais je me heurte à un problème : je n'arrive pas à faire défiler les liens sous ma barre de menus, ils sont décalés. J'ai repris les manipulations plusieurs fois mais je n'arrive pas à comprendre ce qui ne va pas! Merci pour votre aide!
    le problème est visible ici : http://www.lagaleriemilla.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Milla,

      De mon côté les sous menus semblent bien apparaître sous les liens du menus.
      Veux-tu dire qu'ils sont trop décalés à gauche par rapport aux liens du menu ?

      Supprimer
  8. Bonjour ! Tout d'abord merci pour ces tutos bien pratiques, je me mets au CSS en ce moment pour créer l'habillage de mon propre blog, et je dois dire que ce blog m'est d'une grande aide :) J'ai cependant un petit souci concernant ma barre de navigation : mes boutons sont assez nombreux et volumineux, et par défaut plusieurs lignes se créent, alors que j'aimerais que la barre de navigation ne tienne qu'en une seule ligne. Je me demandais s'il était possible de forcer la barre à ne tenir que sur une ligne, quitte à ce qu'elle occupe la largeur de l'écran, ou si je devais me résoudre à réduire mes boutons. Voilà, j'espère que tu pourras m'éclairer ! Merci d'avance de ta réponse et bonne soirée :3

    RépondreSupprimer
    Réponses
    1. Salut Windfish,
      Tu peux rajouter le code suivant :

      div#HTML2 {
      width: 960px;
      left: -195px;
      }

      A la suite du code CSS de ton menu par exemple.
      Ce code augmente la largeur de ton menu et le recentre :)

      Supprimer
  9. Super ! Merci beaucoup pour cette réponse rapide :3

    RépondreSupprimer
  10. Et voila parfait :) J'ai su le faire, et j'ai trouvé la réponse à ma question précédente :)

    Tiens je me demandais, comment tu fais pour mettre le bord bleu à côté des gros titres ? Ca m'intrresse bien :)

    RépondreSupprimer
    Réponses
    1. Pour les bords bleus à gauche des titres j'ai utilisé 2 codes.
      Celui pour les titres et les commentaires :

      h3.post-title, .comments h4 {
      font-family: 'PT sans',sans-serif;
      font-weight: 300;
      font-size: 22px;
      margin: 25px 0;
      color: #525253;
      letter-spacing: 1px;
      position: relative; /* Important */
      }

      Et celui pour la barre :

      .post-body h2:before, .comments h4:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 4px; /* Épaisseur de la barre */
      background: #7BD0D8; /* Couleur de la barre */
      left: -20px; /* Espace à gauche du titre */
      }

      Tu peux modifier la distance de la barre en changeant la valeur de left, mais aussi l'épaisseur et la couleur. Et voilà ! :)

      Supprimer
    2. Ahhh super un grand merci :) Je suis partie pour modifier entièrement tout le blog la :) Merci en tout cas :)

      Supprimer
  11. Coucou ! Merci d'abord ton article très bien expliqué !
    Dis, tu pourrais nous indiquez comment ajouter des "effet" lors de l'apparition de cette bordure bleu ?
    Par exemple, apparaître à partir d'en bas comme sur ton blog ?
    Ou encore une barre qui "suit" comme sur ce thème : http://sora-moon-soratemplates.blogspot.fr/

    J'aimerais beaucoup pouvoir réaliser ça, si tu sais comment on fait je suis preneuse ! :)

    RépondreSupprimer
    Réponses
    1. Je note sur ma liste de tutos à faire ! ;)

      Supprimer
  12. Coucou, super tes tutos merci beaucoup tu fait de moi une femme heureuse lol!!
    par contre il y a un petit problème lorsque l'on clique sur les liens de ma barre de navigation, il n'y a aucun article qui apparait, comment je peux faire pour y remédié ? mon blog c'est www.mdsbeauty.blogspot.com merci bisous

    RépondreSupprimer
    Réponses
    1. Bonjour Francesca,
      Tu n'as pas changé l'adresse de tous tes liens dans le code HTML de ton menu, c'est pour ça que rien ne s'affiche.
      Par exemple le code HTML de ton lien Makeup est :

      <li><a title="MAKEUP" href="Lien">MAKEUP</a></li>

      Il faut que tu remplaces le mot Lien par l'adresse url de ton libellé comme ce que tu as fait pour le lien Mode :)

      Supprimer
  13. Bonjour à toi !

    Je voulais tout d'abord te remercier pour tous ces tutos qui m'ont sauvés la vie (surement pas qu'à moi d'ailleurs !!)

    J'avais par ailleurs une petite question, je ne sais pas si c'est sous entendu dans cet article mais je ne comprends pas comment peut-on créer une lien dans la barre de navigation qui mène par exemple à tous les articles"beauté" ou "sport" ou, sur ton blog par exemple "customisation" ? J'ai réussi à créer un lien vers un site exterieur mais pas à en créer un qui permet de ne voir que certains de mes articles !

    Si tu pouvais m'éclairer sur l'affaire, ça serait super !!

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      En fait l'adresse URL du lien qui renvoi vers tous les articles d'un libellé est de la forme :
      http://adresse-blog.fr/search/label/Libellé
      Pour trouver l'adresse exacte, tu peux faire un clique-droit sur le nom d'un de tes libellés (dans le gadget de ta barre latérale par exemple) et sélectionner Copier l'adresse du lien. Il te suffira ensuite de coller cette adresse URL dans le code HTML du lien de ton menu :)

      Supprimer
    2. Super, merci pour ta réponse rapide !
      Je modifierai tout ça sous peu alors !

      Je me permet de te poser une autre question sur cette conversation, j'ai choisi d'afficher mes articles sous forme de grille comme sur l'un de tes tutos (la version 2 notamment) et j'ai un petit soucis : mes dates empiètent un peu sur le texte/la photo qui annoncent l'article. Est ce une mauvaise manip ? Comment je peux y remédier ?

      D'avance merci :)

      Supprimer
    3. Non ce n'est pas une fausse manip, les dates empiètent sur les photos dans cet affichage. Mais tu peux déplacer le texte vers le bas pour éviter le chevauchement. Vas sur la page Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin> puis cliques n'importe où dans la boîte de code. Appuies sur Ctrl et F en même temps. Dans la boîte de recherche colles :

      /* Code pour la VERSION 2 */

      Et appuies sur Entrer.
      Juste sous cette ligne colles ceci :

      .post-body {
      margin-top: 33px;
      }

      Sauvegardes, et voilà ;)

      Supprimer
    4. Merci, c'est niquel ! Super :)

      Supprimer
  14. Bonjour,

    Tout d'abord merci pour vos précieux conseils (rien d'original me direz vous au vu des nombreux et mérités commentaires précédents :-) )

    J'ai suivi votre procédure et j'ai un "bug".

    Lorsque je clique sur un des liens du menu, la bordure du lien cliqué ne reste pas affichée et la police ne se met pas en "gras", à l'inverse le lien "accueil" est en gras et la bordure est bien affichée lorsque "accueil" est sélectionné. J'aimerai que ce soit le cas pour tous les liens.

    Sauriez-vous me dire ce que je dois faire pour corriger cela ?

    Je vous remercie d'avance.

    Site : http://losyumasdecuba.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour, il faut modifier les codes suivants qui ne sont pas dans le tutoriel :

      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      color: #ffffff; /* Couleur du lien quand sélectionné */
      background-color: #d2bfab; /* Couleur de fond du lien quand sélectionné */
      text-decoration: none;
      }

      Si vous ne trouvez pas ce code alors rajoutez-le à la suite des codes CSS de votre menu.

      Vous pourrez rajouter les mêmes codes CSS que pour vos liens quand survolés par la souris, avant le signe }

      Supprimer
  15. Bonjour,

    Je vous remercie pour votre retour. Toutefois je crains que je me sois mal exprimé car, hélas, ma problématique reste entière.

    Je souhaiterai que lorsque je sélectionne un des liens (pages), la bordure reste affichée et que le texte du lien soit en gras. Ceci fonctionne bien sur l'accueil mais pas sur les autres liens.

    Je pense que le problème vient du fait que mes pages ne sont pas des liens pages classiques mais des pages "libellés".

    Dans le gadget "pages" "configurer la liste des pages" j'ai créé mes pages en ajoutant un lien externe qui renvoi sur un lien du type : http://site.blogspot.fr/search/label/libellé) alors que lorsque je crée une page classique je ne rencontre pas cette problématique.

    Auriez-vous une idée quant à une solution ?

    Merci d'avance pour votre aide et vos conseils

    RépondreSupprimer
    Réponses
    1. Bonjour, effectivement avec les liens externes ça ne marche pas.
      Pour régler le problème, cherchez la ligne suivante :

      <head>

      Juste en-dessous de cette ligne collez :

      <script type='text/javascript'>
      function setActiveundefined) {
      aObj = document.getElementByIdundefined'PageList1').getElementsByTagNameundefined'a');
      forundefinedi=0;i&lt;aObj.length;i++) {
      ifundefineddocument.location.href.indexOfundefinedaObj[i].href)&gt;=0) {
      aObj[i].className='selected';
      }
      }
      }

      window.onload = setActive;
      </script>

      Ensuite cherchez la ligne suivante :

      /* Content

      Juste en-dessous, collez :

      #PageList1 ul li .selected {
      border-bottom: solid;
      border-bottom-width: 2px;
      border-bottom-color: #CB1515;
      padding-bottom: 8px;
      font-weight: bold;
      }

      Pour finir cherchez la ligne suivante :

      </body>

      Juste- au-dessus, collez ceci :

      <b:if cond='data:blog.url != "http://lbrtest1.blogspot.fr/"'>
      <style type='text/css'>

      #PageList1 li:first-child a {
      border: none !important;
      font-weight: normal !important;
      }

      </style>
      </b:if>

      Et ça devrait régler le problème :)

      Supprimer
  16. Et quand on à utiliser ton menu déroulant, avec la barre de navigation? Il est possible d'avoir la bordure? :/

    RépondreSupprimer
  17. Coucou !
    Tout d'abord, je voulais te remercier pour ce blog qui me sauve carrément la vie ! C'est tellement cool de pouvoir tout gerer toute seule (enfin, avec toi quand même ^^ ) Cependant, j'ai un petit soucis ! J'ai suivi tes conseilles pour creer ma barre de navigation sauf qu'il y a une ligne de pointillé qui apparait au dessus de quatre de mes libellés (regarde sur mon blog pour voir : http://unnuageacroquer.blogspot.fr/) Et je ne sais pas du tout de ou ça vient !
    Mon css :
    /* Tabs
    ----------------------------------------------- */
    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    }

    /* Fond et Bordure de la Barre de Navigation */
    .tabs-inner .widget ul {
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: solid;
    border-top-color: #FFB6B8;
    border-top-width: 5px;
    padding-top: 8px;
    border-bottom: solid;
    border-bottom-color: #FFB6B8;
    border-bottom-width: 5px;
    padding-bottom: 8px;
    border-left: none;
    border-right: none;
    background: #FEFEFE;
    text-align: center;

    }

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

    /* Police et Couleur des Liens quand Survolés par la Souris */
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    font-style: bold;
    color: #FFB6B8;
    }

    /* Centrer la Barre de Navigation */
    .tabs .widget li, .tabs .widget li {
    display: inline;
    float: none;
    }
    Tu pourrais me dire ou ca cloche stp? Je suis perduuuuu :(

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est un problème qui apparaît souvent, colles le code suivant à la suite de tes codes CSS :

      .widget ul li {
      border-top: none !important;
      }

      Et ça devrait régler le problème ;)

      Supprimer
  18. Coucou !!

    Déjà un grand merci pour tous les tutos hyper clairs que tu prends le temps de faire !
    Mais j'ai suivi tes conseils à la lettre il y a un moment, et aujourd'hui j'ai voulu faire des modifications. SAUF que je ne sais pas pourquoi il y a des points qui s'intercalent entre mes boutons...

    Voilà le lien vers mon blog ! http://chup-nails.blogspot.fr
    Merci beaucoup !!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as simplement oublié deux petits codes dans le code HTML de ton menu. Ajoutes :

      <ul>

      juste après :

      <div id="barre_nav">

      Et ajoutes :

      </ul>

      Juste après :

      <!-- fin du menu -->

      Supprimer
  19. Hello Catherine !

    J'aurais une petite question concernant la barre de menus en général. Je voulais savoir, comment faire pour que, lorsqu'on descend sur le blog, elle nous "suive"? Comme sur ton blog justement.
    Et également comment ajouter une recherche dans la barre de menus en haut, à côté des différents onglets?

    Merci d'avance et bravo pour ce magnifique blog!
    http://www.lisa-modatti.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Lisa,

      J'ai déjà écrit un tutoriel pour fixer sa barre de navigation en haut du blog ici : http://ladybirdr.blogspot.com/2014/12/fixer-la-barre-de-navigation-en-haut-du.html

      Sur la page Tutoriels tu trouveras un index de tous mes tutoriels et un champ de recherche pour chercher un tutoriel par mot clé ;)

      Un tutoriel pour expliquer comment ajouter un champ de recherche dans son menu est planifié ;)

      Supprimer
  20. Bonjour !
    Est ce que tu peux m'indiquer la police de ta barre de menu ?
    Puis comment faire une plus grosse largeur pour cette barre ?
    Bisous, Pauline.
    http://akomoami.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Pas de soucis, la police de mon menu est Raleway en taille 11px avec un espace entre les caractères de 2px ;)

      Si tu as suivi mes tutoriels pour créer ta barre de navigation, tu peux ajouter de l'espace autour des liens en ajoutant les lignes :

      padding-top: 5px;
      padding-bottom: 5px;

      Après le signe { du code commençant par :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {

      Supprimer
    2. Il te suffit ensuite de modifier la valeur 5px en l'augmentant ou en le diminuant pour augmenter ou diminuer l'espace au-dessus et en-dessous des liens de ton menu ;)

      Supprimer
    3. Merci beaucoup, tes tuto sont super !
      Bisous, Pauline.
      http://akomoami.blogspot.fr/

      Supprimer
  21. Coucou !
    Ca fait des mois que je bataille avec ma barre de menu... lol
    Mais en suivant ton tuto, et même en lisant tes réponses aux commentaires des filles qui ont le même soucis que moi, je n'arrive pas à centrer ma barre de menu... HELP :( :(

    Puis continues ton travail ! Tu es remarquable ! Tes tutos sont lisibles, et esthétiques !
    C'est un plaisir de te suivre ! <3

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Il y a une petite erreur dans le code HTML de ton menu.
      Voici ton code actuel :

      <!-- début du menu -->

      <div id="barre_nav">

      <li><a title="Accueil" href="http://chup-nails.blogspot.fr ">Accueil
      </a></li><li><a title="Nail art">
      Nail Art</a><ul>
      <li><a href="http://chup-nails.blogspot.fr/p/galerie-nail-art.html">Galerie Nail art</a></li>
      <li><a href="http://chup-nails.blogspot.fr/search/label/team%20des%20comploteuses">Les complots</a></li>
      <li><a href="http://chup-nails.blogspot.fr/p/galerie-vernis.html">Swatch vernis</a></li>
      </ul>
      </li><li><a title="e&amp;" href="http://chup-nails.blogspot.fr/p/partenaires.html">Partenaires &amp; codes promo</a></li>
      <li><a title="A propos" href="http://chup-nails.blogspot.fr/p/a-propos-de-chup.html">A propos</a></li>
      <li><a title="Contact" href="http://chup-nails.blogspot.fr/p/blog-page_1.html">Contact

      <!-- fin du menu --></a></li></div>

      Il manque les codes <ul> et </ul> pour ouvrir et fermer la liste de liens.
      Remplace ton code par celui-ci :

      <!-- début du menu -->

      <div id="barre_nav">
      <ul>

      <li><a title="Accueil" href="http://chup-nails.blogspot.fr ">Accueil
      </a></li><li><a title="Nail art">
      Nail Art</a><ul>
      <li><a href="http://chup-nails.blogspot.fr/p/galerie-nail-art.html">Galerie Nail art</a></li>
      <li><a href="http://chup-nails.blogspot.fr/search/label/team%20des%20comploteuses">Les complots</a></li>
      <li><a href="http://chup-nails.blogspot.fr/p/galerie-vernis.html">Swatch vernis</a></li>
      </ul>
      </li><li><a title="e&amp;" href="http://chup-nails.blogspot.fr/p/partenaires.html">Partenaires &amp; codes promo</a></li>
      <li><a title="A propos" href="http://chup-nails.blogspot.fr/p/a-propos-de-chup.html">A propos</a></li>
      <li><a title="Contact" href="http://chup-nails.blogspot.fr/p/blog-page_1.html">Contact</a></li>

      </ul>
      </div>

      <!-- fin du menu -->

      Ensuite remplace le code CSS suivant :

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

      Par celui-ci :

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

      Et voilà ;)

      Supprimer
  22. Bonjour! J'ai décidé de refaire mon blog sur Blogger et je tenais à te dire merci pour tes tutos ! Meme des quiches comme moi sont capables maintenant de faire du code ;)
    J'ai quelques petites questions:

    D'abord, je n'arrive pas à changer la police. Comment ça se fait ?

    Ensuite, j'aimerai faire une petite manipulation pour que quand on survole les liens ils passent en couleur moutarde (#F9B60D ) mais par contre quand je clique dessus, j'aimerais que ça affiche un rectangle moutarde avec la police blanche. Comment puis-je procéder ?

    De plus, j'ai remarqué que les liens vers des libélés ne restent pas afficher en jaune une fois sélectionnés, comment puis-je régler ça ?

    Ensuite, j'aimerais rajouter des / gris clair entre mes liens comme l'exemple 2 dans l'article "La Barre de Navigation - Partie 1 ", peux-tu me dire s'il te plait comment faire ?

    Bon j'avoue, ça fait beaucoup de questions pour une seule personne ^^

    En tout cas, encore merci pour ton travail, c'est vraiment super !

    http://mrs-aurore.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      Pour la police cela semble fonctionner de mon côté. Tu as Raleway comme police.

      Pour les signes / rajoute les codes CSS suivants dans ton code CSS :

      #PageList1 li {
      position: relative;
      display: inline-block;
      }

      #PageList1 li:before {
      content: '/'; /* Le signe */
      display: block;
      position: absolute;
      left: -15px; /* Position à gauche du lien */
      top: 0;
      font-size: 16px; /* Taille du signe */
      color: #cccccc; /* Couleur du signe */
      font-weight: 300;
      }

      #PageList1 li:first-child:before {
      display: none; /* Supprime le signe avant le premier lien */
      }


      Pour le rectangle moutarde au clic du lien et sur les pages de libellés, c'est plus compliqué, il faut utiliser un autre language appelé JavaScript pour modifier l'apparence de ces liens. Si tu le souhaites je peux le faire pour toi en tant que prestation. Envoie-moi un message avec le formulaire sur la page Design ;)

      Supprimer
  23. Bonjour,

    Je tenais juste à vous dire un très grand merci !

    Vos tutoriels sont les plus clairs et les plus complets que je n'ai jamais vu. Vos explications m'ont beaucoup aidé à construire mon blog par moi même, tip top, comme je le voulais...

    Et merci pour la patience que vous prenez pour répondre aux commentaires, j'y ai également trouvé pas mal de réponses à mes questions !

    Bref, félicitations pour votre blog et votre travail, je trouve cela génial.

    Marie

    RépondreSupprimer
  24. bonjour le menu narrive pas a ce centrer le menu quesqui cloche la /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {margin-right: 0px;
    }

    /* Fond et Bordure de la Barre de Navigation */
    .tabs-inner .widget ul {text-align: center;
    }

    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {font-family: Calibri; /* Police des liens */
    font-size: 14px; /* Taille des liens */
    color: #000000; /* Couleur des liens */
    text-transform: uppercase; /* Texte en majuscules */font-family: Calibri;
    font-size: 14px;
    color: #000000;
    text-transform: uppercase;
    margin-right: 20px; /* Ajoute un espace de 20 pixels à droite des liens */
    }

    /* Police et Couleur des Liens quand Survolés par la Souris */
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    border-bottom: solid; /* Style de bordure : solide */
    border-bottom-width: 2px; /* Taille de la bordure */
    border-bottom-color: #53DDD0; /* Couleur de la bordure */
    padding-bottom: 8px; /* Espacement de la bordure avec le lien */
    }

    /* Visibilité de la Bordure des Liens */
    .tabs .widget ul {overflow: visible; /* Pour bien voir la bordure */
    }

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

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tout d'abord fait bien un saut à la ligne après le signe { dans tes codes CSS cela permet de visualiser beaucoup plus facilement les codes et les erreurs.
      D'ailleurs sous la ligne :

      /* Police et Couleur des Liens quand Survolés par la Souris */

      Tu as 2 fois le début du code CSS :

      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

      Tu devrais n'avoir qu'une fois ce début comme ceci :

      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

      Une simple erreur de ce type, et/ou l'oubli (ou l'ajout) d'un signe : ; { } /* ou */, et les codes CSS qui suivent cette erreur sont pas ou mal pris en compte. Attention à l'écriture des codes CSS ;)

      Supprimer
  25. Bonjour Catherine,

    J'ai bien réussis à réaliser mon menu, cependant, lorsque je survole le menu avec la souris il y a une barre gris qui apparaît en dessous des différente catégories. Or j'ai bien stipuler que je ne voulais pas de décoration de texte lorsque l'on survole le menu avec la souris..

    Voici mon code :

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

    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    #barre_nav .section:first-child ul {
    margin: 10px;
    }

    /* Fond et Bordure de la Barre de Navigation */



    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {
    font-family: Liberation Sans Narrow;
    font-size: 14px;
    text-decoration: none;
    color: #B7B4B7
    margin-right: 100px;
    }

    /* Visibilité de la Bordure des Liens */


    /* Police et Couleur des Liens quand Survolés par la Souris */


    /* Centrer la Barre de Navigation */
    #barre_nav li, #barre_nav li {
    display: inline;
    float: none;
    padding-right: 15px; /* Espace à droite des liens */
    padding-left: 15px; /* Espace à gauche des liens */
    }

    Marion M.

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Sur quel blog rencontres-tu le problème ?

      Supprimer
    2. Voici le lien de mon blog : http://marion-exist.blogspot.fr/

      Supprimer
    3. J'ai répondu à ton autre commentaire : http://ladybirdr.blogspot.fr/2014/11/deplacer-la-barre-de-navigation-au.html?showComment=1458582923074#c1000745505866070643

      Est-ce que cela à réglé le problème ?

      Supprimer
  26. coucou !!

    Voici mon blog: www.patienteimpatiente.fr . J'ai bien mis ton CSS pour modifier la barre, mais je voudrais qu'elle rescende un peu mais pas moyen? Je voudrais un peu plus d'espace entre mon header et la barre de navigation.

    Peux tu m'aider?

    DElphine.

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

    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    }

    /* Fond et Bordure de la Barre de Navigation */
    .tabs-inner .widget ul {
    text-align: center;
    }

    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {padding-top: 0px;
    padding-bottom: 0px;
    font-family: play; /* Police des liens */
    font-size: 14px; /* Taille des liens */
    color: #eeeee; /* Couleur des liens */
    text-transform: uppercase; /* Texte en majuscules */
    margin-right: 13px; /* Ajoute un espace de 20 pixels à droite des liens */
    }
    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin-right: 0px;
    }
    /* Centrer la Barre de Navigation */
    .tabs .widget li, .tabs .widget li {
    display: inline;
    float: none;
    }
    /* Visibilité de la Bordure des Liens */
    .tabs .widget ul {
    overflow: visible; /* Pour bien voir la bordure */
    }
    /* Police et Couleur des Liens quand Survolés par la Souris */
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    border-bottom: solid; /* Style de bordure : solide */
    border-bottom-width: 3px; /* Taille de la bordure */
    border-bottom-color: #cc0066; /* Couleur de la bordure */
    padding-bottom: 8px; /* Espacement de la bordure avec le lien */
    }

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux utiliser le code CSS suivant pour ajuster les marges au-dessus et en-dessous de ton menu :

      .tabs-outer {
      margin-top: 30px; /* Espace au-dessus du menu*/
      margin-bottom: 0; /* Espace en-dessous du menu*/
      }

      Colle ce code à la fin des codes CSS de ton menu. Remplace 30px et 0 par les valeurs qui te plaisent et voilà ;)

      Supprimer
  27. Coucou Catherine !

    j'ai fait ta barre :)

    Est ce que tu sais comment je pourrais faire pour quelle prenne toute la largeur du header et qu'elle s'adapte en espacement? Je n'arrive pas à le faire moi même ?

    D'autre part, aurais tu une idée pour que ça fasse "vraiment" menu ?

    www.patienteimpatiente.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour que le menu prenne toute la largeur de l'espace de ton blog (et donc de ton en-tête) ajoute les codes CCS suivants :

      .region-inner.tabs-inner {
      padding: 0;
      }

      #crosscol {
      margin: 0;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  28. Grâce à ton blog, j'arrive à comprendre les modifications que je peux effectuer sur mon blog. Et j'avoue que j'ai beaucoup de difficulté pour le moment x)
    J'ai compris l'essentiel pour la barre de navigation mais j'ai un problème, quoique je fasse comme changement de police, je n'arrive pas à mettre celle que je souhaite (je prends dans celles qui sont déjà fournies sur Blogger)..

    Je te remercie de ton aide..

    RépondreSupprimer
    Réponses
    1. Bonjour Manon,
      Vérifies que tu as bien écrit le nom de la police, et qu'il n'y a pas une erreur de frappe dans tes codes CSS.
      Un oubli ou un code en trop parmi les suivants, et les codes CSS qui suivent cette erreur ne sont pas, ou mal, pris en compte. Vérifie les signe suivants :

      { : ; } /* et */

      Si les polices proposées par Blogger ne marchent pas, tu peux essayer de l'installer par le biais de Google Fonts.

      Supprimer
  29. Bonjour!
    Ton blog m'aide vraiment beaucoup, je ne comprends pas grand chose aux codes etc... mais à force d'essayer j'arrive à faire qq petits trucs! :D
    J'ai une question, que je ne sais pas vraiment où poser alors je te la pose ici ^^J'aimerais élargir mes interlignes au niveau des textes des articles, afin que ce soit plus aéré. Sais-tu comment faut faire? Dois-je modifier le code général ou dans chacun des articles? J'ai essayé de modifier le Code mais ça ne fonctionne jamais...

    Merci, bonne soirée! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour augmenter l'interligne de tes articles ajoute le code CSS suivant :

      /* Interligne des articles */
      .post-body {
      line-height: 1.8 !important;
      }

      Avant la ligne :

      ]]></b:skin>

      Remplace la valeur 1.8 par celle de ton choix. Modifie-la de 0.1 en 0.1 pour voir ce que ça donne ;)

      Supprimer
  30. Bonjour !
    Ton blog m'est vraiment très utile et je t'en remercie beaucoup.
    Je viens tout juste de recréer un blog et j'ai commencé par la barre de menu, j'ai suivis ton petit "bonus" pour pouvoir afficher une petite image au dessus des onglets, tout marché pour le mieux jusqu'à ce que je m'aperçois que l'image de mon onglet "me contacter" ne se trouvait pas à la bonne position.

    https://rosa-diiary.blogspot.fr/

    Je te donne l'adresse de mon blog pour que tu comprennes mieux ! Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Il y une toute petite erreur d’inattention en écrivant le code CSS pour l'image du lien "me contacter". Tu as écris ceci au début du code CSS :

      .me contacter img {

      Il y a simplement un espace en trop ;)
      Supprime l'espace entre .me et contacter comme ceci :

      .mecontacter img {

      Et voilà ;)

      Supprimer
  31. Bonjour,
    j'ai utilisé le premier exemple du code css avec le trait bleu qui s'affiche en dessous, mais ayant un menu déroulant, quand je vais dessus il ne s'affiche pas est-ce normal ? (http://nouveaudesignmissfashionista.blogspot.fr)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En fait il s'affiche mais est caché derrière tes menus déroulants.
      Tu peux modifier la couleur de fond de tes menus déroulants (qui est actuellement blanc) à transparent pour le voir. Retrouve ce code CSS :

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

      Ajoute la ligne :

      background-color: transparent;

      Avant la ligne }

      Ensuite pour que la bordure reste affiché en allant sur le menu déroulant, remplace ce code :

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      border-bottom: solid; /* Style de bordure : solide */
      border-bottom-width: 2px; /* Taille de la bordure */
      border-bottom-color: #B6324A; /* Couleur de la bordure */
      padding-bottom: 8px; /* Espacement de la bordure avec le lien */
      color: #B6324A;
      }

      Par :

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li:hover a {
      border-bottom: solid; /* Style de bordure : solide */
      border-bottom-width: 2px; /* Taille de la bordure */
      border-bottom-color: #B6324A; /* Couleur de la bordure */
      padding-bottom: 8px; /* Espacement de la bordure avec le lien */
      color: #B6324A;
      }

      Ensuite retrouve ce code :

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

      Ajoute !important après le code couleur comme ceci :

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

      Et voilà ;)

      Supprimer
    2. Merci beaucoup ça fonctionne ! :)

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

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

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger