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

Ajouter une barre de recherche au menu

Après avoir vu comment créer une barre de recherche personnalisée, nous allons voir comment ajouter une barre de recherche dans votre menu !

Allez, c'est parti pour les explications !

Ce tutoriel se base sur mes précédents tutoriels sur la création et la personnalisation d'un menu en HTML et CSS, et sur la création d'une barre de recherche personnalisée. Je vous conseil donc de lire ou de suivre ces tutoriels avant de commencer celui-ci ;)

Sommaire

  1. Créer votre menu
  2. Ajouter la barre de recherche
  3. Personnaliser l'apparence de la barre de recherche
    1. Modifier le champ de saisie
    2. Modifier le texte du champ de saisie
    3. Modifier la couleur du texte par défaut du champ de saisie
    4. Modifier l'apparence du bouton valider
    5. Modifier l'apparence du bouton valider au survol de la souris
    6. Remplacer le bouton valider par une image

Créer votre menu

Si ce n'est pas déjà fait, créez votre menu avec un gadget HTML/JavaScript. Pour ce faire vous pouvez suivre mon tutoriel en deux parties :
  1. Créer la barre de navigation (HTML)
  2. Personnaliser l'apparence de la barre de navigation (CSS)

Ajouter la barre de recherche

Maintenant que votre menu est créé, nous allons modifier son code HTML et y ajouter une barre de recherche.

Ouvrez donc le gadget HTML/JavaScript de votre menu :

Ajouter une barre de recherche au menu

Repérez le dernier </ul> dans le code HTML de votre menu. Nous allons ajouter un nouvel élément à notre liste de liens. Collez le code suivant juste au-dessus de </ul> :
<!-- Barre de recherche -->
<li><form action="/search" id="searchthis" method="get">
<input id="search" name="q" type="text" placeholder="Mot clé" />
<input id="search-btn" type="submit" value="Rechercher" />
</form></li>
Comme ceci :

Ajouter une barre de recherche au menu

Visuellement on obtient :

Ajouter une barre de recherche au menu

Pour modifier la mot qui apparaît dans le champ de saisie, remplacez Mot clé par le mot de votre choix.
Pour modifier le mot du bouton valider, remplacez Rechercher par le mot de votre choix.

Personnaliser l'apparence de la barre de recherche

Maintenant que nous avons ajouté la barre de recherche à notre menu, nous allons modifier son apparence avec du CSS pour qu'elle s'accorde à notre design.

Vous pouvez :
  1. ajouter le code CSS à la suite du code HTML de votre menu
  2. ajouter le code CSS dans le thème de votre blog
Nous allons utiliser la première option car on évite de modifier le code HTML du blog ;)
Ajoutez le code suivant après tous les codes de votre gadget HTML/JavaScript :
<style type="text/css">
/* Ajouter le code CSS ici */
</style>
Comme ceci :

Ajouter une barre de recherche au menu

Remplacez /* Ajouter le code CSS ici */ par les codes CSS que nous allons voir par la suite.

Modifier le champ de saisie

Pour modifier l'apparence du champ de saisie on utilise le code CSS suivant :
/* Champ de saisie */
#barre_nav #search {
}
Vous pouvez changer la couleur de fond du champ de saisie et la bordure du champ de saisie avec les codes suivants, à ajouter avant le signe } :
background-color: #429398;   /* Couleur de fond */
border-style: solid;   /* Style de la bordure */
border-width: 1px;   /* Epaisseur de la bordure */
border-color: #ffffff;   /* Couleur de la bordure */
Si vous voulez ajouter une bordure à un seul côté du champ de saisie, ajoutez le code suivant pour supprimer les bordures par défaut :
border: none;   /* Supprime les bordures par défaut */
Puis ajoutez le code correspondant après border :
-left : pour le côté gauche
-right : pour le côté droit
-top : pour le dessus
-bottom : pour le bas
Par exemple pour ajouter une bordure sous le champ de saisie seulement, j'écris :
border: none;   /* Supprime les bordures par défaut */
border-bottom-style: solid;   /* Style de la bordure */
border-bottom-width: 1px;   /* Epaisseur de la bordure */
border-bottom-color: #ffffff;   /* Couleur de la bordure */
Vous pouvez également augmenter la hauteur du champ de saisie en ajoutant de l'espace autour du texte avec le code :
padding: 5px 5px 5px 5px;   /* Espace autour du texte du champ de saisie : haut droite bas gauche */
Visuellement on obtient :

Ajouter une barre de recherche au menu

Modifier le texte du champ de saisie

Toujours dans le même code CSS, vous pouvez modifier l'apparence du texte du champ de saisie avec les codes suivants à ajouter avant le signe } :
color: #fff;   /* Couleur du texte du champ de saisie */
letter-spacing: 1px;   /* Espacement des caractères du texte du champ de saisie */
font-family: 'Lora', serif;   /* Police du texte du champ de saisie */
font-style: italic;   /* Style de la police du texte du champ de saisie : normal = normal ; italic = italique */
font-weight: normal;   /* Graisse du texte du champ de saisie : normal = normal ; bold = gras */
font-size: 14px;   /* Taille de la police du texte du champ de saisie */
Visuellement on obtient :

Ajouter une barre de recherche au menu

Modifier la couleur du texte par défaut du champ de saisie

Le texte par défaut du champ de saisie apparaît en gris. Tous les navigateurs ne prennent pas en charge de code pour modifier sa couleur, mais il existe un moyen de détourner ce problème avec l'utilisation des codes suivants :
/* Couleur du texte par défaut du champ de saisie */
::-webkit-input-placeholder {
color: #ffffff;
}
:-moz-placeholder { /* Firefox 18- */
color: #ffffff; 
}
::-moz-placeholder { /* Firefox 19+ */
color: #ffffff; 
}
:-ms-input-placeholder { 
color: #ffffff; 
}
Ajoutez ces codes CSS à la suite du précédent en changeant le code couleur par celui que vous voulez. Attention, je ne vous garantie pas que cela marche car comme je vous l'ai dit, une partie des navigateurs ne le prend pas en charge.

Modifier l'apparence du bouton valider

Pour modifier l'apparence du bouton valider, nous allons utiliser le code CSS suivant :
/* Bouton valider */
#barre_nav #search-btn {
}
De même que pour le champ de saisie, vous pouvez modifier le texte de ce bouton avec les codes suivants, à ajouter avant le signe } :
color: #429398;   /* Couleur du texte du bouton valider */
letter-spacing: 1px;   /* Espacement des caractères du texte du bouton valider */
font-family: 'Lato', sans-serif;   /* Police du texte du bouton valider */
font-style: normal;   /* Style de la police du texte du bouton valider : normal = normal ; italic = italique */
font-weight: normal;   /* Graisse du texte du bouton valider : normal = normal ; bold = gras */
font-size: 12px;   /* Taille de la police du texte du bouton valider */
text-transform: uppercase;   /* Texte en majuscules */
Remarque : si vous ne voulez pas que le texte soit en majuscules, n'ajoutez pas la dernière ligne ;)

Pour modifier le fond et la bordure du bouton, nous allons utiliser les codes suivants :
background-color: #fff;   /* Fond du bouton valider */
border: none;   /* Pas de bordure au bouton valider */
Ici j'ai supprimé la bordure du bouton, mais vous pouvez en ajouter une en utilisant les codes donnés ci-dessus pour le champ de saisie ;)

Pour ajouter de l'espace entre le texte et le bord du bouton utilisez le code :
padding: 5px 10px 5px 10px;   /* Espace entre le texte et le bord du bouton : haut droite bas gauche */
Pour ajouter un espace entre le champ de saisie et le bouton utilisez le code :
margin-left: 5px;   /* Espace à gauche du bouton valider */
Visuellement on obtient :

Ajouter une barre de recherche au menu

Modifier l'apparence du bouton valider au survol de la souris

Pour modifier l'apparence du bouton au survol de la souris, nous allons utiliser le code CSS suivant :
/* Bouton valider au survol de la souris */
#barre_nav #search-btn:hover {
}
De même que pour le bouton valider, on peut modifier le fond, la bordure, la police, etc. N'ajoutez que les codes pour les éléments que vous voulez modifier.

Par exemple, si je souhaites que le fond du bouton et la police changent de couleur au survol, j'ajoutes simplement le code qui définit la couleur de fond et celle de la police :
background-color: #e7c049;   /* Couleur de fond */
color: #fff;   / * Couleur de la police */
Comme ceci :
/* Bouton valider au survol de la souris */
#barre_nav #search-btn:hover {
background-color: #e7c049;   /* Couleur de fond */
color: #fff;   / * Couleur de la police */
}
Visuellement on obtient :

Ajouter une barre de recherche au menu

Remplacer le bouton valider par une image

Pour remplacer le bouton valider par une image, nous allons utiliser une image de fond.
Tout d'abord il faut supprimer le texte du bouton valider. Pour cela, remplacez la ligne :
<input id="search-btn" type="submit" value="Rechercher" />
du code HTML de la barre de recherche, par cette ligne :
<input id="search-btn" type="submit" value="" />
Ensuite nous allons nous intéresser au code suivant :
/* Bouton valider */
#searchthis #search-btn {
}
Pour ajouter une image en fond du bouton, ajoutez les codes suivants avant le signe } :
background-color: transparent;   /* Supprime la couleur de fond du bouton */
border: none;   /* Supprime la bordure du bouton */
background-image: url('http://adresseurl.fr/image.png');   /* Image de fond du bouton */
Remplacez http://adresseurl.fr/image.png par l'adresse url de votre image. Pour créer une adresse url pour votre image, vous pouvez ajouter votre image à Blogger en suivant mon tutoriel ;)

Maintenant il faut définir la taille de votre image en utilisant les codes :
width: 30px;   /* Largeur de votre image */
height: 29px;   /* Hauteur de votre image */
background-size: contain;   /* Permet de contenir l'image dans les proportions données */
Au final ce code ressemble à :
#searchthis #search-btn {
background-color: transparent;   /* Supprime la couleur de fond du bouton */
border: none;   /* Supprime la bordure du bouton */
background-image: url('http://adresseurl.fr/image.png');   /* Image de fond du bouton */
width: 30px;   /* Largeur de votre image */
height: 29px;   /* Hauteur de votre image */
background-size: contain;   /* Permet de contenir l'image dans les proportions données */
}
Si vous voulez ajouter de l'espace autour de l'image utilisez le code suivant :
margin: 5px 5px 5px 5px;   /* Espace autour de l'image : haut droite bas gauche */

Le code CSS final dans votre gadget devrait ressembler à ceci (avec les codes CSS de votre choix ) :
<style type="text/css">

/* Champ de saisie */
#barre_nav #search {
background-color: #429398;   /* Couleur de fond */
border: none;   /* Supprime les bordures par défaut */
border-bottom-style: solid;   /* Style de la bordure */
border-bottom-width: 1px;   /* Epaisseur de la bordure */
border-bottom-color: #ffffff;   /* Couleur de la bordure */
padding: 5px 5px 5px 5px;   /* Espace autour du texte du champ de saisie : haut droite bas gauche */
}

/* Couleur du texte par défaut du champ de saisie */
::-webkit-input-placeholder {
color: #ffffff;
}
:-moz-placeholder { /* Firefox 18- */
color: #ffffff; 
}
::-moz-placeholder { /* Firefox 19+ */
color: #ffffff; 
}
:-ms-input-placeholder { 
color: #ffffff; 
}

/* Bouton valider */
#barre_nav #search-btn {
color: #429398;   /* Couleur du texte du bouton valider */
letter-spacing: 1px;   /* Espacement des caractères du texte du bouton valider */
font-family: 'Lato', sans-serif;   /* Police du texte du bouton valider */
font-style: normal;   /* Style de la police du texte du bouton valider : normal = normal ; italic = italique */
font-weight: normal;   /* Graisse du texte du bouton valider : normal = normal ; bold = gras */
font-size: 12px;   /* Taille de la police du texte du bouton valider */
text-transform: uppercase;   /* Texte en majuscules */
background-color: #fff;   /* Fond du bouton valider */
border: none;   /* Pas de bordure au bouton valider */
padding: 5px 10px 5px 10px;   /* Espace entre le texte et le bord du bouton : haut droite bas gauche */
margin-left: 5px;   /* Espace à gauche du bouton valider */
}

