Mettez des images sur votre menu !

Partagez si vous aimez ->

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

[transcription nature= »de la vidéo » titre= »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

Technique 

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');

#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://lddln.mypointcom.net
[/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!
Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons