Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Remplacer un lien par une image dans la barre de navigation,

890 appréciations
Hors-ligne
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, 

890 appréciations
Hors-ligne
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, 
Ça m'aura, au moins, fait rire, 
Je retourne à mes recherches, 
Bonne journée, 
Mi Neth, 

518 appréciations
Hors-ligne
 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.


890 appréciations
Hors-ligne
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, 


518 appréciations
Hors-ligne
 Mi Neth

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

518 appréciations
Hors-ligne


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

890 appréciations
Hors-ligne
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, 

2789 appréciations
Hors-ligne
Coucou

J'ai modifié ton CSS personnalisé.



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

L'image du code ne fonctionne pas donc j'ai mis une couleur.


RESULTAT: https://recordit.co/oOsShOwHV1





890 appréciations
Hors-ligne
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...



633 appréciations
Hors-ligne
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.
Maelyne - Développeuse & Graphiste Blog4ever

890 appréciations
Hors-ligne
Bonjour 

Merci, 

Belle journée, 
Mi Neth, 

2789 appréciations
Hors-ligne
Merci Maelyne !  @Maelranaidh@ 

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




633 appréciations
Hors-ligne
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.
Maelyne - Développeuse & Graphiste Blog4ever

2789 appréciations
Hors-ligne
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/
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits soucis.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 5961 autres membres