Blog d'aide de Blog4ever

Bonjour, 
Je sais mettre une image à côté d'un lien dans la barre de navigation et le placer à droite ou à gauche de celui-ci, Mais ce n'est pas ce que je veux faire, Comme le mentionne le titre de mon sujet, j'aimerai mettre une image en lieu et place du lien, Pour le moment, je l'ai intitulé Y, 
Je voudrai que ce soit une empreinte de patte de chat comme celles de mes catégories de forum ou retour en haut de page, 
Est-ce possible? Et comment faire?
J'ai tenté du bidouillage en css à partir du générateur de  ,  Sans succès, 
Merci pour ton aide, 
Mi Neth, 

Bonjour, 
Nous sommes vendredi 13 et je crois tellement en ma chance que voyant un sujet similaire lors de mes recherches, je fonce voir...
...C'est ce sujet, mon sujet, 
Pôvr'fille, :ptdr:
Ça m'aura, au moins, fait rire, 
Je retourne à mes recherches, 
Bonne journée, 
Mi Neth, 

 Mi Neth

Dans ton CSS, au niveau de l'élément nav ul li, si tu ajoutes la propriété background-image en lui assignant l'URL de ton image, ça devrait le faire.

:am:

Bonsoir Kiamgo et merci pour ton aide, 

J'ai tenté comme suit ...sans les étoiles... mais ça ne fonctionne pas, 

***nav ul li {***
background-image: url (https://static.blog4ever.com/2020/03/857029/coussineeto-compress.png) ! important;
***}***

Ça n'a même pas affiché l'image, 
Le mieux que j'ai obtenu, c'est à partir du générateur de , Mais si j'avais l'image, j'avais aussi le Y et justement, j'aimerai n'avoir que l'image et bien entendu la petite flèche du menu déroulant, 
Le hic, c'est que l'image apparaît aussi dans le menu à côté du premier lien, et du coup, il déborde, 

***.diz-barre-navigation li:first-child{*** background-image: url(https://static.blog4ever.com/2020/03/857029/coussineeto-compress.png); background-repeat: no-repeat; background-position: left center; padding-left: 32px; ***}***



J'ai tenté de cette manière,

***nav li:first-child{*** background-image: url(https://static.blog4ever.com/2020/03/857029/coussineeto-compress.png); background-repeat: no-repeat; background-position: left center; padding-left: 32px;***}***

J'ai obtenu le même résultat, à ceci près que là, le menu est décalé, 



Encore merci,  ton aide me fait avancer, 
Bonne nuit, 
Mi Neth, 

:bd: Mi Neth

Quelle méthode utilises-tu pour créer les liens de ta barre de navigation?
Es-tu en Master Design?

Essaye aussi la propriété content et assigne lui ton url, en lieu et place de background-image.

Bonjour Kiamgo, 

Je suis en Rapid-design ...je ne touche pas au master, trop novice pour ça... 
Pour créer mes liens, je suis ce chemin >Votre blog > Fonctions avancées > Barre de navigation > Personnaliser...
Je vais testé ta proposition, 
Merci de ton aide, 

Mi Neth, 

Coucou




J'ai enlevé le Y  ( dans le code de la barre )

Bonsoir  et merci, 

Je vois que tu as incorporé cette portion de code dans la partie /*interlign sous menu*/,  Moi, j'avais séparé et fais une partie distincte au dessus, 

Je remercie, Kiamgo pour son aide, 
J'ai suivi sa proposition sans plus de résultat, 

Je n'aurai jamais pensé mettre un code couleur à cet endroit, 
Je suppose que si l'image en doublon dans le menu déroulant disparaît, celle du menu aussi? Si oui, ce n'est pas très grave, Je peux faire avec, Le principal, c'est d'avoir l'image dans la barre, 
Merci à toi,  
Bonne fin de soirée, 
Mi Neth, 

...Tu peux clore ce sujet, Merci...

Bonjour,

Si tu veux limiter l'image au premier li uniquement, il faut restreindre un peu plus ta règle CSS : mets "nav > ul > li:first-child".

Le chevron > sert à indiquer que la règle s'appliquera au premier élément trouvé dans l'arborescence HTML et ne s'appliquera à aucun des élements descendants existants à d'autres profondeurs.

Bonne journée.

Bonjour 

Merci, 

Belle journée, :sol:
Mi Neth, 

Merci Maelyne !  @Maelranaidh@ 

On peut aussi mettre simplement---> " nav > ul > :first-child "

Alors oui, techniquement tu peux. Mais je déconseille.

Normalement, tu n'es pas censé avoir autre chose que des li en descendants directs d'un ul mais pour les deux caractères que la balise li représente, l'économie n'est pas valable et tu es sûr d'obtenir le résultat escompté. Sans compter que ça rend le CSS plus compréhensible si quelqu'un d'autre passe après ou même si tu reviens dessus beaucoup plus tard (et que tu as tout oublié, comme moi j'ai tendance à faire x))

Bonne soirée.

Edit: j'ajouterai aussi que mettre une pseudo-classe (les instructions qui commencent par un deux-points, type :first-child, :hover, :focus, :active...), sans spécifier l'élément auquel elle se réfère (une .classe, une balise ou un #identifiant) n'est pas pas une bonne pratique. Je le déconseille d'autant plus fortement parce que je ne suis pas même certaine que ça puisse fonctionner correctement sur tous les navigateurs.

Merci de la précision.
en effet parfois on se contente d’un code qui fonctionne et on crée des problèmes.
l’abus des !important est un exemple.
j’ai retenu la leçon 😀
bonne journée.


Lien utile: https://yesyouweb.com/pseudo-classes-position/