Mettez des images sur votre menu !

Mettez des images sur votre menu !

Dans cette vidéo, je vous montre comment vous pouvez insérer une image sur votre menu en quelques lignes de CSS.

J’ai réalisé cette procédure suite à la demande d’un lecteur: Elmokhtar, du blog Entreprenarea. Merci à lui de m’avoir suggéré cet article.

Mettre une image sur son menu WordPress

Cliquez ici pour afficher la transcription de la vidéo :
« Tuto N° 9 : Pratique CSS : Mettez des images sur vos menus! »


Bonjour, ici Marie-Eve du blog Les Doigts dans Le Net. Aujourd’hui, je vais vous montrer comment styler un menu en CSS et en particulier comment mettre des images, voilà comme sur le menu en haut à droite que vous pouvez voir sur l’écran.

Comment ajouter des images sur un menu WordPress ? 00:14

Dans un précédent tutoriel, je vous avais montré comment le mettre en place dans WordPress. Et un lecteur m’a demandé comment j’avais fait pour mettre ces images. Je vous propose ces techniques aujourd’hui.

Plan du tutoriel 00:28

  • 1. Repérer l’élément HTML :Alors dans un premier temps, nous allons rechercher quel est l’élément HTML qui correspond à ce menu.
  • 2.Délimiter la zone à modifier : Dans un deuxième temps, nous allons délimiter la zone en CSS pour pouvoir travailler dessus.
  • 3. Styler en CSS dans Firebug : Dans un troisième temps, nous allons faire tout le style en CSS via Firebug.
  • 4. Recopier les changements dans le CSS : Et dans un quatrième temps, nous allons copier tous ces changements dans notre feuille de style et vérifier si tout est OK.

1. Repérer l’élément HTML 00:55

Donc je viens de supprimer le style dans CSS et de recharger la page de façon à ce qu’on puisse travailler donc sur un élément qui n’est pas stylé, évidemment. Alors pour vérifier quel est l’élément HTML qui correspond à ce menu, je vais tout simplement utiliser Firebug. Donc dans la console en bas à gauche de Firebug, nous voyons donc le marquage HTML qui correspond à mon menu. Ici un span

<span>Technique</span> 

qui couvre le mot « Technique ».

Je vois bien qu’il est surligné en bleu dans mon site Web. Donc si je me balade dans la console, je devrais pouvoir trouver donc tout l’élément qui correspond au menu et donc voilà. Ici j’ai un UL qui correspond bien à « Technique » et « Pas Technique ». Voilà, je vais prendre (Ctrl+C) l’ID « menu-liste-darticles » parce qu’un ID, c’est un sélecteur qui est fort. Donc je suis sûre que ça va bien fonctionner.

2. Délimiter la zone à modifier en css 01:45

Je suis à présent dans mon fichier CSS : un ID = je mets un dièse. Je colle le nom (Ctrl+V) que j’avais copié de l’autre côté et je vais mettre tout simplement un petit « border » juste pour délimiter la zone en fait.

#menu-listes-d’articles{
	border : dotted 1px red;
}

Voilà, une petite bordure rouge pour le menu, pour la partie UL et je vais mettre également une bordure verte pour les li. Comme ça on voit bien où est-ce qu’on va travailler.

#menu-listes-d’articles li{
	border : dotted 1px green;
}

Voilà, je sauvegarde, je retourne de l’autre côté et je recharge.

Oui, donc c’est très bien : les bordures sont apparues et nous voyons ici si je clique sur UL, qu’en effet, dans la partie CSS, on a bien le border ici, la ligne de code dans le CSS que je viens d’ajouter qui s’affiche.

3. Styler en CSS dans Firebug

Tout est OK. Alors, on va tout de suite mettre l’image. Donc on va cliquer sur li pour ça et ici, je vais rajouter une propriété de background. En fait, je vais aller chercher une image que j’ai mise sur mon serveur. Je l’ai mise dans un dossier Images et je l’ai appelé « icon_creer-site-web ».

	background : url {'images/icon_creer-site-web.png');
[code]

On voit bien qu’il apparaît. Donc on voit tout de suite qu’elle se répète plusieurs fois. Alors pour ça, je vais rajouter l’élément, voilà, la petite ligne « no-repeat » qu’une seule fois.
[code]
	background : url {'images/icon_creer-site-web.png')  no-repeat;
[code]

Elle est encore sur la gauche, donc je vais lui dire de le mettre à droite et bien au milieu. 

[code]
	background : url {'images/icon_creer-site-web.png')  no-repeat center;
[code]

Voilà. De cette façon, elle est vraiment bien et le fond coloré, je vais le mettre transparent. Par défaut, c’est transparent, mais je préfère le rajouter quand même.