/* Bouton valider au survol de la souris */
#barre_nav #search-btn:hover {
background-color: #e7c049;   /* Couleur de fond */
color: #fff;   / * Couleur de la police */
}
</style>
Et voilà ! Vous savez maintenant créer un champ de recherche pour votre menu ! ;)

Bon blogging !

Autres articles

99 commentaires:

  1. Super tutoriel, merci beaucoup ! Tes articles sont vraiment une mine d'or, merci infiniment pour tout ce que tu mets à notre disposition, et pour nous permettre d'avoir un blog à notre image :) Bonne continuation à toi.

    RépondreSupprimer
  2. Un tutoriel à faire : créer un formulaire de contact et le personaliser ;)

    RépondreSupprimer
  3. Bonjour Cattherine!
    D'abord j'espère que tu va bien et si tu es en vacances que tu profites un maximum. Sinon je viens te demander de l'aide car depuis aujourd'hui Blogger a installé de lui-même un bandeau de cookies qui me cause pas mal de problèmes.

    En fait le bandeau se trouve derrière mon menu et quand j'ai voulu installer la balise script cookies comme indiqué sur le support Blogger (https://support.google.com/blogger/answer/6253244?hl=fr&ref_topic=3339243) cela ne change rien ou alors mon menu change de place (sous la bannière et fixe!).

    As-tu une soluce pour déplacer ce bandeau de malheur? Où du moins pour qu'il ne vienne pas interférer avec mon menu. Et si possible une balise "type" pour le modifier (message, couleurs, etc..).

    Mon blog est juste ici:
    http://leblocnotesdecarmen.blogspot.fr/

    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Je vais justement faire un tutoriel sur le sujet. Je pense le poster en fin de semaine. En attendant tu peux déplacer cette barre en bas de ta page en rajoutant le code CSS suivant :

      #cookieChoiceInfo {
      bottom: 0px !important;
      top: initial !important;
      }

      Avant la ligne :

      ]]></b:skin>

      Supprimer
    2. Un grand merci Cathernie ! Je file faire ça !

      Supprimer
  4. Bonsoir,
    Merci pour ce brillant tutoriel, tu es absolument génial.
    Bises

    RépondreSupprimer
  5. Bonjour, je ne comprend pas trop la partie pour remplacer rechercher par une image car j'ai chercher la ligne demandé dans le code html et je ne la trouve pas.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as supprimé le texte du bouton, c'est pour cela que tu ne le trouves pas. Remplace la ligne suivante du code HTML de ta barre de recherche :

      <input id="search-btn" type="submit" value="">

      Par la ligne de code pour l'image

      Supprimer
  6. Coucou !
    Je mange mon chapeau : lorsque je tente de mettre une barre de recherche au menu, celle-ci se positionne directement sur une deuxième ligne dans mon menu. Il n'y a pas de souci de largeur car si je rajoute des items sans barre de recherche, tout le monde reste à sa place.
    Pire : si j'enlève le code pour centrer tout ce petit monde et donc colle tout à gauche, ma barre de recherche rejoint bien sagement ses petits camarades... sauf que tout est à gauche donc.
    Aurais-tu de quoi éclairer ma lanterne ?
    En te remerciant par avance,
    Laura

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Peux-tu me donner le lien de ton blog pour que je puisse voir d'où vient le problème ?

      Supprimer
    2. Salut!
      Deja super blog qui m'aide vraiiiment beaucoup :)

      Sinon j'ai le même problème que Laura et je ne trouve pas de solution :(

      Merci d'avance

      Supprimer
    3. Bonjour Laura,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
  7. Hello

    J'ai le même probleme que Laura, ma barre de recherche au menu se positionne directement sur une deuxième ligne dans mon menu. Comment faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour Paulette, il me semble que tu as supprimé la barre de recherche, je ne peux pas voir le problème :/

      Supprimer
  8. Bonjour Catherine !
    Même chose pour moi la barre de recherche vient se mettre sur une deuxième ligne... :/
    www.birdymarlowe.com

    RépondreSupprimer
    Réponses
    1. Bonjour, je ne vois pas ta barre de navigation est-ce normal ?

      Supprimer
    2. Bonjour Catherine, j'ai remis la barre de recherche pour que tu puisses voir :)
      Mais vraiment je me suis cassée la tête, je ne comprends pas d'ou cela vient..

      Supprimer
    3. En plus, me petite barre de recherche ne veut pas changer d'apparence malgré le CSS

      Supprimer
    4. Bonjour,
      Rajoute le code suivant à la suite des codes CSs de ta barre de recherche :

      #searchthis {
      display: inline;
      }

      Elle devrait se positionner sur la même ligne sue tes liens ;)

      Supprimer
    5. NIckel ! Cela a bien fonctionné ♡♡♡
      Merciiiiiii

      Supprimer
  9. Bonjour Catherine,

    Merci infiniment pour tes superbes tutos ^^
    J'ai également le même soucie de deuxième ligne, si tu as la solution ? :)

    http://jemistips.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Jemi,
      As-tu supprimé la barre de recherche ? Car je ne la vois pas.

      Supprimer
  10. Salut Catherine,
    J'ai le même souci que celui évoqué plus haut par d'autres internautes. Voici mon lien : http://educendeformation.blogspot.fr/
    J'ai essayé "d'inspecter l'élément" mais ça ne me dit rien... :-/

    RépondreSupprimer
    Réponses
    1. Bonjour Célia,
      Parles-tu du gadget dans ta barre latérale, ou souhaites-tu l'ajouter à ton menu ?

      Supprimer
    2. Ah oui, je l'ai mis dans la barre latérale finalement donc c'est bon en fait. J'ai changé d'avis dans le week-end ;)

      Supprimer
  11. Bonjour,

    J'ai moi-aussi le même problème évoqué dans les commentaires précédents. Est-ce parce que mon menu est centré ?
    Voici le lien de mon blogger : http://shadowinwonderland.blogspot.fr/

    Merci pour ces tous ces tutos ! Je prendrai d'ailleurs soin d'en parler lorsque j'aurai terminé la nouvelle mise en page de mon blog

    RépondreSupprimer
  12. Finalement j'ai réussi ! J'avais simplement fait une erreur de code :s

    RépondreSupprimer
    Réponses
    1. Pas de soucis, tant que le problème est réglé ^^

      Supprimer
  13. Bonjour Catherine! j'ai bien avancée sur l'apparence de mon blog grace à tes tutos mais j'ai une difficulté et je ne trouve pas la solution. Peux-tu m'aider?
    J'ai un menu déroulant dont le fond des liens change de couleur au survol de la souris et j'aimerai que la barre de recherche soit la seule partie qui ne change pas de couleur au survol de la souris, est-ce possible?
    Voici mon blog http://mybeautifulhairnews.blogspot.fr
    je te remercie

    RépondreSupprimer
    Réponses
    1. Bonjour Audrey,
      Oui ça doit être possible. J'ai essayé d'aller sur ton blog pour voir mais je n'y ai pas accès :/

      Supprimer
    2. en effet, il était encore en mode privé car en construction mais je l'ai rendu visible pour que tu puisses le voir :) merci

      Supprimer
    3. Bonjour Audrey,
      Colle le code suivant après les codes CSS de ton menu :

      .tabs-inner .widget li:last-child:hover {
      background-color: #fff !important;
      }

      Il permet de garder une couleur de fond blanche au survol de la souris pour le dernier élément de ton menu, soit ton champ de recherche ;)

      Supprimer
  14. Bonjour Catherine,

    J'ai un gros problème avec ma barre de recherche, j'arrive à l'installer mais je ne peux rien modifier à part mot clé et rechercher, tu pourrais m'aider ?

    http://testblogiamninis.blogspot.fr/

    RépondreSupprimer
  15. En fait c'est ce lien désolé http://iamninis.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Ninis,
      Le problème vient du nom de ton menu qui n'est pas le même. Remplace :

      #barre_nav

      Des codes CSS pour ta barre de recherche, par :

      #menu-cat

      Et voilà ;)

      Supprimer
    2. Merci infiniment ! :)

      Supprimer
  16. Bonjour Catherine !
    Comme précédemment, la barre de recherche vient se mettre sur une deuxième ligne... :/
    J'ai tourné le problème dans tous les sens, je n'arrive pas à savoir pourquoi...
    Voici mon blog: www.birdymarlowe.com
    Merci pour ton aide !
    bises

    RépondreSupprimer
    Réponses
    1. Problème résolu grâce à ton code précédent !
      Merci beaucoup !

      Supprimer
  17. Bonjour Catherine,

    J'ai essayer 3 fois ce tuto est des le début cela fonctionne pas , sa ne me le met pas en longueur mais en largeur comme dans ma barre de gauche :/

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      As-tu essayé d'ajouter les codes CSS ? Car c'est eux qui vont définir le visuel, dont l'alignement, du champ de recerche.

      Supprimer
    2. Coucou Catherine ,

      J'ai supprimé ma barre de recherche dans ma colonne de gauche et sa c'est mit normalement au dessus du coup :)

      Supprimer
  18. J'ai tout recommencer du début je le laisse pour que tu voie mais rien ne change :/

    RépondreSupprimer
    Réponses
    1. J'ai retirer l’espace que j'avais introduit sur mon fond et donc sa ne fais pas comme toi, pas d’espace :/ http://doux-bonheurs.blogspot.fr/

      Supprimer
    2. Bonjour Sarah,
      Que souhaites-tu faire exactement ?

      Supprimer
    3. Je me suis pas bien expliquer désolé :)

      Ou il y à mon menu déroulant, il y à un espace en haut mais pas en vas par rapport à mon image , et j'ai vérifier mon code normalement sur mon menu il doit y avoir un fond de couleur et une autre écriture mais sa ne c'est jamais mit :/

      http://doux-bonheurs.blogspot.fr/

      Encore merci pour tout ce que tu fais pour chacun d'entre nous et du temps que tu nous consacre ♥

      Supprimer
    4. Bonjour Sarah,

      Tout d'abord il y a une petite erreur dans le code HTML de ton menu.

      Au tout début de ton menu tu as ceci :

      <ul>
      <div id="barre_nav">
      <br>

      Remplace ces 3 lignes par ces 2 lignes :

      <div id="barre_nav">
      <ul>

      De même, voici la dernière ligne de ton menu :

      </div></ul>

      Remplace cette ligne par celle-ci :

      </ul></div>


      Ensuite, pour supprimer l'espace au-dessus de ton menu ajoute ce code :

      .content {
      margin-top: -30px;
      }

      Juste avant la ligne :

      ]]></b:skin>

      Pour ce qui est de la police, voici ton code pour les liens du menu :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Arial;
      font-size: 14px;
      font-style: normal;
      border-bottom: none;
      border-bottom-color: #88E2FB;
      border-bottom-width: 1px;
      color: #88E2FB;
      margin-right: 20px;
      }

      La police des liens est donc, d'après ton code CSS, Arial et bleu clair (#88E2FB).

      Supprimer
    5. Bonjour Catherine , j'avais modifier grâce à tes explications encore merci de m'aider à chaque fois :D

      Petite question j'ai un énorme écart blanc en haut puis ma ligne de menu déroulant avec le fond mais sa ne fais pas comme toi .. :/ http://doux-bonheurs.blogspot.fr/

      Supprimer
    6. Bonjour Sarah,

      Pour supprimer l'espace en haut de ton blog, ajoute le code suivant :

      .content {
      margin-top: -30px;
      }

      Juste avant la ligne suivante :

      /* Content

      Comme ceci :

      .content {
      margin-top: -30px;
      }

      /* Content

      Pour supprimer les bords blancs autour de ton menu rajoutes les codes suivants :

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

      #crosscol {
      margin: 0 !important;
      }

      Juste au-dessus de /* Content aussi :

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

      #crosscol {
      margin: 0 !important;
      }

      /* Content

      Pour finir, si tu souhaites ajouter de l'espace autour du texte dans ton menu ajoute :

      #barre_nav ul {
      padding: 13px 0 10px;
      }

      Juste au-dessus de la ligne /* Content ;)

      Supprimer
    7. Ah super sa fonctionne merci encore pour tout Catherine :D T'es adorable :D

      Supprimer
  19. Bonjour Catherine!
    D'abord je voudrais te remercier pour ce blog parce que franchement, je ne sais pas ce que j'aurais fait sans! Ca faisait super longtemps que je cherchais des tutos en français :)

    Je voulais te demander comment faire pour ajouter une barre de recherche à un menu déroulant?

    Merci d'avance :)
    Des bises,
    Sybille ♡

    The new new girl

    RépondreSupprimer
    Réponses
    1. Bonjour Sybille,
      Un menu déroulant est un menu dans un menu. Donc il te suffit de le rajouter comme expliqué dans ce tutoriel mais dans ton menu déroulant. Tout simplement ;)

      Supprimer
  20. Bonjour,

    Je rencontre le même problème : ma barre de recherche se place en dessous de mon menu horizontal alors que j'aimerais qu'elle se place à coté de tous les onglets. Pourrais tu m'aider stp. lien vers mon blog : http://lespetitspostsdesophie.blogspot.fr
    Merci beaucoup pour tous ces tutos super précis et très utiles !

    Sophie

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Il me semble que tu as supprimé la barre de recherche sur ton blog ?
      Le problème peut venir de :
      - la taille de la barre de recherche : si elle est trop large et qu'elle dépasse la largeur du menu ou de l'écran, elle passe en dessous.
      - le code HTML mal placé : il faut bien placer le code du champ de recherche avant le code </ul>
      - une erreur dans le code HTML : un <ul> </ul> <li> </li> en trop ou manquant.
      - une erreur dans le code CSS. Mais pour cela il faudrait que je vois le champ de recherche dans ton menu pour te dire.

      Supprimer
    2. Coucou Cathy,

      J'ai remis la barre de recherche sur mon blog (https://lespetitspostsdesophie.blogspot.com)
      J'ai regardé ce que tu m'as dit mais cela ne fonctionne toujours pas ...

      Aussi, est-ce que c'est possible d'enlever les marges gauche et droite des images de mes articles, pour qu'elles soient collées à ma bordure ?

      Encore merci merci pour ton aide

      Sophie

      Supprimer
    3. Bonjour Sophie,

      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;

      Ensuite retrouve ton code :

      #searchthis #search-btn {
      background-color: transparent; /* Supprime la couleur de fond du bouton */
      border: none; /* Supprime la bordure du bouton */
      background-image: url('http://2.bp.blogspot.com/-RtHKIsPt_kg/VjyBDmvLEuI/AAAAAAAAAb4/EVFl-r1Fn8c/s1600/loupearrierplan.png'); /* Image de fond du bouton */
      width: 30px; /* Largeur de votre image */
      height: 30px; /* Hauteur de votre image */
      padding-top:10px;
      padding-bottom:-10px;
      background-size: contain; /* Permet de contenir l'image dans les proportions données */
      }

      Remplace

      padding-bottom:-10px;

      Par :

      padding-bottom: 10px;

      Cela corrigera un décalage du bouton valider ;)


      Pour ce qui est de la marge entre tes photos et le bord de tes articles, malheureusement ce n'est pas possible. Les photos sont compris dans le contenant de ton article et la marge s'applique à ce contenant. Comme les photos ne peuvent pas sortir de leur contenant il est impossible de supprimer cette marge :/

      Supprimer
    4. MERCI MERCIIIIIIII beaucoup !!!!
      Une dernière question et après je pourrai lancer mon blog : Comment je peux faire pour décaler ma barre de recherche tout à fait à droite et laisser mes titres du menu centrés ?
      Encore un grand merci.
      Sophie

      Supprimer
    5. Bonjour Sophie,
      Je viens d'écrire un tutoriel expliquant comment séparer son menu en 2 parties et donc réaliser ce que tu souhaites. Le tutoriel sera en ligne demain ;)

      Supprimer
  21. Bonjour Catherine,

    Je voudrais mettre mon arrière plan du menu en semi transparence. Peux tu m'aider stp ?

    Merci beaucoup !!!

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Il faut remplacer le code couleur de ton fond par son code RGBA.
      Tu peux utiliser ce site : http://hex2rgba.devoth.com/
      - Entre le code de ta couleur dans la grande boîte sous HEX Value.
      - Choisi ensuite une opacité. Par défaut elle est à 100% pour une couleur solide. 0% correspond à une couleur totalement transparente.
      - Clique sur le gros bouton vert "HEX 2 RGB(A)"
      - Copie le code donné dans la dernière boîte sur la droite. Tu devrais obtenir quelque chose comme ceci :

      rgba(255, 255, 255, 0.5)

      - Colle ce code couleur dans ton code CSS, et voilà ;)

      Supprimer
  22. Bonjour,

    Simple débutante avec tout ces codes, j'aimerai savoir comment on ajoute les élèments dans la barre de recherche lorsque l'on effectue une recherche dessus.

    Exemple : "Barre de recherche => Code du produit => une fois sur la page, apparaît le nom du produit " Clémentine ".

    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      La recherche sur le blog est automatique. Il suffit d'entrer un mot clé et tu auras tous les articles comportant ce mot-clé, ou les pages web qui comportent ce mot-clé selon comment ta barre de recherche est paramétré dans Blogger ;)

      Supprimer
  23. J'ai de faire et refaire, pour une fois ça n'a pas fonctionné ou alors je n'ai pas compris :/

    RépondreSupprimer
    Réponses
    1. Bonjour Anthony,

      As-tu supprimé le code de ton menu ? Je ne le vois pas :/

      Supprimer
  24. Bonjour Catherine,

    Tout d'abord je tiens à te dire que ton blog est génial, on y trouve tellement d'astuces que je ne sais pas par quoi commencer ! :)

    J'ai une petite question :

    ça fait des heures que je tourne le problème dans tous les sens mais je ne trouve pas de solution.
    Saurais-tu comment centrer en hauteur ma barre de recherche dans mon menu ? J'ai vérifier tous les codes et je ne trouve pas de solution :(

    Voici mon blog : http://folies-et-fantaisies.blogspot.fr/

    Ma barre de recherche est bien sur la même ligne que mes onglets mais elle se place en bas de celle-ci, peux-tu m'aider stp ?

    Et autre question : comment faire pour que la couleur du texte de l'onglet sélectionné apparaisse d'une couleur différente des autres dans le menu ?

    Merci par avance et merci beaucoup pour tout ce que tu fais !

    xxx
    Gaëlle

    RépondreSupprimer
    Réponses
    1. Bonjour Gaëlle,

      Merci ^^

      Pour ta barre de recherche, j'ai l'impression que séparer ton menu en 2 à réglé le problème non ? ^^
      Au cas où, retrouve ton code suivant :

      #searchthis {
      display: inline;
      }

      Et rajoute ces 2 lignes avant le signe }

      position: relative;
      top: 0px; /* Position verticale */

      Remplace 0px par une valeur négative pour déplacer le formulaire de recherche vers le haut, ou par une valeur positive pour le déplacer vers le bas ;)

      Malheureusement il n'y a pas de code CSS pour définir une couleur différente pour le lien sélectionné :/

      Supprimer
  25. Et oui c'est encore moi!

    Est-il possible de changer le bouton "rechercher" et de mettre une petite loupe ?

    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible tu peux remplacer le bouton recherche par une image de loupe, par exemple, en suivant la dernière partie du tutoriel.

      Supprimer
  26. Re bonjour, je regarde tous les tutos et je fais des tests mais je n'arrive pas à mettre ma barre de recherche dans mon 2ème menu à droite comment puis je faire ?
    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Pour ajouter la barre de recherche dans le 2e menu, ajoute le code HTML de la barre de recherche avant :

      </ul>
      <!-- fin de la 2e partie du menu -->

      Et voilà ;)

      Supprimer
  27. Bonsoir,

    Merci pour ce tutoriel. Je l'ai inclut dans mon blog et ça donne très très bien. Petite question: comment avez vous fait pour que le champ de saisie apparaisse que lorsqu'on clique sur l'icône de la loupe. J'aimerais bien faire la même chose pour que le champ de saisie ne soit pas tout le temps visible sur ma barre de navigation.
    Avec ça, ce sera encore plus parfait :)
    www.raspberrylipstick.com

    Merci d'avance,
    Antoine

    RépondreSupprimer
    Réponses
    1. Ce n'était pas facile à l'époque ! ^^
      J'ai adapté un tutoriel trouvé sur Codrops : http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

      Supprimer
  28. Bonjour Catherine,

    Un énorme merci pour tous tes tutos qui sont hyper clairs et du coup faciles à réalisés. J'ai réussi à installer la barre de recherche dans mon menu. En revanche, je n'arrive pas à faire afficher l'image.
    Par ailleurs je souhaiterais savoir comment me débarraser de l'apostrophe qui apparit dans la banière. Si tu as une astuce, je suis preneuse.
    Dernière petite chose, est-il possible d'avoir le même effet que toi pour la barre de recherche qui se déplie ? Voici le lien de mon blog : http://www.dressingdes4saisons.com/
    Par avance, merci de ton aide.

    Melle

    RépondreSupprimer
    Réponses
    1. Bonjour Melle,
      J'ai vu que tu avais installé un thème sur ton blog, cela à réglé ton problème ?

      Supprimer
  29. Bonjour,
    J'ai réalisé un menu déroulant qui fonctionne parfaitement sur un ordinateur mais...
    Quand je suis sur une tablette il n'est pas possible de le faire "dérouler" car on ne passe pas la souris dessus, on ne peut que cliquer.
    Serait-il possible d'ajouter un code pour que le menu soit utilisable sous tablette?

    Si besoin mon blog est: letransportereves.blogspot.be

    merci d'avance
    Et surtout merci pour tes super tutoriels.
    Laurène

    RépondreSupprimer
    Réponses
    1. Bonjour Laurène,
      Pour cela il faut ajouter un nouveau menu qui permet d'afficher le menu-déroulant en cliquant sur le lien dans lequel il se trouve.
      Si tu es intéressée, je peux le faire mais par prestation. Envoie-moi un message avec le formulaire de contact disponible sur la page Design ;)

      Supprimer
  30. Bonjour Catherine,

    Tout d'abord je tiens à te remercier pour tous tes tutoriels très bien expliqués. Je suis en plein "travaux" comme on pourrait si bien le dire et j'ai quelques soucis depuis quelques jours que je n'arrive pas à réparer. J’aurai besoin de ton aide en espérant ne pas trop te déranger.

    Donc premièrement, depuis que j'ai mis la barre de recherche mon menu est comme caché à un endroit par quelque chose mais je ne sais pas vraiment ce que c'est, j'aimerai pouvoir retrouvé un menu "droit ». (tu comprendras en venant sur mon blog je pense)
    Je n'arrive également pas à mettre une image à la place de l’icône "rechercher", je suis allée prendre une loupe sur google dans un site gratuit mais elle ne veut pas s'afficher…

    Deuxièmement, depuis que j’ai mis un menu déroulant sur mes catégories, le léger espacement d’environ 1cm que j’avais établi (et qui jusqu’alors marchait) aux extrémité du menu, c’est à dire a gauche de « home » et à droite de la barre de recherche, a disparu. J’aimerai pouvoir le remettre.
    Aussi, comme tu as pu le remarqué mon menu déroulant n’en ai pas vraiment un. J’ai pourtant recommencer le tutoriel à plusieurs reprises mais rien à faire, le menu reste visible en dessous de mes catégories tout le temps au lieu d’être caché…

    J’espère que tu pourras m’aider et je te remercie encore pour tous ce que tu nous fait partager ainsi que pour ta précieuse aide :)

    Le lien de mon blog : www.kayaseregni.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Kaya,
      Pour régler le problème de mise en page de ta 2e barre (avec les icônes et la recherche) retrouve ce code CSS :

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: right;
      }

      Remplace-le par :

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: right;
      position: absolute;
      right: 0;
      top: 0;
      padding-top: 6px;
      padding-bottom: 0;
      }

      Le problème de ton menu déroulant vient du fait que les codes CSS de des menus déroulants se trouve avant les codes CSS de ton menu. Ce qui entraîne un conflit entre les codes. En fait il faut simplement savoir qu'entre 2 codes CSS, celui qui se trouve après (en dernier) l'emporte sur le premier (sauf cas particulier). Copie donc tous tes codes CSS pour tes menus déroulants, à parti de la ligne :

      /* Apparence du menu déroulant */

      Jusqu'au signe } (compris) juste avant la ligne :

      .blog-feeds {

      Colle tout ce code avant la ligne :

      /* Columns

      Tu peux rajouter un espace à gauche et à droite de ton menu en ajoutant les codes :

      max-width: 100%;
      padding-left: 20px;

      Avant le signe } de ce code :

      /* Apparence globale du menu */
      #barre_nav {
      margin-top: 0px;
      margin-bottom: 50px;
      border: none;
      background: #ebe2da;
      }

      Pour la marge à droite, il faut modifier la ligne suivante :

      right: 0;

      De ce code CSS :

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: right;
      position: absolute;
      right: 0;
      top: 0;
      padding-top: 6px;
      padding-bottom: 0;
      }

      Avec la même valeur (exemple avec 20px) :

      right: 20px;

      Pour l'image à la place du bouton valider, c'est un peu plus compliqué que d'ajouter une image. Je l'ai noté sur ma liste de tutoriels à faire ;)

      Supprimer
    2. Je te remercie énormément ! Par contre le menu déroulant ne fonctionne toujours pas :/ Tu saurais me dire d'où vient le problème s'il te plait ?

      Ah d'accord je pensais qu'en fait le code de cet article pour ajouter une image servait justement à remplacer l'image du bouton valider haha, j'attends ce tutoriel avec impatience alors x)

      J'aimerai aussi savoir si tu as appris à coder dans un cadre scolaire/professionnel ou personnellement par internet ou autres ? Je suis curieuse :)
      En tout cas grâce à tes compétences et tes explications claires tu aides beaucoup de monde ;)

      Encore merci !

      Supprimer
    3. Bonjour Kaya,
      Ajoute les 2 codes CSS suivants :

      #barre_nav ul ul {
      display: none;
      }

      #barre_nav ul li:hover ul {
      display: block;
      }

      Avant la ligne :

      /* Columns


      En fait j'ai tout appris par moi-même en bidouillant ^^
      Je suis contente de pouvoir aider ;)

      Supprimer
  31. Bonsoir, encore un super tuto ^^

    Ayant déjà appliqué ton tuto pour séparer le menu en 2 et y ajouter des icônes pour les réseaux sociaux, ma barre de recherche ne s'aligne pas sur le menu et se retrouve sous mes icônes.

    Aurais-tu un moyen pour réparer cela ?

    Merci d'avance

    PS: lennylifestyle.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Lenny,
      Le problème vient de ce code :

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

      Remplace la ligne :

      display: inline;

      Par :

      display: inline-block;

      Il faudra ensuite décaler le 2e menu vers le haut en ajoutant :

      position: relative;
      top: -13px;

      Avant le signe } de ce code :

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: right;
      }

      Et voilà ;)

      Supprimer
  32. Coucou

    Super tuto encore, j'ai bien réussi!
    Dit moi, je voulais qu'on soit bien au point, j'ai supprimé du coup le widget à droite dans ma colonne ca sert plus à rien?

    Tu sais comment on peut paramétrer la recheche. Parce que je crois qu'elle est très légère. Quand je tape en recherche Look du jour par exemple, elle ne prend pas en compte le libellé du meme nom :/ c'est dommage.

    Est ce que tu pourrais aussi prévoir un tuto pour adapter la taille du blog aux dimensions des différents écrans. Je crois que je te l'ai déjà demandé. J'ai essayé plusieurs codes mais rien n'a marché :/

    Merci Catherine!
    Gros bisous

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Oui du coup le gadget de la barre latérale ne sert plus à rien ^^
      Je ne suis pas sûre que l'on puisse paramétrer facilement la recherche, mais je vais regarder ça.

      Je note sur ma (longue ^^) liste de tutos pour rendre le blog responsive ;)

      Supprimer
    2. super merci. Je me suis essayée au media queries mais je n'ai pas réussi à faire ce que je voulais pas facile!

      Supprimer
    3. Haha, oui c'est pas évident !
      Voici un article utile sur les media queries qui peut peut-être aider :
      http://www.alsacreations.com/article/lire/930-css3-media-queries.html

      Supprimer
  33. Bonjour Catherine !
    Je lis très souvent tes tutos et je me permets de te laisser un commentaire pour la première fois.
    J'ai créé un menu horizontal et fixe en haut de ma page, grâce à ton tuto qui explique la manière de le faire en créant un gadget HTML. C'est chose faîte et il fonctionne très bien.
    Le problème est que j'aimerais maintenant ajouter plusieurs modifications à ce menu, or impossible d'accéder à ses paramètres de modification...
    Je m'explique : quand je me connecte et que je suis sur ma homepage, des petits outils s'affichent sous chaque widget pour accéder directement aux paramètres de modifications (qui s'ouvrent comme des pop-ups). Sauf que sous le widget du menu, je n'ai rien du tout... Autre soucis : dans la rubrique "mise en page" de l'interface Blogger, je vois tous mes widgets bien positionnés (du Html1 au Html4), sauf le menu!!!
    Je trouve ça fou, étant donné qu'il fonctionne pourtant parfaitement et que j'ai pu le modifier via du CSS...
    En espérant que tu ais déjà rencontré ce problème et que tu auras une solution à m'apporter...
    Très bonne soirée, et encore bravo pour ce super blog.
    Eglantine

    RépondreSupprimer
    Réponses
    1. Bonjour Eglantine,
      Ajoute le code CSS suivant :

      #layout .tabs-outer {
      position: relative !important;
      top: initial !important;
      left: initial !important;
      }

      Avant la ligne :

      ]]></b:skin>

      Supprimer
  34. Bonjour,
    Merci pour tous tes tutoriels qui m'ont permis de beaucoup améliorer mon blog depuis que je l'ai crée.
    Par contre, j'ai un petit soucis et je voulais savoir si tu pouvais m'aider. J'ai voulu créer une barre de navigation à mettre en haut du blog avec des icônes de réseaux sociaux et une barre de recherche, mais n'y parvenant pas, j'ai supprimé le gagdet code html. Seulement, la barre de recherche n'est pas partie quand j'ai supprimé le gadget.
    Comment puis-je faire pour la supprimer ?

    En espérant que tu puisses me donner une solution.
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Sandrine,
      Le champ de recherche est généré par ton thème. Tu peux le cacher si tu le souhaites, en ajoutant le code CSS suivant :

      #search_box {
      display: none !important;
      }

      Avant la ligne suivante :

      ]]></b:skin>

      Supprimer
  35. Coucou, tout d'abord, merci pour tes tutos qui me sont d'une grande aide dans la création de mon blog ! Mais j'ai un petit soucis avec celui-ci, je n'arrive pas à mettre ma barre de recherche de façon à ce qu'elle soit alignée avec les catégories du menu. Aurais-tu une solution s'il-te-plaît ? :)

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

      Supprimer
    2. Bonjour, le voici : http://carnetdebordtravel.blogspot.fr/ :)

      Supprimer
    3. Bonjour Clara,

      Ajoute le code CSS suivant à la suite des codes CSS de ton champ de recherche :

      form#searchthis {
      padding: 1em 1.5em;
      }

      Et voilà ;)

      Supprimer
  36. Bonjour Catherine,
    Merci beaucoup pour ce tutoriel, c'est très utile ! J'ai réussi à le mettre en place mais j'aimerais juste savoir s'il est possible de réduire la taille du bouton valider de ma barre de recherche pour qu'il soit de la même hauteur que le champ de saisie ? J'aimerais aussi que le champ de saisie soit moins long, mais je ne sais pas quel code changer. Dernière petite question, est-ce que tu pourrais faire un tutoriel avec différents "designs" de barre de recherche ? Par exemple une barre de recherche un peu comme la tienne, où l'on voit seulement une loupe à côté des boutons de réseaux sociaux, et lorsque l'on clique dessus, elle se "déplie" pour qu'on puisse saisir du texte. Je pense que ça pourrait être sympa, si tu as le temps bien sûr ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je note pour le tutoriel ;)
      Pour modifier la hauteur de ton bouton valider, tu peux jouer sur la marge autour du texte avec padding.
      Retrouve ce code CSS :

      /* Bouton valider */
      #barre_nav #search-btn {
      color: #ffffff; /* Couleur du texte du bouton valider */
      letter-spacing: 2px; /* Espacement des caractères du texte du bouton valider */
      font-family: Arial; /* Police du texte du bouton valider */
      font-weight: normal; /* Graisse du texte du bouton valider : normal = normal ; bold = gras */
      font-size: 13px; /* Taille de la police du texte du bouton valider */
      background-color: #e4cec7; /* Fond du bouton valider */
      border-style: solid; /* Style de la bordure */
      border-width: 1px; /* Epaisseur de la bordure */
      border-color: #e4cec7; /* Couleur de la bordure */
      padding: 5px 10px 5px 10px; /* Espace entre le texte et le bord du bouton : haut droite bas gauche */
      margin-left: 5px; /* Espace à gauche du bouton valider */
      }

      Modifie les valeurs 5px de cette ligne :

      padding: 5px 10px 5px 10px; /* Espace entre le texte et le bord du bouton : haut droite bas gauche */

      Tu peux aussi augmenter la marge à l'intérieur du champ de saisie. Retrouve ce code :

      /* Champ de saisie */
      #barre_nav #search {
      background-color: #ffffff; /* Couleur de fond */
      border-style: solid; /* Style de la bordure */
      border-width: 1px; /* Epaisseur de la bordure */
      border-color: #666666; /* Couleur de la bordure */
      color: #666666; /* Couleur du texte du champ de saisie */
      letter-spacing: 1px; /* Espacement des caractères du texte du champ de saisie */
      font-family: Arial; /* Police du texte du champ de saisie */
      font-weight: normal; /* Graisse du texte du champ de saisie : normal = normal ; bold = gras */
      font-size: 12px; /* Taille de la police du texte du champ de saisie */
      }

      Avant le signe } de ce code, rajoute la même ligne padding que pour le bouton valider, pour que ces 2 éléments aient la même hauteur. Par exemple :

      padding: 5px 10px 5px 10px; /* Espace entre le texte et le bord du bouton : haut droite bas gauche */

      Pour diminuer la largeur du champ de saisie ajoute la ligne suivante :

      width: 120px; /* Largeur en pixels */

      Juste avant le signe } du code CSS pour le champ de saisie.

      Supprimer
  37. Salut Catherine, merci encore pour la qualité de tes tutos !!

    Dis, je n'arrive pas à inclure la font-awesome search : "fa fa-search" à la place du bouton >rechercher< ou >valider< ... parce que je ne peux pas mettre le "i/" dans le "input" à la place de value.

    Sais tu comment je peux écrire ce code ?

    MERCI POUR TON AIDE !!

    RépondreSupprimer
  38. Problème résolu ! Je viens de te laisser un commentaire pour integrer une icone fontawesome dans la barre de recherche. j'ai résolu comme ca :

    -li--div class="search"--span class="fa fa-search"--/span--input placeholder="rechercher"/--/div--/li-
    (en remplacant les -- par les balises mais je sais pas comment les integrer dans le commentaire...)

    Peut être que ca vaille le coup de completer ce petit + pour ton article (Qui, cela dit, était déjà vraiment remarquable !)

    A bientot !

    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