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

Modifier la largeur de l'en-tête et du menu à 100% de la page

Après vous avoir expliqué comment modifier la largeur du pied de page à 100% de la page, aujourd'hui on s'intéresse à l'en-tête du blog et du menu.

Faire une sauvegarde

Je ne le répéterai jamais assez, cette étape est très importante au cas où vous feriez une erreur ! Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème :


Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Modifier la largeur de l'en-tête du blog à 100% de la page

Pour modifier la largeur de l'en-tête à 100% de la page il va falloir, comme pour le pied de page, le déplacer hors du contenant du blog.

En fait, les éléments du blog sont compris dans des contenants, un peu comme des boîtes. Pour l'instant votre en-tête est à l'intérieur de la boîte qui définit la largeur de votre blog :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Il va falloir le sortir de cette boîte comme ceci :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Une fois la sauvegarde faite, cliquez sur Modifier le code HTML :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Collez la ligne suivante dans la boîte de recherche :
<header>
Appuyez sur Entrer.
Vous trouverez le code de votre en-tête :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Cliquez sur le nombre à gauche de cette ligne (elle sera différente pour vous) :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Vous venez de fermer le code de votre en-tête, et obtenez la ligne suivante avec une flèche noir à gauche de la ligne de code :
<header>...</header>
Sélectionnez maintenant tout le code de votre en-tête en commençant par la droite et non par la gauche, pour éviter d'ouvrir le code :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Si vous ouvrez le code ce n'est pas grave, cherchez à nouveau le code <header> et recommencez les étapes précédentes ;)

Coupez ce code et collez-le dans un fichier Notepad par exemple.

Maintenant il faut chercher le début du code du contenant du blog.

Cherchez le code suivant, de la même manière que vous avez cherché <header> :
<div class='content-outer'>
Appuyez sur Entrer et vous devrez tomber sur le code :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Collez le code de votre en-tête juste au-dessus de cette ligne comme ceci :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Il se peut que le code de votre en-tête s'ouvre à cette étape, ce n'est pas grave. Pour vérifier si vous avez bien collé le code au bon endroit, cherchez à nouveau <header> et fermez le code en cliquant sur le nombre à sa droite, comme expliqué en début de tutoriel ;)

Visuellement on obtient :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Sauvegardez, et voilà ! Vous avez déplacé votre en-tête !

Remarquez qu'un espace peut apparaître en haut du blog avant l'en-tête. Pour rectifier ce problème il faut rajouter un petit code CSS.

Rectifier l'espace au-dessus de l'en-tête

Cherchez le code suivant :
<b:skin>
Si vous trouvez le code suivant :
<b:skin>...</b:skin>
Cliquez sur la flèche noir à gauche de cette ligne :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Si vous ne trouvez pas cette ligne, alors cela veut dire que cette partie est ouverte, passez à l'étape suivante ;)
Cherchez maintenant le code suivant :
]]></b:skin>
Juste au-dessus de cette ligne collez :
header {
    background-color: #FBFBFB;   /* Couleur de fond de l'en-tête */
    margin-top: -30px;   /* Espace au-dessus de l'en-tête */
}
Modifiez la valeur de margin-top en augmentant ou en diminuant -30px, sachant qu'une valeur négative déplace l'en-tête vers le haut et une valeur positive le déplace vers le bas.

Dans mon exemple, j'ai également un espace au-dessus du menu. Pour rectifier ce problème, si vous avez créé votre menu avec mon tutoriel, il suffit de modifier la valeur de l'espace au-dessus de celui-ci.

Modifier la largeur du menu à 100% de largeur de la page.

Comme pour l'en-tête, il faut le déplacer en dehors du contenant du blog. Avant de faire ceci il faut également déplacer l'en-tête du blog en dehors de ce contenant comme expliqué ci-dessus, sinon le menu sera déplacé au-dessus de l'en-tête.

Une fois l'en-tête à 100% de largeur de la page, cherchez le code suivant :
<div class='tabs-outer'>
Vous devrez trouver ceci :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Cliquez sur le nombre à gauche de cette ligne (elle sera différente pour vous) :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Vous venez de fermer le code de votre menu, et obtenez la ligne suivante avec une flèche noir à gauche de la ligne de code :
<div class='tabs-outer'>...</div>
Sélectionnez maintenant tout le code de votre menu en commençant par la droite et non par la gauche, pour éviter d'ouvrir le code :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Si vous ouvrez le code ce n'est pas grave, cherchez à nouveau le code <div class='tabs-outer'> et recommencez les étapes précédentes ;)

Coupez ce code et collez-le dans un fichier Notepad par exemple.

Maintenant il faut chercher le début du code du contenant du blog.
Cherchez le code suivant, de la même manière que vous avez cherché <div class='tabs-outer'> :
<div class='content-outer'>
Appuyez sur Entrer et vous devrez tomber sur le code :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Collez le code de votre en-tête juste au-dessus de cette ligne comme ceci :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Il se peut que le code de votre en-tête s'ouvre à cette étape, ce n'est pas grave. Pour vérifier si vous avez bien collé le code au bon endroit, cherchez à nouveau <div class='tabs-outer'> et fermez le code en cliquant sur le nombre à sa droite, comme expliqué en début de tutoriel ;)

Visuellement on obtient :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Sauvegardez, et voilà ! Vous avez déplacé votre menu ;)

Si vous avez des espaces à gauche et à droite de votre menu, il faut ajouter un petit code CSS.

Rectifier l'espace à gauche et à droite du menu

Cherchez le code suivant :
<b:skin>
Si vous trouvez le code suivant :
<b:skin>...</b:skin>
Cliquez sur la flèche noir à gauche de cette ligne. Si vous ne trouvez pas cette ligne, alors cela veut dire que cette partie est ouverte, passez à l'étape suivante ;)

Cherchez maintenant le code suivant :
]]></b:skin>
Juste au-dessus de cette ligne collez :
#crosscol, .tabs-inner {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
Comme ceci :

Modifier la largeur de l'en-tête et du menu à 100% de la page

Autres articles

260 commentaires:

  1. Top article comme d'hab :) par contre chez moi ton lien de partage twitter ne fonctionne pas :s Bises <3

    RépondreSupprimer
    Réponses
    1. Argh, je crois que ça vient de l'apostrophe du titre de l'article. Je vais rectifier ça. Merci ! ^^

      Supprimer
    2. C'est bizarre ça ne change rien. Et pourtant le bouton marche sur d'autres articles :/

      Supprimer
    3. C'est bizarre en effet il ne fonctionne toujours pas OO

      Supprimer
    4. Je pense que c'est % qui gène ! car j'ai testé sur ton autre article footer 100% de la page et tu verras que ton lien twitter ne fonctionne pas non plus.. donc à mon avis c'est ça ...

      Supprimer
    5. Merci, je vais regarder ça ;)

      Supprimer
  2. Bonsoir,
    J'ai suivi à la lettre le tutoriel et j'ai tout vérifié, après peut être que j'ai loupé quelque chose mais je ne pense pas. Mon pied de page ainsi que ma barre de navigation n'est pas à 100%, il y a un espace blanc sur la droite et non sur la gauche donc je ne comprends pas. Peux-tu m'aider s'il te plaît. Merci d'avance. Bises

    RépondreSupprimer
    Réponses
    1. Bonjour Olivia,
      Ton en-tête et ton pied de page sont bien à 100% de largeur ;)
      Il te suffit maintenant de modifier la couleur de fond du pied de page pour qu'elle s'accorde. Ajoute :

      background-color: #FC1150;

      Au code :

      footer {
      width: 100%;
      }

      Comme ceci :

      footer {
      width: 100%;
      background-color: #FC1150;
      }

      Pour l'en-tête, tu peux vérifier que c'est bon en modifiant la couleur de fond du code :

      header {
      background-color: #ffffff; /* Couleur de fond de l'en-tête */
      margin-top: -30px; /* Espace au-dessus de l'en-tête */
      }


      Pour centrer ton image d'en-tête ajoute le code suivant avant /* Content :

      #Header1_headerimg {
      margin: 0 auto;
      }

      Supprimer
    2. Merci beaucoup
      J'ai trouvé le souci c'était le gadget Instagram qui posait problème au pied du blog, donc je l'ai placé dans la barre latérale droite.
      Merci pour ton aide.

      Supprimer
  3. Rho lala je viens de faire 3 fois la manip et j'ai toute la page et non juste l'en tête qui se met à 100%... desespéréé... :-(

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

      Supprimer
  4. Je n'utilises pas blogger mais je voulais quand même laisser un ptit mot car j'adore les images et le design de ton blog! Bravo c'est très agréable de trouver un site qui parle de technique et de code tout en étant aussi beau.

    RépondreSupprimer
  5. Super article !! En revanche, chez moi la largeur ne fait pas toute la page, et c'est pareil pour le pied de page, pourtant j'avais suivi ton tuto à la lettre... Si tu as des indications, je suis preneuse !
    Encore merci pour tout.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as une marge tout autour de ton blog, ce qui créé ces espaces blancs. Pour régler ce problème, cherche le code :

      /* Content

      Juste en-dessous tu trouveras un code commençant par :

      body {

      juste en-dessous, trouve la ligne qui commence par :

      padding:

      Et remplace là par :

      padding: 0;

      Et voilà ;)

      Supprimer
    2. Bonjour à toi,
      Super, ça fonctionne !

      Merci infiniment, cela faisait un moment que je me battais avec ça...

      Je trouve ça vraiment gentil que tu prennes le temps de répondre quand on a un souci avec notre blog...

      Alors encore merci :)

      Belle journée à toi

      Supprimer
  6. Bonjour Catherine,

    Merci pour tous ces tutos... Une petite question : j'ai bien mon menu tout en haut, de la largeur de la page, mais je n'arrive pas à centrer les liens pour que ça ne soit pas complètement collé à gauche.

    Pouvez-vous m'aider ?

    Très belle journée
    Armelle

    RépondreSupprimer
    Réponses
    1. Bonjour Armelle,

      Remplace ce code :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Calibri;
      font-size: 16px;
      font-style: normal;
      text-decoration: none;
      color: #ffffff;
      margin-right: 70px;
      }

      Par :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Calibri;
      font-size: 16px;
      font-style: normal;
      text-decoration: none;
      color: #ffffff;
      margin-right: 35px;
      margin-left: 35px;
      }

      Et voilà ;)

      Supprimer
    2. bonjour !
      je suis desolée mais je ne trouve pas du tout la ligne
      /* Police et Couleur des Liens */
      quand je vais dans modifier le code html !

      pourriez-vous m'aider svp ?
      merci beaucoup !

      Supprimer
    3. Bonjour Oustiner,
      Sur quel blog rencontres-tu le problème ? As-tu bien ajouté les codes CSS dans le code de ton thème ?

      Supprimer
  7. Bonjour, super article malheureusement mon en-tête se cale bien à gauche mais pas à droite ... je sais pas trop ce qui bug ! Merci pour ton blog qui est top en tous cas :)

    RépondreSupprimer
    Réponses
    1. Ça doit venir de ton image, ajoute ce code :

      #Header1_headerimg {
      margin: 0 auto;
      }

      Avant la ligne :

      /* Content

      Supprimer
  8. Tuto très clair... mais ça ne fonctionne pas chez moi :-(

    RépondreSupprimer
    Réponses
    1. Bonjour Morwenna,
      Ça a bien fonctionné sur ton blog, c'est ton image d'en-tête (ta bannière) qui est trop petite et qui ne vas pas jusqu'aux bords de l'écran ;)

      Pour voir que ça à bien fonctionné tu peux changer la couleur de fond de l'en-tête avec ce code :

      header {
      background-color: #FE849B;
      }

      A coller juste au-dessus de la ligne suivante :

      /* Content

      Et à supprimer une fois que tu as vu la différence ;)

      Supprimer
  9. Bonjour,
    Tout d'abord merci pour ton blog qui explique très simplement les choses.
    J'ai suivi tes modifs pour mettre l'en-tête et la barre de nav à 100% mais le tout reste aligné à gauche !!

    Par ailleurs, je n'arrive pas supprimer le cadre noir transparent en fond des articles et de la barre latérale. Peux-tu m'aider ?

    Bonne journée

    TOM

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

      Supprimer
    2. http://yenamarreonsecasse.blogspot.fr/
      Merci

      Supprimer
    3. C'est bon, j'ai trouvé en relisant tous les commentaires !! J'en ai profité pour refaire mon menu déroulant. Prochain chantier : ancrer la barre de navigation et peut-être la mettre en haut de la page. Merci beaucoup

      TOM
      www.yenamarreonsecasse.fr

      Supprimer
  10. Bonjour ! Merci pour ce tutoriel ! :)

    J'ai simplement un problème avec ma barre de navigation qui n'apparaît pas au centre de mon blog.. Je ne sais pas d'où vient le problème.. :/ Je te met le lien pour que tu puisses voir : http://ditzpullip.blogspot.fr/

    Merci d'avance ! ;)

    RépondreSupprimer
    Réponses
    1. Bonjour May M,
      Il n'y a aucun problème au niveau de ton code. Ton menu est bien centré. Il ne semble pas centré à cause d'un effet d'optique dû au contenu de ton article ;)

      Supprimer
  11. Salut !
    Chouette tuto !
    Est-ce que tu saurai s'il est possible de mettre plusieurs éléments (par exemples des images), côte à côte dans le bloc menu ? et si oui, comment ?

    Merci d'avance, et bonne soirée !

    RépondreSupprimer
  12. Bonjour,

    Merci pour tes tutoriels :) je me lance dans l'aventure de créer un blog et grâce à toi je commence à avoir un jolie design.

    Patricia

    RépondreSupprimer
  13. Bonjour Catherine,
    Vraiment supers tes tutos. J'ai pas mal galéré avec celui là car je voulais 2 barres de navigation (voir http://yenamarreonsecasse.blogspot.fr/) mais c'est presque fini.
    Sur ton modèle, j'ai créé 2 CSS pour chaque barre (dans /*barre_sup et /* Tabs) et il y a des choses curieuses qui se passe : si je change le letter-spacing sur l'un, ça le modifie sur l'autre !!!

    Si à l'occasion, tu veux nous donner l'astuce pour faire un menu gauche et un menu droite comme sur ton blog, ce serait cool...

    Merci encore,

    TOM

    RépondreSupprimer
  14. bonjour,

    j'ai suivi ce que tu as mais je ne trouve pas dans mon code html rien ne se surligne :/

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie,
      Cela vient de ton thème qui est différent de celui sur lequel je me suis basée.
      Pour modifier la largeur de ton en-tête à 100%, il te suffit d'ajouter avant la ligne :

      /* Content

      Ce code :

      .header-inner {
      padding: 27px 0 27px;
      min-width: 100% !important;
      background-color: #FFC9C9; /* Couleur de fond de ton en-tête */
      text-align: center;
      }

      Tu peux modifier la couleur de fond de ton en-tête en changeant le code couleur par ce que tu souhaites. code-couleur.com est un site utile pour trouver le code d'une couleur ;)

      Supprimer
  15. Je viens de découvrir ton blog et il est vraiment génial !! Moi qui n'y connait rien en codage informatique j'ai pu faire les premières modifications de mon futur blog !!!
    J'ai suivi tes instructions pour faire en sorte que la barre du menu soit à 100% de la largeur de la page mais il reste un espace de chaque côté. Je n'ai pas réussi à modifier. Aurais-tu une idée pour modifier ça ?

    Mille fois mercis !

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      Peux-tu me donner le lien vers ton blog pour que je puisse voir le problème ? Car cela peut être dû à plusieurs choses :)

      Supprimer
    2. Mon blog c'est lesdecouvertesdanais.blogspot.fr

      Supprimer
    3. Bonjour Anaïs,

      Rajoute ce code dans ton thème, après les codes CSS de ton menu :

      .region-inner.tabs-inner {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      }

      Ça devrait forcer le menu à faire 100% de la page ;)

      Supprimer
    4. Merci beaucoup Catherine c'est parfait !! Ton blog est vraiment d'une aide précieuse !

      Supprimer
    5. Salut,
      juste pour dire que j'ai suivi le tuto, et que j'ai eu ce soucis (impossible de mettre la barre de menu à 100%, et ça:
      .region-inner.tabs-inner {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      }

      m'a débloqué, merci!

      Supprimer
  16. Merci !!!!
    Je suis tomber sur ton blog en cherchant de l'aide et j'ai tout trouvé :D
    Je continue ma navigation !

    Aurore x.

    RépondreSupprimer
  17. Je viens de tomber sur ton blog par hasard. Il me tarde d'être chez moi pour commencer à appliquer tes conseils.

    RépondreSupprimer
  18. Bonjour, merci pour le tuto !
    J'ai un problème cependant, dans mise en page, la section articles a disparue et ma colonne de widgets qui est sensée être à droite s'est collée à gauche. Sur le blog, aucun impact mais c'est embêtant car je ne peux plus modifier la section articles du coup !

    RépondreSupprimer
    Réponses
    1. Essaye de déplacer tes gadgets dans la partie Mise en Page. Cela arrive parfois. Il suffit de forcer Blogger à afficher toutes les sections dans la vue Mise en Page en déplaçant (une ou plusieurs fois) les gadgets.

      Supprimer
  19. Bonsoir,

    Désolé encore pour le dérangement mais, lorsque je dézoom ou lorsque la taille de l'écran est de taille différente du miens, l'image de mon en-tête n'est pas fixe, elle se décale. J'ai beau revoir mon code CCS et cliquer sur "ajuster à la page" lorsque je mets mon image. Comment cela se fait-il ? :/

    Voici le lien de mon blog: http://shadowinwonderland.blogspot.fr/

    Encore une fois merci pour tout ça, ce blog est une vraie mine d'or :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est normal, ton en-tête n'est pas centré mais aligné sur la gauche de l'écran.
      Pour centrer ton en-tête ajoute le code CSS suivant :

      #Header1_headerimg {
      margin: 0 auto;
      }

      Au-dessus du code suivant :

      ]]>

      Supprimer
  20. Coucou Catherine !

    Tout d'abord, on te dit 1000 mercis !!!! Grâce à tous tes tutos, on a réussi à personnaliser notre blog et à en faire une plateforme beaucoup plus jolie ! Alors merci merci merci !
    Mais... On doit avouer que sur ce coup, on est perdues (on est vraiment des looseuses), notre image d'en-tête refuse de bien se mettre, elle est beaucoup plus petite qu'elle n'est censée à la base (on la faite sur photoshop donc elle est en très très bonne qualité normalement, et de taille parfaite). Pourtant quand on la met elle devient soit minuscule (comme maintenant) ou soit totalement floue. Tu crois que tu pourrais nous aider ?! (Pitié nous dit pas qu'on est vraiment trop bizarres et que y a qu'à nous que ça arrive ;))

    Encore merci pour tout, vraiment ton blog est juste parfait !
    Bises, ♡
    - Claire & Charlotte
    http://ohbahcaalors.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Claire & Charlotte,
      Essayez de coller les calques de votre logo sur un nouveau fichier qui fait 1230 pixels de large (maximum). C'est la largeur de votre blog. Actuellement, votre logo fait 1600 pixels de large, et est donc plus grand que la largeur de votre blog.

      Ensuite, ajoutez les lignes suivantes :

      height: auto !important;
      width: auto !important;

      Avant le signe } du code suivant :

      #Header1_headerimg {
      margin: 0 auto;
      }

      Comme ceci :

      #Header1_headerimg {
      margin: 0 auto;
      height: auto !important;
      width: auto !important;
      }

      Et voilà ;)

      Supprimer
    2. Oulah on est longues à la détente, on avait absolument pas vu que tu nous avais répondu !
      D’ailleurs, merci beaucoup beaucoup ! C’est adorable de ta part de prendre le temps de répondre à tout le monde, et de trouver des solutions ! Alors, encore merci !
      C’est parfait, grâce à toi ça refonctionne, et le blog ressemble un peu plus à quelques choses déjà .. ;)
      Allez encore une dernière fois, merci :)

      Supprimer
  21. Coucou ma belle ! Merci pour tout ces tutoriels, ils sont vraiment super :)
    Cela dit, j'ai un petit soucis, je n'arrive vraiment pas à mettre mon pied de page à 100% de largueur.
    Voici mon blog, si tu veux y jeter un coup d'oeil ! Gros bisous
    http://unblogunemerveillee.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Ton pied de page est bien à 100% de largeur. La bordure que tu vois au-dessus du pied de page n'est pas appliqué à l'ensemble du pied de page mais à un contenant à l'intérieur, c'est pour cela qu'il ne semble pas être à 100% de largeur.

      Pour supprimer la bordure du contenant et l'appliquer au pied de page en entier, ajoutes avant la ligne :

      ]]>

      Les codes CSS suivants :

      .footer-outer {
      border: none !important;
      }

      footer {
      border: 1px dashed #bbbbbb;
      }

      Tu peux aussi supprimer cette bordure en n'ajoutant que le premier code ci-dessus, et pas le 2e ;)

      Supprimer
  22. Bonjour,
    Voilà, quand je met une image, pour mon header, elle se met pas entièrement sur les cotes, elle est couper, et on voit comme de la marge sur les cotes. J'ai essayer avec plusieurs image, et ca fait toujours pareil.

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

      Supprimer
    2. http://harummypullipworld.blogspot.com/

      Supprimer
    3. Rajoute le code suivant :

      .header-inner {
      min-width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto;
      }

      Après la ligne suivante de ton code CSS :

      /* Content

      Et voilà ;)

      Supprimer
    4. J'ai tenter mais rien n'y fait, du coup je n'ai pas laisser ce code car dela ne changeait rien du tout... Pense tu qu'il faut que je le remette tout de meme ?

      Supprimer
    5. Essaye avec les codes suivants :

      .region-inner.header-inner {
      min-width: 100% !important;
      max-width: 100% !important;
      }

      #Header1_headerimg {
      margin: 0 auto;
      min-width: 100% !important;
      max-width: 100% !important;
      }

      Supprimer
  23. Désolée de déranger, mais je n'y connais rien et je n'ai pas la ligne . En revanche j'ai <.head>, (sans le point) c'est ça que je dois modifier ? En revanche quand je surligne la ligne <.head>...<.head> par la droite comme indiqué cela me déplace et me "développe" le code (je suppose que ça l'ouvre ?) j'ai beau réessayer ça ne fonctionne pas. Une idée ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Non ne déplace surtout pas head !
      J'ai lu ton autre commentaire, et le problème doit venir de ton thème. Sans voir le code de ton thème je ne peux pas t'aider :/

      Supprimer
    2. Oui depuis je me suis renseignée et j'ai vu ma connerie ^^
      Voici le lien vers mon thême: http://www.mybloggerthemes.com/2015/09/masterpiece.html
      Cela dit si vous êtes occupée à autre chose laissez tomber, j'ai fini par adapter la bannière, c'est plus simple.

      Supprimer
  24. Juste pour te dire que tu es absolument GE-NIA-LE ! Tes tutos me permettent de faire exactement tout ce que je souhaite faire sur mon blog ! Franchement, merci mille fois ! C'est toujours hyper bien expliqué et détaillé.
    Tu es super ! Merci beaucoup pour tout !

    RépondreSupprimer
  25. Coucou, merci pour ce auto génial! Et pour tout ce que tu fais
    Cependant j'ai un petit problème, j'ai réussi à centrer l'en-tête mais impossible de centrer le menu. Je te laisse l'adresse de mon blog où cas où tu aurais un peu de temps pour y jeter un oeil: www.lamourabsolu.com

    merci encore :)

    RépondreSupprimer
    Réponses
    1. Bonjour Janna, il me semble que tu as réglé le problème ? Ton menu est centré :)

      Supprimer
  26. Merci pour ce tuto ! Par contre les bandes blanches à gauche et à droite de mon menu sont encore là malgré avoir suivie tes instructions, et le texte du menu n'est plus centré... De plus, ma bannière es toute à gauche maintenant. Sais-tu pourquoi?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour ton menu rajoute le code CSS suivant :

      #crosscol, .tabs-inner {
      margin: 0;
      padding: 0;
      }

      Ensuite pour centrer ton en-tête, rajoute :

      #Header1_headerimg {
      margin: 0 auto;
      }

      Et voilà ;)

      Supprimer
    2. Merci beaucoup, ça a marché :)

      Supprimer
    3. Oups par contre mon texte de menu n'est toujours pas centré..

      Supprimer
    4. Bonjour,
      Il me semble que le problème est réglé ? Ton menu est centré de mon côté ;)

      Supprimer
  27. Bonsoir Cath,

    J'adore ton blog qui m'est super utile pour mettre en forme mon bébé blog!! J'ai réussi à faire pas mal de choses mais là je bloque. J'essaie de mettre la photo du header à 100%, mais impossible!
    Je bloque à la première étape : quand je veux sélectionner ... IMPOSSIBLE, même si j'essaie de sélectionner de droite à gauche, ça ne me laisse pas faire et m envoie à une autre ligne, as tu une solution? De plus, j'ai l'impression que je n'ai pas réussi à retirer la bordure autour de la photo :-(

    Je pense que cela provient de ma photo mais sans certitude!!
    Voici l'adresse de mon blog : http://handiski4me.blogspot.fr/

    merci d'avance pour ton aide!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est pas simple de sélectionner le code ! Si ça saute à une autre ligne c'est que ça ouvre le code de ton en-tête à chaque fois. Malheureusement il n'y a pas vraiment de solution. Il faut simplement réessayer. Peut-être en allant un peu vite de droit à gauche.

      Supprimer
    2. Merci Catherine, je vais réessayer

      Supprimer
  28. Hello! merci pour ce tuto :D je l'ai réalisé sur mon blog : perfect-readings.blogspot.com sans trop de problèmes sauf que le rendu final n'est pas exactement comme je l'aurais espéré. C'est surtout au niveau de la barre du menu que ça ne va pas, je ne sais pas comment modifier le code pour que la barre soit centrée - parce que là c'est collé à gauche et c'est pas très joli....
    Et ensuite je ne sais pas pourquoi mon blog se décale à droite, enfin ce que je veux dire c'est que j'ai la flèche pour descendre/monter sur la page mais aussi pour aller de droite à gauche!
    Est-ce que tu peux m'aider ?
    Bisous et merci pour ta réponse!! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Tout d'abord colle les codes suivants :

      header {
      width: 100%;
      max-width: 100%;
      background-color: #fff;
      }

      img#Header1_headerimg {
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      }

      Juste avant la ligne :

      /* Tabs

      Ensuite colle le code suivant :

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

      Avant la ligne :

      /* Columns

      Supprimer
  29. Salut Catherine, je suis une grande fan de ton blog, dommage qu'on ne puisse pas s'inscrire comme membre ^^. Le design de mon blog est uniquement baser sur tes tutos et c'est une reussite, tu serrais fier de moi... et de toi ;). Tu peu y jeter un coup d'oeil http://blackvetvet.blogspot.com/ . J'ai décider aujourd'hui de déplacer mon header vers le haut, j'ai donc suivis ton tuto et tous c'est super bien passer, ils sont telement faciles à comprendre, même par moi ^^. Mais j'aimerais savoir comment je peu ajouter de l'espace entre mon header et le corps du bog, un peu comme le tiens, parce qu'en se moment sa fait trop "tête". j'ai essayer de plusier façon à ma connaissance mais rien, s'il y a de l'espace sa reste blanc comme couleur de font. Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Remplace ce code :

      #header-inner img {
      margin:auto;
      }

      Par :

      #header-inner img {
      margin-left: auto;
      margin-right: auto;
      margin-top: 40px; /* Espace au-dessus de l'en-tête */
      margin-bottom: 40px; /* Espace en-dessous de l'en-tête */
      }

      Remplace les valeurs de 40px par ce que tu souhaites ;)

      Supprimer
    2. C'est pareil, l'espace entre l'en tête reste de couleur blanche...

      Supprimer
    3. Autant pour moi j'avais mal compris ! ^^
      Ajoute le code suivant :

      margin-bottom: 30px; /* Espace entre l'en-tête et le corps du blog */

      Avant le signe } du code :

      header {
      background-color: #FBFBFB; /* Couleur de fond de l'en-tête */
      margin-top: -30px; /* Espace au-dessus de l'en-tête */
      }

      Comme ceci :

      header {
      background-color: #FBFBFB; /* Couleur de fond de l'en-tête */
      margin-top: -30px; /* Espace au-dessus de l'en-tête */
      margin-bottom: 30px; /* Espace entre l'en-tête et le corps du blog */
      }

      Supprimer
  30. Bonjour,

    Merci en tout cas pour tous ces superbes tutoriels que tu nous fais partager !!!
    J'ai un petit soucis avec mon blog, je suis completement novice et suis attentivement tes tutos mais là je coince... J'ai une marge blanche a droite et a gauche de mon menu ??? j'ai essayer ce que tu disais en commentaire en plus mais rien y fait ... Peux tu m'aider ??

    merci beaucoup :)
    A bientot.

    RépondreSupprimer
    Réponses
    1. Bonjour Flora,
      Essaye de rajouter le code suivant :

      #crosscol, .tabs-inner {
      margin: 0 !important;
      padding: 0 !important;
      }

      Supprimer
  31. Bonjour, étant nouvelle sur blogger (c'est mon premier blog) j'ai decouvert ton blog grâce a une amie. Cela fais 1 semaine que je souhaite réaliser ce tuto mais rien a faire, rien ne bouge !
    mon blog : http://mylitllebeauty.blogspot.fr/
    En espérant que tu puisses m'aider, merci d'avance
    Bisouuus

    RépondreSupprimer
    Réponses
    1. Bonjour Mylène,
      Ton en-tête est bien à 100% de la page, c'est le fond qui donne l'impression qu'il ne l'est pas.
      Pour s'en assurer tu peux modifier la couleur du fond de ton en-tête. Rajoute le code suivant :

      header {
      background: #ffffff;
      }

      Avant la ligne suivante :

      /* Content

      Tu peux changer la couleur de fond de ton en-tête (#ffffff) par le code de la couleur de ton choix. Code-couleur.com est un site utile pour trouver les codes de couleurs ;)

      Supprimer
    2. Ca a marcher merci beaucoup !
      Maintenant mon problème est que le fond reste bleu même si je change le code couleur :(
      http://mylitllebeauty.blogspot.fr/

      Supprimer
    3. Bonjour Mylène,
      Tu as 2 codes qui commencent par :

      header {

      Ces 2 codes ont une ligne qui défini la couleur de fond. Du coup elles entrent en conflit.
      Le dernier code l'emporte sur le premier. Supprime un de ces 2 codes et tu pourras modifier la couleur de fond sans problème ;)

      Supprimer
  32. Bonjour,
    Déjà mille mercis pour tous ces tutos ! Ils sont géniaux !
    Je viens juste de commencer la création de mon blog et j'ai un peu de mal.
    J'ai réussi à faire mon entête en transparence mais je voudrais qu'elle soit plus large, que mes premiers articles commencent plus bas, pourrais tu m'aider sur la démarche à suivre ?
    J'ai aussi un problème avec cette écriture tout moche et pas centré... et dernière chose, est- ce que c'est possible d'insérer une bannière à la place du titre ou une image ?

    Merci mille fois !

    RépondreSupprimer
    Réponses
    1. Bonjour Célia,
      Tu peux tout à fait remplacer ton titre par une image. Il suffit d'aller dans "Mise en Page", clique sur "Modifier" sur le gadget "Header". A "Image" tu peux choisir une image de ton ordinateur ou d'internet. Si tu veux remplacer le titre par l'image, coche "Substituer le titre et la description".

      Souhaites-tu augmenter l'espace autour de ton titre ? Ou ajouter un espace entre ton menu et tes articles ?

      Supprimer
  33. Bonjour

    Merci pour ce tutoriel !

    J'ai appliqué les codes à mon modèle, mais impossible de centrer mon " header "
    Connaissez-vous une solution à cela ?

    Merci :)

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

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

      Supprimer
  35. Coucou Cath ! J'ai un soucis ! après avoir séparé le header, je me retrouve avec un espace enorme audessus du titre de l'artcle. Voici le link ( fait pas attention si c'est en englais ) : afrohaircareaddict.blogspot.com . Regarde juste audessus de la date du premier article qui s'affiche, c'est cet espace blanc qui me gène un peu. Je ne sais pas comment il est venu là. Bisou

    RépondreSupprimer
  36. Bonjour,

    Retrouve cette ligne :

    /* Columns

    Juste en-dessous de cette ligne tu trouveras ce code CSS :

    .main-outer {
    border-top: 0 solid #ffffff;
    margin-top: 60px;
    }

    Remplace 60px par 0px comme ceci :

    .main-outer {
    border-top: 0 solid #ffffff;
    margin-top: 0px;
    }

    Cela supprimera l'espace blanc au-dessus du contenu de ton blog :)

    Tu peux également remplacer 0 par un numéro entre 0 et 60 si souhaites ajouter un peu d'espace tout de même ;)

    RépondreSupprimer
  37. Bonjour,

    Merci beaucoup pour ce tuto tout d'abord ! :) Par contre, j'ai un petit problème : j'ai beaucoup de mal à surligner le code (ça s'ouvre toujours dès que j'arrive aux pointillets) et les rares fois où j'y parviens et que je le colle dans un document, ça me colle un très long code ! oO ! Pas juste la ligne voulue ! Je ne comprends pas pourquoi :( ! Merci d'avance !

    PS : J'aurais également voulu savoir comment faire pour insérer un nouveau gadget entre la nav barre et l'en tête par exemple pour mettre une ligne d'image :( ? Merci d'avance et bonne soirée ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Mathie',
      C'est normal qu'en collant le code tu obtiennent un long code. En le collant dans un document il est "ouvert".

      Pour le gadget supplémentaire cherche ce code dans ton code HTML :

      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>

      Remplace no par yes comme ceci :

      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='yes'>

      Tu pourras alors ajouter des gadgets à la partie Header ;)

      Supprimer
  38. Bonjour,

    Tout d'abord je voudrais dire merci parce que les tutus m'aident beaucoup. En revanche celui là ne fonctionne pas, j'ai vérifié deux fois, je ne comprends pas ...
    Voici l'adresse de mon blog http://lydietendances.blogspot.fr

    Merci d'avance

    Lydie

    RépondreSupprimer
    Réponses
    1. Bonjour Lydie,
      Effectivement ton en-tête est toujours dans le contenant. Es-tu sûre d'avoir bien coupé et collé le code HTML de ton en-tête au-dessus de la ligne :

      <div class="content-outer">

      Supprimer
  39. Merci pour ce super tuto! :D
    Par contre, tout petit problème: J'ai un espace entre mon header et le cors de mon article. Je l'ai depuis que j'ai entré les codes pour fixer mon menu en haut, je pensais que ça le ferait sauter de mettre le header en haut mais même pas. Comment fait-on pour l'enlever? :/
    J'ai voulu changer la couleur des titres de mes articles aussi et même en tapant color: ou font-color: avec !important, ça ne veut pas... Je pense du coups que c'est un code à part entière qu'il faut entrer, mais dans ce cas j'ignore lequel. Pourrais-tu me dire comment faire?

    RépondreSupprimer
    Réponses
    1. Bonjour Arlénone Snow,
      Pour supprimer l'espace sous ton en-tête tu peux utiliser les instructions de la partie "Rectifier l'espace au-dessus de l'en-tête" de ce tutoriel, en remplaçant :

      margin-top: -30px; /* Espace au-dessus de l'en-tête */

      Par :

      margin-bottom: -30px; /* Espace en-dessous de l'en-tête */


      Les titres des articles sont aussi des liens, il faut donc définir la couleur des titres sur les pages d'index (Accueil, recherche, etc.) avec ces codes CSS :

      /* Liens des Titres des articles */
      h3.post-title.entry-title a {
      color: #000000; /* Couleur des titres des articles */
      }

      /* Liens des Titres des articles au survol de la souris */
      h3.post-title.entry-title a:hover {
      color: #000000; /* Couleur des titres des articles */
      }

      Supprimer
  40. Bonjour,

    Merci pour ce tutoriel. Cependant, ma barre de navigation ne s'étend pas à 100% de la page. L'adresse du blog dont je parle est http://raspberrylipstick5.blogspot.be/. Auriez-vous une idée de comment résoudre le problème? J'ai bien suivis étape par étape de vos tutoriels pour la barre de navigation pourtant.

    Merci d'avance,
    Antoine Soetewey

    RépondreSupprimer
    Réponses
    1. Bonjour Antoine,
      Retrouve ce code CSS :

      #crosscol, .tabs-inner {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      Rajoute ces lignes :

      width: 100% !important;
      max-width: 100% !important;

      Avant la ligne } comme ceci :

      #crosscol, .tabs-inner {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      }

      Supprimer
  41. Bonjour,
    Je viens de découvrir ton blog, il est vraiment top ! merci pour tous ces tutos.
    Par contre, je viens de refaire ce tuto 2 fois et on dirait que rien ne change dans le placement de mon header... je ne comprends pas ou ca cloche... Pourrais-tu m'aider ? L'adresse de mon blog est http://frommtl-withlove.blogspot.ca/
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois que ton code pour l'en-tête est collé juste après la ligne :

      <div class='content-outer'>

      Il faut le coller avant cette ligne et non après ;)

      Supprimer
  42. Bonjour Catherine ! Une nouvelle fois merci pour tes tutos qui nous sauve la vie (et le blog..) !
    J'ai un petit problème de pas grand chose mais qui me rend folle.. J'ai déplacé mon header, tout fonctionne SAUF la couleur du background. J'aimerai qu'il soit totalement blanc (donc je tape #FFFFFF) et quand je vais sur mon blog, il est légèrement gris et dénote de mon image..
    J'ai essayé de parcourir mon code à la recherche d'une solution, mais impossible de savoir quoi modifier ! Peux tu me venir en aide ?
    (L'adresse de mon blog : http://cats-can-read.blogspot.fr/ )

    RépondreSupprimer
  43. En fait, c'est bon, j'ai réglé le problème toute seule ! :)

    RépondreSupprimer
  44. Coucou ! J'ai suivi tes conseils à la lettre mais impossible de le mettre vraiment à 100%, je te laisse voir par toi-même : http://lesouffledesmots.blogspot.fr/
    (tu peux constater que mon blog est rempli de choses grâce à tes astuces, je t'en remercie grandement, merci merci !!)
    J'ignore si tu trouveras une solution mais merci d'avance de ton aide :)

    RépondreSupprimer
    Réponses
    1. Bonjour Aurdrey,
      Déplace la partie Header et Tabs-outer au-dessus de la ligne :

      <div class='content'>

      Supprimer
  45. Coucou ! Chez moi ça ne me semble pas marcher du tout :/ ni pour l'en tête , ni pour le menu ...
    En fouillant dans les commentaires j'ai vu qu'il pouvait y avoir un soucis avec le " padding " que j'ai remplacé par ce que tu disais , mais çe ne change rien ...
    & du coup , tout ce qui résulte de cette affaire c'est que mon menu se retrouve au dessus de mon en tête alors que c'était pas du tout ce que ej voulais XD ( enfin , à therme c'est ce que je veux , mais pas dans ces conditions >.< ) & je n'arrive pas à retrouver les codes pour les inverser >.<

    Aurais tu une solution ?

    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Anabelle,
      Ton en-tête et ton menu sont bien à 100% de largeur de la page. Pour vérifier change la couleur de fond de ton en-tête et de ton menu :

      /* Test en-tête et menu à 100% */
      .header-outer, .tabs-outer {
      background: #A9DDDD !important;
      }

      Attention à bien supprimer ce code une fois que tu as fini ;)

      Supprimer
    2. Ah oui en effet !
      Mais screugneugneu par contre ... parce que du coup , ce que j'aurais voulu faire c'est passer ma navbar en haut ( & la fixer en haut du blog , comme tu nous propose de le faire avec un tuto ) , mais si je change la teinte du fond de la navbar elle va pas à 100% de la page >.<

      Tu vois ce que je veux dire ?

      Bon je crois qu'au final je vais lâcher l'affaire & laisser ma navbar comme elle est x)

      Supprimer
    3. Si tu veux fixer ton menu en haut du blog il suffit de suivre ce tutoriel : http://ladybirdr.blogspot.com/2014/12/fixer-la-barre-de-navigation-en-haut-du.html
      Pas besoin de déplacer manuellement le code HTML ;)

      Supprimer
    4. Ouai mais la barre est pas à 100% du coup , & c'est trop moche :(

      Supprimer
    5. Comme tu as ton diaporama dans la même partie que ton menu, il faut utiliser ce code CSS pour fixer le menu en haut du blog et à 100% de largeur ;)

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Et voilà ;)

      Supprimer
  46. Bonjour!
    Cet article est vraiment utile mais je rencontre quelques difficultés.... mon menu se centre à gauche et l'image ne me semble pas au centre... mon url est: http://julafille.blogspot.jp/
    Merci d'avance,
    Ju

    RépondreSupprimer
    Réponses
    1. Bonjour Ju,
      Pour ton image d'en-tête, elle dépasse de la zone de l'en-tête c'est pour cela qu'elle ne semble pas centrée.

      Ajoutes ces codes CSS :

      #HTML8, #HTML8 a {
      margin: 0 !important;
      }

      #HTML8 img {
      max-width: 100%;
      height: auto;
      }

      Dans Modifier le code HTML, au-dessus de la ligne :

      /* Content


      Pour centrer ton menu commence par changer la couleur de fond pour du blanc et centre le texte avec ces lignes :

      background: #ffffff;
      text-align: center;

      Ajoute ces 2 lignes avant le signe } du code :

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

      Comme ceci :

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

      Et voilà ;)

      Supprimer
    2. Wahou ta réponse fut aussi rapide qu'efficace! tous mes problèmes sont réglés, merci beaucoup!

      Supprimer
  47. Bonsoir ! Tout d'abord je souhaite te remercier car ton blog m'a été d'une très grande utilité sur certains aspects de la personnalisation de mon blog...
    Seulement je rencontre quelques difficultés quant à ma barre de navigation :

    Quand je veux la fixer en haut du blog, une partie du menu s'efface... Je n'arrive pas à savoir d'où ça vient, peut-être saurais-tu voir où se trouve le problème ?

    Merci par avance !

    http://www.ladyparisian.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Mélody,
      La couleur de fond de ton menu est transparente. Quand tu la déplaces en haut du blog cela se voit car on voit les articles apparaître au milieu du menu en descendant la page.
      Il suffit de rajouter un ligne pour définir la couleur de fond du menu en blanc.

      Colle ce code CSS :

      .tabs-outer {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
      width: 100%;
      background: #fff;
      }

      Avant la ligne :

      /* Content

      Ensuite pour rectifier les espaces de chaque côté du menu ajoute ces codes .region-inner.tabs-inner {
      padding: 0;
      }

      .tabs.section {
      margin: 0;
      }

      A la suite du précédent (toujours avant /* Content).

      Pour finir, ton menu déroulant est toujours visibles (même maintenant) pour rectifier cela, ajoute ces codes :

      #barre_nav li ul {
      display: none !important;
      }

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

      A la suite des précédents ;)

      Supprimer
  48. Bonjour Catherine
    Petit problème à nouveau, j'ai bien fais les choses pour le header et le menu... mais maintenant les articles sont hyper collés au menu ce qui fait qu'il n'y a plus d'espace libre entre les deux...
    De plus je veux que ma photo prenne donc 100% de la largeur et quand j'essaie de la recharger ca me la diminue à 600 pixels (encore plus petit que ce qu'elle était avant...)

    Merci beaucoup par avance pour ton aide précieuse !

    http://accornovotel.blogspot.fr (c'est un projet pour les cours...)

    RépondreSupprimer
    Réponses
    1. Bonjour Marvin,
      Je vois que tu as téléchargé un thème Blogger Templates, du coup je suppose que le problème est réglé ?

      Supprimer
  49. Bonjour Catherine ! Tout d'abord, merci pour tout ces super tuto' ! Je ne me sers que de ça pour améliorer mon blog. J'ai suivi celui-ci aujourd'hui pour que mon en-tête et mon menu soit à 100%, mais ça ne fonctionne pas... Pour l'en-tête, si, il n'y a aucun soucis ! Par contre pour le menu, j'ai toujours deux bandes blanches de chaque côté. Cela dit, lorsque je prévisualise après avoir fait mes changements, elles ne s'affichent pas. (Pourtant si, si, j'enregistre bien !) Mais à chaque fois que je vais sur le blog, il y a toujours ces deux bandes blanches. Grrr ! J'ai essayé quelques petites manips' que tu conseillais dans les commentaires, mais rien n'y fait ! Si tu as une solution, je suis preneuse. ;)
    Merci encore pour tout ce que tu fais !

    (http://ludeely-etc.blogspot.fr)

    RépondreSupprimer
    Réponses
    1. Bonjour Ludiveen,
      Retrouve ce code CSS :

      div#barre_nav {
      margin: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      }

      Et rajoute le code pour changer la couleur de fond avant le signe } :

      background: #ffe4e1;

      Comme ceci :

      div#barre_nav {
      margin: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      background: #ffe4e1;
      }

      Et voilà ;)

      Supprimer
  50. Coucou! Tout d'abord merci pour tes tuto ils sont vraiment top! Je suis entrain de créer mon blog (il est hors ligne pour l'instant je veux qu'il soit parfait :)), impossible pour moi d'élargir la barre de navigation à 100% de la page?? Est ce le bon tutoriel? Je n'y arrive vraiment pas! :/ Merci d'avance pour ta réponse

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ce tutoriel permet de sortir l'en-tête et la partie contenant le menu, en dehors du contenant du blog. Une fois que cela est fait, il se peut que tu ais à régler quelques détails. Essaye d'ajouter les codes CSS suivants pour supprimer d'éventuels espaces à gauche et à droite du contenant de ton menu :

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

      .tabs.section {
      margin: 0;
      }

      Colle ces codes avant la ligne :

      ]]></b:skin>

      Supprimer
  51. Bonjour,

    Merci pour ce tutoriel que j'ai réalisé cependant un petit souci... Que ce soit pour l'en-tête, le menu et le pied de page j'ai des espaces sur le côté, comme si je n'étais pas à 100%...

    Pour le lien : www.resolument-rh.blogspot.com

    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Benjamin,
      Le problème vient d'une marge à gauche et à droite de l'ensemble de ton blog.
      Tu peux retirer cette marge en ajoutant le code CSS suivant :

      body {
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
    2. De plus, pour régler le petit problème de marge de ton menu, rajoutes les codes CSS à la suite de celui que ej te donne plus haut :

      .tabs-inner .tabs {
      margin: 0 !important;
      }

      Supprimer
    3. Impeccable ! Merci beaucoup !

      Plus qu'à trouver un moyen de supprimer l'effet d'ombre entre les barres latérales gauche/droite et le corps des articles et de la sidebar est ce sera parfait^^

      Encore merci !

      Supprimer
  52. Bonsoir,
    J'ai suivi ton tuto et j'ai bien obtenu une barre de navigation à 100% de la largeur de la âge et fixée tout en haut du blog.
    Ma question : Est-il possible de créer une seconde barre de navigation que je placerai juste au-dessus des articles, avec une largeur équivalente au cadran? je ne sais pas si j'ai été claire...
    En tout cas, voici l'adresse du blog : http://laboecolo.blogspot.com/
    Merci d'avance!!

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Oui c'est tout à fait possible. Il suffit de créer un nouveau menu comme tu as fat pour le premier, mais en remplaçant le nom de ton menu.
      Dans le code HTML il faut simplement modifier le mot dans le premier code :

      <div id="barre_nav">

      Ce qui devient :

      <div id="second-menu">

      Pour les codes CSS il faut remplacer tous les #barre_nav par #second-menu et voilà ;)

      Supprimer
  53. Bonjour, je voudrais centrer ma bannière mais impossible de le faire et j'ai essayé la manip pour mettre l'en-tête à 100% mais impossible d'arriver à sélectionner ... car ça s'ouvre et même si tu dis que ce n'est pas grave je continue tes indications mais ça ne marche pas. Est-ce que tu pourrais m'aider ? :(
    Voilà mon blog http://flyingtothewords.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Andréa,
      Ton menu et ton en-tête sont bien à 100% de largeur ;)
      Le problème vient du contenu à l'intérieur. Il y a une marge autour de la zone de ton menu et du gadget sous le menu.
      Tu peux supprimer cette marge avec ce code CSS :

      .region-inner.tabs-inner {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      text-align: center;
      }

      Ensuite il te faudra centrer les liens de ton menu avec ce code CSS :

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

      Colle ces 2 codes CSS avant la ligne suivante de ton code :

      ]]></b:skin>

      Supprimer
  54. Bonjour,

    Merci pour ce tutoriel, j'ai suivi toutes vos recommandations cependant lorsque je place mon en tête, il reste deux parties grises sur les côtés. Comment faire pour les retirer ? :/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient d'une marge à gauche et à droite de l'ensemble de ton blog.
      Tu peux retirer cette marge en ajoutant le code CSS suivant :

      body {
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  55. Bonjour Catherine,

    Encore une fois merci pour ton tuto ! Malheureusement, je n'arrive toujours pas à diminuer l'espace entre l'en-tête et mes vignettes ..

    Il reste toujours grand, même en modifiant ce champ:
    margin-bottom: 30px; /* Espace entre l'en-tête et le corps du blog */

    Est-ce dû à la petite ligne que j'ai rajoutée entre les deux ?
    D'avance un grand merci ! (http://melaniebriee.blogspot.fr/)

    Et pour info: mon dernier problème sur l'agrandissement des vignettes est résolu :)

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie,
      Colle les codes CSS suivants :

      .main-outer {
      margin-top: 0px !important; /* Espace entre articles et en-tête */
      }

      .main-inner {
      padding-top: 0 !important;
      }

      Avant la ligne :

      ]]></b:skin>

      Modifie la valeur à la ligne :

      margin-top: 0px !important; /* Espace entre articles et en-tête */

      Pour celle qui te convient ;)

      Supprimer
  56. Bonjour!
    Merci mille fois pour tous ces tutoriels, cela me permet de créer mon blog petit à petit comme je le souhaite!

    Je rencontre un léger souci. Je ne veux pas modifier mon en tête à 100% de la page mais j'aimerais faire monter celui-ci tout en haut de la page et donc supprimer l'écart bleu que l'on voit au dessus de l'en tête.
    Pour cela j'ai suivi ton instruction et j'ai ajouté le code header {
    background-color: #FBFBFB; /* Couleur de fond de l'en-tête */
    margin-top: -30px; /* Espace au-dessus de l'en-tête */
    }
    J'ai beau modifier la valeur en pixel rien ne bouge ! Je me demande quel est le code qui bloque, ou bien quelle est mon erreur :/ J'ai tout réussi jusqu'ici mais là je cale !
    MErci d'avance pour ton aide précieuse!
    http://corginpug.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cet espace ne vient pas de ton en-tête, mais du contenant de ton blog. C'est donc normal que ce code ne fonctionne pas ;)
      Utilise le code CSS suivant :

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

      Supprimer
  57. Bonjour Catherine,
    J'ai encore un problème... Je n'arrive pas à mettre mon image à 100% de l'en-tête et j'ai deux barres blanches à côté, puis un contour gris tout autour... je ne sais pas comment faire.
    Merci d'avance!
    http://Gwylind.blogspot.com

    RépondreSupprimer
  58. Bonsoir Catherine

    Merci beaucoup ça a bien fonctionné c'est vraiment top ! :)

    Encore merci pour tes tutos, super utiles

    RépondreSupprimer
  59. Bonjour Catherine merci pour tous vos tutoriels, cependant j'aimerais vous poser une question.Bon malheureusement il existe des template sans header !!!! Est ce que vous avez une solution pour ça ! càd est qu'on peut écrire le code html de header?

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

      Supprimer
  60. J'ai tout fait à la lettre mais ça ne va pas du tout ! :(

    Mon blog : http://elodiebooks.blogspot.fr j'ai des espaces partout..

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      C'est normal que tu ais des espaces autour de ton en-tête car ton image d'en-tête est petite par rapport à la largeur de la fenêtre. Il faut soit utiliser une image de fond que tu peux répéter comme un motif, ou alors utiliser une image plus simple avec un fond uni (blanc ou de couleur).

      Supprimer
    2. Oui je sais pour la photo c'est moi qui ai fait une mauvaise manipulation j'ai contacter une graphiste pour qu'elle me fasse une nouvelle bannière. Mais merci pour ce conseil que je garde de côté au cas où comme ça je n'aurais plus à courir partout après un pro de la bannière qui demande mille et une conditions.
      Je parle du menu moi.. il est pas bien mis.. là ça ne se vois pas parce que j'ai enlever la couleur de fond pour minimiser les dégâts et que le menu se fonde avec le fond du blog mais il est mal mis et ne fait pas la largeur du blog (de la colonne gauche à droite) :(...

      Supprimer
    3. Oh j'ai complètement oublié en parlant de bannière, saurais-tu les dimensions d'une bannière blogger ? Car je ne trouve ça nul part..

      Supprimer
    4. Bonjour Elodie,
      Il n'y a pas de dimension de bannière, surtout si ton en-tête fait 100% de la page car elle s'adapte en fonction de la largeur de la fenêtre de navigation.

      Pour ce qui est de ton menu, tu peux simplement centrer tes liens en ajoutant :

      text-align: center;

      Avant le signe } du code CSS :

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav ul {
      padding: 0;
      margin: 0;
      }

      Comme ceci :

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav ul {
      padding: 0;
      margin: 0;
      text-align: center;
      }

      Si tu souhaites aligner les liens avec les bords des colonnes de ton blog, alors je te conseille de séparer ton menu en 2 parties : les liens à gauche et la barre de recherche à droite, en suivant ce tutoriel.

      Supprimer
  61. Bonjour Catherine,
    Je t'avais écrit cela fait maintenant 2 semaines car j'ai un problème avec ton tuto pour mon blog :) Je ne sais pas si mes commentaires ont été envoyés ou si tu n'as simplement pas eu le temps d'y répondre.

    Mon problème est le suivant:
    Mon en-tête n'est pas mise à 100%: lorsque je mets une image comme en-tête, il y a deux bandes blanches de chaque côté, puis il reste un "contour" du blog... Je ne sais pas du tout comment faire. Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Désolée du temps de réponse, j'ai eu beaucoup de boulot ces 2 dernières semaines ^^'
      Il reste encore un contour gris autour de ton en-tête sur mon ordinateur. Pour le supprimer cherche ton code CSS commençant par :

      body {

      Qui se trouve juste en-dessous de :

      /* Content
      ----------------------------------------------- */

      Remplace la dernière ligne commeçant par "padding" par :

      padding: 0;

      Trouve ensuite le code commençant par :

      .header-outer {

      Qui se trouve juste sous :

      /* Header
      ----------------------------------------------- */

      Remplace la ligne commençant par "background" par :

      background: transparent;

      Pour finir, si tu souhaites supprimer l'espace au-dessus de ton en-tête, ajoute le code CSS suivant :

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

      Avant la ligne :

      ]]></b:skin>

      Supprimer
  62. Merci beaucoup, tout fonctionne c'est génial!! :D
    J'aimerais également que mon image d'en-tête fasse toute la largeur du blog, elle est assez grande mais lorsque je la mets comme en-tête, elle ne couvre pas tout!

    RépondreSupprimer
    Réponses
    1. Retrouve ce code CSS :

      #header-inner {
      text-align: center;
      width: 1500px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px; /* Espace au-dessus de l'en-tête */
      margin-bottom: 60px; /* Espace en-dessous de l'en-tête */
      }

      Remplace 1500px à la ligne :

      width: 1500px;

      Par 100%, comme ceci :

      width: 100%;

      Ensuite ajoute le code CSS suivant à la suite :

      header img {
      margin: 0 auto;
      width: 100%;
      height: auto;
      }

      Ce qui donne :

      #header-inner {
      text-align: center;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px; /* Espace au-dessus de l'en-tête */
      margin-bottom: 60px; /* Espace en-dessous de l'en-tête */
      }

      header img {
      display: block;
      margin: 0 auto;
      width: 100%;
      height: auto;
      }

      Supprimer
  63. Bonjour Catherine, je suis désolée de t'embêter encore..
    J'ai un problème avec mon menu, il fait pas toute la largeur de mon blog, j'ai deux espaces blanc de chaque côté..
    Et, en fixant mon menu en haut de mon blog, il s'est décentré et est complètement sur la gauche..

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

    Je ne sais pas quel code te copier ici, alors je te laisse aller voir par toi-même.

    Encore désolée du dérangement..

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Je vois que tu as installé un thème ;)

      Supprimer
  64. Bonjour, bravo et merci pour tous ces tutos. J'ai suivi la 1ère partie de celui-ci, pour mettre l'en-tête à 100%, mais ça ne fonctionne pas, espaces en haut à gauche à droite et la ligne "description" se trouve en partie recouverte pas mon menu. J'ai changé la couleur de fond de l'en-tête, ça n'a rien changé. Peut-être que ça vient de la taille de ma bannière, si c'est le cas, quel est le format adéquat ? L'adresse de mon blog est: http://ideessortiesenfantssecteursevran93.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ajoute le code CSS suivant pour supprimer les espaces à gauche et à droite du menu :

      #crosscol, .tabs-inner {
      margin: 0;
      padding: 0;
      min-width: 100%;
      max-width: 100%;
      width: 100%;
      }

      Avant la ligne :

      ]]></b:skin>

      Ensuite pour ton en-tête, tu peux changer la couleur de fond en blanc pour que ton image ressorte moins. Ajoute ce code CSS :

      header {
      background: #fff;
      }

      Avant la ligne :

      ]]></b:skin>

      Pour finir, il y a une marge au-dessus de ton menu qui laisse entrevoir le fond de ton blog. Pour supprimer cette marge cherche ton code suivant :

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

      Remplace la ligne :

      margin-top: 10px;

      Par :

      margin-top: 0;

      Et voilà ;)

      Supprimer
    2. Bonjour et merci. J'ai appliqué ces conseils, et également coché "substituer le titre et la description", puisque ma description était en partie masquée après avoir suivi ce tuto. Mais mon en-tête et mon menu ne sont pas du tout à 100%... (j'avais répondu à votre message directement via ma boite mail mais je crois que ça n'a pas fonctionné...). Merci encore.

      Supprimer
    3. Autre problème, après avoir appliqué le tuto, il devenait difficile de "sélectionner" sur mon menu, il fallait "chercher" avec le curseur pour pouvoir pointer au bon endroit, du coup j'ai supprimé les modifs que j'avais appliqué en téléchargeant mon ancien modèle...

      Supprimer
    4. Bonjour,
      Ton en-tête et menu sont bien à 100%, il reste les espaces à gauche et à droite du menu et le fond de l'en-tête que tu peux mettre en blanc, par exemple.

      Pour cela, colle les codes suivants :

      .tabs-inner {
      padding: 0;
      min-width: 100% !important;
      }

      .tabs-inner .section {
      margin: 0;
      }

      header {
      background: #fff;
      margin: 0 0 -10px;
      }

      Avant la ligne :

      ]]>

      De ton thème ;)

      Supprimer
  65. Merci beaucoup pour tes réponses rapides, tout fonctionne parfaitement! :D

    RépondreSupprimer
  66. Bonjour,
    j'ai essayer de mettre mon header à 100% en suivant le tutoriel, mais rien ne change, il reste à gauche et se déplace quand je "zoom" ou "dé-zoom" ma page.
    Comment puis-je y remédier?
    Merci
    Abby (https://baguelle.blogspot.be/)

    RépondreSupprimer
    Réponses
    1. Bonjour Abby,
      On dirait que tu as réglé le problème ?

      Supprimer
  67. Re coucou ! Ton blog est vraiment génialissime, je passe mes journées dessus à tester tes différents tuto :D ! Quand tu tomberas dessus, tu peux du coup oublier le message où je demandais justement comment agrandir la barre de navigation à la taille totale de la page, car j'ai eu ma réponse ici :) (c'est que j'ai mis du temps avant d'arriver sur ce tuto). Bon, je n'ai pas encore trouvé cependant comment éviter que les articles cachent la barre de navigation (quand elle ne va pas à 100% tout va bien, mais dès qu'elle va à 100% elle est cachée), mais de toute façon je rencontre plein de petits déboires (j'ai beau copier -coller le code pour être sûre de pas me tromper, ça doit pas s'entendre avec celui initial du template de baseque j'ai chargé) donc ça ne m'étonne pas, j'ai la malédiction du code CSS ^^

    RépondreSupprimer
    Réponses
    1. Bonjour Shan,
      Le problème de ton contenu qui chevauche ton menu vient d'un petit bout de code. Retrouve le code qui commence par :

      .content-outer {

      Dans ce code tu trouveras la ligne suivante :

      margin-top: -30px;

      Remplace cette ligne par :

      margin-top: 0;

      Et voilà ;)

      Supprimer
  68. Salut ! Merci beaucoup pour cet article. Je me demandais si il était possible de mettre une image d'arrière plan seulement pour la partie qui contient le titre c'est à dire au dessus de la barre de navigation et qui fasse 100% de la largeur. J'en demande peut-être un peu trop :/

    Voilà l'adresse de mon blog: enaaway.blogspot.fr
    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Enéa,
      C'est tout à fait possible, ajoute le code CSS suivant :

      #header-inner {
      background-image: url('http://adresse.fr/image.jpg');
      }

      Avant la ligne suivante de ton thème :

      ]]><b:skin>

      Remplace http://adresse.fr/image.jpg par l'adresse URL de ton image.
      Tu peux créer une adresse URL pour ton image en l'ajoutant à un article brouillon sur Blogger. Tu trouveras les explications ici ;)

      Supprimer
  69. Bonsoir ^^

    Encore un grand merci Catherine, le design de mon blog n'aurait jamais pu être à l'état dans lequel il est sans toi !
    Je souhaite juste savoir comment je pourrai séparer la barre latérale du blog (du corps du blog) comme tu l'as fait sur le tien :)

    Merci d'avance et bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour Lenny,
      Cela dépend de ton thème. Il faut définir la couleur de fond de la zone du blog à transparent, puis changer la couleur de fond des articles et des gadgets à blanc. Dans ton cas retrouve le code CSS commençant par :

      .content-outer {

      Remplace les lignes commençant par :

      -moz-box-shadow:
      -webkit-box-shadow:
      -goog-ms-box-shadow:
      box-shadow:

      Par :

      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      -goog-ms-box-shadow: none;
      box-shadow: none;

      Ensuite retrouve le code CSS commençant par :

      .content-inner {

      Remplace-le par :

      .content-inner {
      background-color: #ffffff;
      }

      Ensuite trouve le code CSS commençant par :

      .main-inner .column-center-inner {

      Remplace-le par :

      .main-inner .column-center-inner {
      padding: 15px;
      background: #fff;
      }

      Pour finir, ajoute ce code CSS :

      aside .widget {
      background: #fff;
      padding: 15px;
      }

      Avant la ligne suivante :

      ]]></b:skin>

      Supprimer
  70. Hello hello !
    Que ferais-je sans tes tutos génialement faits ? J'ai laissé un précédent commentaire sous l'article "Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite" mais j'ai réussi à résoudre un problème comme une grande :D

    Mais... Nouveau problème aujourd'hui ! Dès que je modifie la largeur de l'en-tête de mon blog à 100%, mon logo est automatiquement abaissé et la phrase accompagnant celui-ci se retrouve derrière mon menu. Bref, ne sachant pas quoi faire, j'ai rétabli mon ancienne sauvegarde et j'attendrai de lire tes précieux conseils pour me remettre à la tâche :)

    Merci d'avance,
    Kloé.

    RépondreSupprimer
    Réponses
    1. Bonjour Kloé,
      Tu peux ajouter de l'espace sous ton en-tête, ce qui décalera ton blog avec ton menu vers le bas.
      Colle le code CSS suivant :

      header {
      margin-bottom: 60px; /* Espace sous l'en-tête */
      }

      Avant la ligne :

      ]]></b:skin>

      Modifie la valeur 60px par celle qui te plaît, et voilà ;)

      Supprimer
    2. Bonjour Catherine,

      Merci pour ta réponse qui m'a en partie aidé :) En effet en suivant toutes tes étapes, mon logo reste désormais bien centré et ne disparait plus derrière le menu. Une bonne chose de faite !

      Cependant, je n'ai pas l'impression que mon menu soit à 100%; il reste toujours des espaces blancs autour (un peu plus à droite qu'à gauche d'ailleurs) et j'ai beau avoir mis le code " #crosscol, .tabs-inner { " avec tous les margin/padding/width cela ne marche pas.

      Et, second problème, lorsque je tente de mettre ce menu à 100% de la page, il vient déborder sur le haut de mes articles et de ma barre latérale. Ce qui donne un aspect peu esthétique au blog...

      J'espère que tu pourras m'aider ! En attendant, je vais essayer de passer le menu au dessus de l'en-tête pour voir si cela change quelque chose et rend le tout plus esthétique.

      Merci d'avance pour ton aide :)

      Supprimer
    3. Je me permets un second commentaire ^^

      En allant sur la mise en page de mon blog, je me rends compte qu'une seconde cross column (cross-column 2) est apparue derrière ma section "Main" et "Sidebar". Et ça apparaît dès que j'essaye de mettre mon entête et mon menu à 100%.

      Si jamais tu as une solution à ce problème, tu serais ma sauveuse :)

      Supprimer
    4. Bonjour Kloé,
      Ton menu, enfin son contenant, est bien à 100% de largeur. Mais il à un fond transparent, d'où l'impression qu'il ne prend pas toute la largeur. Tu peux changer la couleur de fond de ce contenant avec ce code CSS :

      /* Tabs
      ----------------------------------------------- */
      .tabs-outer {
      position: relative;
      background: transparent;
      }

      Change la valeur de la ligne commençant par :

      background:

      Pour :

      background: #C0F8D9;

      Tu peux ajuster l'espace avant et après ton menu avec les lignes :

      margin-top: 0; /* Espace avant le menu */
      margin-bottom: 0; /* Espace après le menu */

      A ajouter avant le signe } de ce code CSS.

      Ensuite, tes liens ne sont pas centrés. Sous le code que tu viens de modifier, colle :

      .tabs-inner .widget ul {
      text-align: center;
      }

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

      Supprimer
    5. Merci pour ton aide Catherine ! Tout cela progresse lentement mais sûrement :)

      Tes codes ont en effet réussi à donner cette impression de 100% ! Un problème persiste encore ... Cette cross-column 2 qui apparaît derrière mon "Main" et ma "Sidebar". Si jamais tu as une solution je suis toujours preneuse ;)

      Merci pour ton aide et pour le temps que tu nous accordes à tous, c'est vraiment adorable !

      Supprimer
  71. Bonjour! Je suis avec attention les 'tutos blog', ils sont géniaux et bien faits quand on débute comme moi! J'ai rencontré un petit problème justement en essayant de customiser mon blog, je ne peux plus cliquer sur le titre de mon blog comme je le pouvais avant (cliquer sur le titre comme pour revenir sur la page d’accueil en fait) J'ai du faire une mauvaise manip' mais de là à savoir ou se trouve l'erreur...!
    Je ne savais pas trop ou poster mon commentaire donc j'essaie ici!
    Merci d'avance pour l'aide!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est plutôt étrange :/
      Vérifies dans les paramètres de ton en-tête que tu n'as pas décoché une case ? Ou dans les paramètres du blog peut-être ?

      Supprimer
  72. Bonjour,
    Après plusieurs manip, je n'arrive toujours pas à caler mon en-tête à 100% de la page. Je ne vois vraiment pas ce qui cloche. Peux-tu m'aider?
    Mon blog: http://diyofdream.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton en-tête est bien à 100% de la page, mais le fond autour de ton image d'en-tête est transparent, on voit donc la couleur de fond de ton blog, et cela donne l'impression qu'il n'est pas à 100% ;)
      Il suffit de modifier la couleur de fond de ton en-tête avec le code CSS suivant :

      header {
      background-color: #ffffff; /* Couleur de fond de l'en-tête */
      }

      A coller avant la ligne :

      ]]>

      De même pour ton menu, il est bien à 100% de la page mais le contenant de ton menu à un fond transparent. Retrouve ce code CSS :

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

      Rajoute la ligne suivante avant le signe }

      background: #F4CCCC; /* Couleur de fond du contenant du menu */

      Et voilà ;)

      Supprimer
    2. Pardon le code :

      header {
      background-color: #ffffff; /* Couleur de fond de l'en-tête */
      }

      Est à coller avant la ligne :

      ]]></b:skin>

      Supprimer
  73. Bonjour, je vous envoi un petit message car j'ai besoin de votre aide. J'ai voulu mettre mon menu et mon en-tête en haut 100% en haut de la page, mais seulement l'en-tête se retrouve trop haute et sous le menu ? Comment pourrais-je la descendre ?

    Merci beaucoup pour votre aide,
    www.labiodelallou.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux modifier l'espace au-dessus de ton en-tête avec le code suivant :

      header {
      margin-top: 30px; /* Espace au-dessus de l'en-tête */
      }

      Colle ce code avant la ligne :

      ]]></b:skin>

      Remplace 30px par la valeur qui te convient, et voilà ;)

      Supprimer
  74. Hello c'est encore moi... ^^ J'ai un dernier petit souci, comment faire pour qu'il n'y ai plus cet immense écart blanc entre mon image et mes articles ? C'est un peu moche je dois dire... Et j'ai testé tous les tutos possibles que j'ai vu des les commentaires ci-dessus... Rien ne marche :(

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

      .content-inner {
      padding: 10px 10px;
      margin-top: 80px; /* Espace au-dessus du titre du blog */
      }

      Comme tu as déplacé ton en-tête en dehors du contenant du blog, ce code CSS créé une marge entre tes articles et ton en-tête. Remplace la ligne suivante :

      margin-top: 80px; /* Espace au-dessus du titre du blog */

      Par :

      margin-top: 0; /* Espace entre l'en-tête et les articles */

      Tu peux modifier la valeur 0 par celle qui te plait. Tu peux indiquer une valeur négative, ce qui déplacera ton blog vers le haut de la page, et réduira l'espace entre tes articles et ton en-tête ;)

      Supprimer
  75. Bonjour Lady bird Red
    Super encore une fois mais je n'ai plus d'espace entre mon menu et l'article + colonne de widget à droite.
    Quel correctif apporter stp ?
    Merci encore

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

      .content-outer { margin-top: -30px; margin-bottom: -40px;}

      Augmente la valeur de margin-top (pour 0 ou une valeur plus élevée par exemple) pour déplacer la zone d'articles vers le bas, et donc augmenter l'espace entre ton en-tête et ton blog.

      Supprimer
  76. Re bonjour Catherine, hier je vous ai envoyer deux commentaires par rapport à mes questions. Mais finalement j'ai trouvé comment faire !!
    Merci beaucoup quand même !
    Enola

    RépondreSupprimer
  77. Bonjour Catherine
    super mais un petit souci, lorsque le menu se trouve dans le header et que dans un article vous cliquez sur une photo, la petite croix en haut à droite pour la fermer n'est plus cliquable !!!!

    RépondreSupprimer
    Réponses
    1. Bonjour Claude,
      Pour régler ce problème ajoute le code CSS suivant :

      .CSS_LIGHTBOX {
      z-index: 999999 !important;
      }

      Avant la ligne suivante dans ton thème :

      ]]></b:skin>

      Supprimer
  78. Bonjour Catherine,

    Tout d'abord, merci beaucoup pour tout ce travail, très apprécié... Et c'est fait avec beaucoup de gentillesse et de clarté!

    Après avoir mis mon en-tête et mon menu à 100%, je souhaiterais élargir le fond du menu (violet) qui rogne un peu en haut sur mon texte. Comment puis-je y arriver?
    Aussi, le texte de mes onglets n’apparaît pas en gras alors que j'ai modifié ce paramètre, en mettant même !important !

    Voici l'adresse de mon blog: http://lesliaisonslivresques.blogspot.fr/

    Merci beaucoup pour ton aide!

    RépondreSupprimer
  79. Bonjour Catherine,

    Je t'ai demandé de l'aide hier soir. Et entre temps, j'ai trouvé la solution! Merci quand même :) Je me lance dans les autres tutos!

    RépondreSupprimer
  80. Bonjour Catherine,

    Je t'ai laissé un commentaire qui est en attente de validation pour la barre de navigation que je n'arrivais pas à mettre en haut du blog : c'est chose réglée !
    En revanche, je n'ai pas réussi à mettre mon en tête à 100% du blog. Le fond de mon blog est blanc et la bannière aussi, mais quand je change le fond je vois bien que la bannière ne prend pas toute la largeur et en plus je n'arrive pas à la centrer bien que j'ai utiliser les codes que tu as pu donner en commentaire. Il y a quelque chose qui doit m'échapper. Si tu as une explication je suis preneuse ahah !
    Mon blog c'est bordelutopique.blogspot.fr
    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Romane,
      Ton en-tête est bien à 100% et ton image est bien centré. Ce sont les liens de ton menu qui sont décalés. Cela vient de leur marge à droite. Il faut simplement équilibrer la marge à gauche et à droite des liens pour rectifier cela. Retrouve ce code CSS :

      /* Police et Couleur des Liens */
      #barre_nav li a {
      font-family: Calibri;
      font-size: 14px;
      font-style: normal;
      text-decoration: none;
      color: #000000;
      margin-right: 30px
      }

      Remplace :

      margin-right: 30px

      Par :

      margin-right: 15px;
      margin-left: 15px;

      Et voilà ;)

      Supprimer
  81. Bonjour Catherine,

    après avoir fait plusieurs des tes tutos (merci ^^'), je me suis complètement loupée sur celui-là, le nom de mon blog se retrouve dans un encadré blanc et ne prend pas toute la place. Si je ne suis pas claire tu peux vérifier sur mon blog : leblogdelunatia.blogspot.fr (c'est la cata !).
    Voilà j'espère que tu pourras m'aider et merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En fait il y a une marge sur les bords de ton blog qui empêche les éléments de prendre 100% de la largeur.
      Retrouve le code CSS commençant par :

      body {

      Trouve la ligne commençant par :

      padding:

      Remplace cette ligne par :

      padding: 0;

      Supprimer
  82. Bonjour Catherine,
    J'ai essayé de mettre l'en-tête Chapitre-Livresque à 100% car esthétiquement cela ferait mieux mais impossible à faire. Quand je tape le code que tu recommandes l'en-tête se retrouve avec le bloc Les dernière chroniques et le bloc Bienvenue. Pouvez-vous m'aider s'il vous plaît ?
    Merci par avance pour votre aide mais également vos tutoriels qui ont rendu possible le nouveau design de Chapitre-Livresque !
    Marine.

    PS : lien vers mon blog http://chapitre-livresque.blogspot.fr/ pour jeter un oeil au code :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton en-tête est bien à 100% de largeur, mais le fond est transparent ce qui laisse apparaître le fond gris clair à gauche et à droite de ton image d'en-tête. Il te suffit d'appliquer un fond blanc à ton en-tête. Retrouve ce code CSS :

      .header-outer {
      background: transparent;
      }

      Si tu as un terme différent à la place de transparent, ce n'est pas grave. Dans tous les cas, remplace la ligne commençant par:

      background:

      Par :

      background: #ffffff;

      Comme ceci :

      .header-outer {
      background: #ffffff;
      }

      Et voilà ;)

      Supprimer
  83. Bonjour Catherine

    SHADOW INWONDERLAND avait demandé ce que je cherche à savoir
    "lorsque je dézoom ou lorsque la taille de l'écran est de taille différente du mien, l'image de mon en-tête n'est pas fixe, elle se décale. J'ai beau revoir mon code CCS et cliquer sur "ajuster à la page" lorsque je mets mon image. Comment cela se fait-il ? :/"

    J'ai créé mon logo adapté à la largeur de mon blog c-à-d 1200px mais ça ne change rien.

    Tu lui avait répondu
    "C'est normal, ton en-tête n'est pas centré mais aligné sur la gauche de l'écran.
    Pour centrer ton en-tête ajoute le code CSS suivant :

    #Header1_headerimg {
    margin: 0 auto;
    }

    Au-dessus du code suivant :

    ]]>

    Mais je ne sais pas où placer ce code? Avant quoi ou après quoi?

    Ton blog est vraiment un petit bijou. Merci

    Tiphaine

    RépondreSupprimer
  84. J'ai trouvé toute seule dans les commentaires!!!!
    Je suis super contente!

    Tu avais donné ce code pour centrer l'image du header au centre de la fenêtre et qu'il bouge si on agrandit la fenêtre ou qu'on la rétrécit.
    Je le réécris ici, ça peut servir à d'autres?

    ------

    Ça doit venir de ton image, ajoute ce code :

    #Header1_headerimg {
    margin: 0 auto;
    }

    Avant la ligne :

    /* Content

    Des bises!

    RépondreSupprimer
  85. Bonjour , merci pour ce tutos! Grâce a toi, notre blog est de plus en plus jolie! Cependant nous avons un probleme avec l'image du haut, elle ne s'adapte pas a notre blog, et je ne comprend pas trop se que je dois faire pour que sa s'adapte .... http://paradisula.blogspot.fr/ voila notre blog, merci d'avance !!

    d'ailleur nous voulions en profiter pour voir combien couterais eventuellement de faire une page d'accueil complete pour notre blog?

    RépondreSupprimer

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