[code]
	background : url {'images/icon_creer-site-web.png')  no-repeat center transparent;
[code]

Donc ici, on voit bien l’image qui s’est bien positionnée uniquement sur la droite de l’élément. Par contre, « Technique » est encore bien par-dessus. Donc pour ça en fait, il faudrait que je mette un padding sur le côté droit de mon élément. Donc c’est tout de suite ce que je vais faire. Un padding-right qui va être donc de la largeur de mon image qui est 64 pixels.

[code]
	background : url {'images/icon_creer-site-web.png')  no-repeat center transparent;
	padding-right : 64px;
[code]

Et là tout de suite, ça marche beaucoup mieux. Maintenant qu’est-ce que je pourrais améliorer encore? Bien, la hauteur de mon élément : j’ai l’impression que si je regarde ici comme ça, voilà, vous voyez les marges en jaune qui apparaissent ici ne sont pas utiles dans le design. Elles poussent l’entrée de menu « Pas technique » vers le bas. Donc je vais réduire les marges à zéro. 

[code]
	background : url {'images/icon_creer-site-web.png')  no-repeat center transparent;
	padding-right : 64px;
	margin: 0;
[code]

Voilà, ça remonte déjà un petit peu et qu’est-ce que je pourrais faire encore? Bien carrément remonter tout le menu UL un petit peu parce que là il est quand même un peu trop bas. Donc je clique sur « UL » et ici donc, je vais mettre une marge négative. Margin-top, je vais le mettre par exemple à -30 pixels.

[code]
#menu-listes-darticles  {
	border : 1px dotted red;
	margin-top: -30px;
}

Voilà. -30 pixels, ce n’est pas mal du tout.

4. Recopier les changements dans le CSS 04:39

Alors je vais commencer par copier tous ces changements dans mon fichier CSS. Tout d’abord, la partie qui est directement sur le menu.

N’oubliez pas les bordures ! 04:53
#menu-listes-darticles  {
	border : 1px dotted red;
	margin-top: -30px;
}

Voilà, ici. Et ensuite, le li.

#menu-listes-darticles li{
	border: dotted 1px green;
     background: url("images/icon_creer-site-web.png") no-repeat scroll right center transparent;
	border: 1px dotted green;
	margin: 0;
	padding-right: 64px;
}

Voilà.

La finition du style CSS 05:05

Le menu presque terminé. On voit encore un "border" blanc qui reste en fait entre les deux li. Donc je vais tout de suite aller supprimer ça afin de vérifier qu’il est bien sur le li et pas sur un autre élément. Oui, il a bien l’air d’être sur le li, en effet. Donc ici sur le li, je vais tout simplement mettre un « border : none ».. Comme ça il n’y aura aucune bordure.

Et évidemment, on remarque que c’est la même image des deux côtés, oui. Tout simplement parce que j’ai mis ça sur… L’ élément li, donc ça s’applique aux deux éléments li du menu. Or moi je voudrais que ça s’applique seulement au premier. Donc pour ça, je vais cibler juste sur l’ID du li. Donc l’ID, c’est « menu-item-2564 ». Je le copie-colle de l’autre côté.

[/code]
#menu-listes-darticles li#menu-item-2564{
// le code CSS
}
[/code]

Voilà. Et donc le background d’images, je vais le mettre juste là-dedans.

[/code]
#menu-listes-darticles li#menu-item-2564{
background: url("images/icon_creer-site-web.png") no-repeat scroll right center transparent;
}
[/code]

Et je vais faire pareil pour l’autre élément qui s’appelle « gerer-site-web » et l’ID, je vais tout de suite aller voir ça. Donc l’autre li qui est en dessous, le « Pas technique », c’est le menu-item-2563. Donc je vais juste changer ici à 63.

[/code]
#menu-listes-darticles li#menu-item-2563{
background: url("images/icon_gerer-site-web.png") no-repeat scroll right center transparent;
}
[/code]

Voilà, j’enregistre.

Le résultat de l'habillage CSS 06:32

Voilà, donc le menu est terminé. Si jamais vous avez des problèmes à afficher votre image parce qu’elle est coupée, c’est tout simplement que la taille de votre li n’est pas assez haute.

J’espère que vous avez bien tout compris et que vous arriverez à réaliser vos propres designs sur votre site web. Merci à tous. Au revoir.

http://lesdoigtsdanslenet.com

Fin de la transcription

Résumé

  • Repérez l'élément HTML correspondant au menu
  • Délimitez la zone à modifier dans le CSS
  • Stylez le menu (ajoutez les images) avec Firebug
  • Copiez les changements dans le CSS
  • Finalisez votre menu et arrangez les bugs!

comment mettre des images dans menu, CSS, mettre une image menu de mon site, mettre une image menu wordpress, tutoriel, vidéo, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

18 commentaires

  1. Merci Marie-Eve pour cette vidéo très bien expliquée. Ce sont ses petits détails qui nous coincent dans l’avancement de notre travail. Et d’une manière simple, ici la technique est démystifié, merci encore.
    Haydée

    Répondre
    • Salut haydee,
      Merci pour les compliments, je suis contente que cette vidéo te plaise. :)

      Répondre
  2. Super Marie-Eve, je vais me pencher sur ce travail à la rentrée en septembre. C’est exactement le genre de tuto dont j’ai besoin – merci !
    @bientôt
    Sinje

    Répondre
    • De rien Sinje,
      Reviens nous prévenir quand tu auras fini, je suis sûre que ça motivera les autres et qu’ils iront jeter un oeil!

      Répondre
  3. Encore un tutoriel bien fait! Merci pour ton temps, j’en apprends toutes les semaines un peut plus sur le html et css

    Répondre
  4. En effet, ce tutoriel est intéressant et il n’y a plus qu’à mettre en pratique!
    Personnellement, je ne voulais absolument pas toucher au code au début et puis par la force des choses et grâce à des tutoriels comme celui-ci,, au fur et à mesure je m’y suis mis, j’avance doucement mais surement et je finis même par y prendre goût!

    Répondre
    • bonjour Bruno,
      C’est super si je peux t’aider à prendre confiance et à t’aventurer dans le code. Tu verras, une fois mordu, t’es foutu, tu ne fais plus que ça! 😀

      Répondre
  5. Un grand Merci à toi MarieEve, Cela me fait un grand plaisir que tu fais ce tutoriel suite à ma demande. J’attaque toute suite l’ application sur mon blog et je reviendrais vers toi si je me bloque.

    Elmokhtar

    Répondre
    • Merci à toi 😉 J’espère que la vidéo t’aidera!

      Répondre
  6. Je suis toujours bluffé par la puissance et la praticité de Firebug. Et cette vidéo en est un très bel exemple.

    Accessoirement, j’ai aussi appris quelques trucs. Merci !

    Répondre
  7. Encore un très bon article illustré et bien expliqué par une vidéo c’est très appréciable merci.

    Répondre
  8. Ah ça merci pour la vidéo. elle es très explicite et permet vraiment de mettre le pied à l’étrier. C’est vrai que pour des débutants comme moi, c’est plus facile de se laisser guider en images.

    Répondre
  9. Merci Marie-Eve pour ce tutoriel !

    Je suis venu plusieurs fois utilisé tes techniques sans commenter. Je me décide aujourd’hui à le faire car ce tutoriel va m’être très utile !

    Répondre
  10. Super cette vidéo ! je suis toujours un peu perdu dans Firebug mais cela ne peut que m’inciter à persévérer ^^

    Répondre
    • Le tout avec Firebug, c’est d’y aller pas-à-pas. D’autres vidéos vont suivre pour faire le tour des fonctionnalités et continuer à pratiquer.
      A bientôt!

      Répondre
  11. Un trés bon vidéo,bien expliqué c’est vraiment rien à dire
    Merci énormément à vous 😀
    bonne journée

    Répondre
  12. Merci pour l’info. Savez vous comment insérer une image mais dans un menu genre d’avoir des catégories avec des visuels à côté ? Bonne journée

    Répondre

Trackbacks/Pingbacks

  1. Mettez des images sur votre menu ! - Les Doigts dans le Net | -thécaires | Espace numérique et autoformation | Scoop.it - [...] Procédure vidéo pour insérer une image sur un menu avec quelques lignes de CSS. En moins de 10 minutes,…
  2. Mettez des images sur votre menu ! | Communication web professionnelle | Scoop.it - [...] Dans cette vidéo, je vous montre comment vous pouvez insérer une image sur votre menu en quelques lignes de…
  3. Mettez des images sur votre menu ! - Les Doigts dans le Net | Trafic pour sites internet | Scoop.it - [...] Procédure vidéo pour insérer une image sur un menu avec quelques lignes de CSS. En moins de 10 minutes,…
  4. Les statistiques du blog en Août 2012 - Les Doigts dans le Net - [...] Mettez des images sur votre menu ! [...]
  5. Vous administrez vous-même votre site professionnel: vos difficultés techniques et comment les résoudre - Les Doigts dans le Net - [...] êtes nombreux à vouloir habiller vos menus d’une image. S’il reste possible de suivre un tutoriel bien détaillé, celui-ci…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint