28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sur-écriture propre CSS d'un lien

Bonjour,

je développe actuellement un site en local avec WordPress. J'ai créé un thème fils sur lequel je sur-écris le code (PHP/HTML5 et CSS) à ma sauce.

Mon problème vient de la manière de procéder pour réécrire le code css. J'ai trouvé une méthode un peu barbare et j'aimerai le faire plus proprement. Pour information pour fichier CSS est lu en dernier et est donc logiquement prioritaire (sauf !important éventuels).

footer.php

<a href="#" class="class1">
	<p class="class2">Nous contacter</p>
</a>


style.css

.class1 {
	text-decoration: none !important;
}
.class2:hover {
	color: #ff6000 !important;
}


Je dois utiliser une classe différente pour chaque balise (class1 dans <a>, class2 dans <p>) :
class1 retire le souslignage (alors que je ne le définis pas en :hover !)
Je peux aussi changer la couleur avec text-decoration-color: #ff6000; à la place si je veux.
class2 change la couleur en hover.

http://i.imgur.com/mwOOFLu.gif

Sur le premier plan on a ni class1, ni class2 (blanc souligné bleu)
Sur le deuxième plan on a juste class2 (orange souligné bleu)
Sur le troisième plan on a class1 et class2 (orange sans soulignage)
Sur chaque plan, la souris se trouve sur "Nous contacter", les autres représentent l'apparence sans le hover.

Ma question est de savoir (sans parler du css installé par le thème à la base) comment changer l'apparence de ce lien en hover avec une seule classe (placée dans <a> OU dans <p>). En fusionnant mes deux classes et en les mettant à l'une ou l'autre position cela ne fonctionne pas.
Modifié par Ara (09 Jul 2015 - 13:58)
Modérateur
Bonjour, bonjour,

C'est marrant parce-que ton post est super bien fait, bien présenté etc mais je n'arrive pas à cerner/comprendre le problème...

Déjà sémantiquement un <p> dans un <a> c'est étrange mais tu n'as peut être pas la main dessus... ça évite notamment d'avoir à changer une partie de l'apparence sur le <a> et une autre partie sur le <p>...

Ara a écrit :
Ma question est de savoir (sans parler du css installé par le thème à la base) comment changer l'apparence de ce lien en hover avec une seule classe (placée dans <a> OU dans <p>). En fusionnant mes deux classes et en les mettant à l'une ou l'autre position cela ne fonctionne pas.
La non plus j'ai pas compris la question... enfin surtout la dernière phrase.

Si j'essai de comprendre ton lien a déjà une style et tu veux l'over-rider. Il te suffit de regarder le code qui est déjà en place (soit dans le css, soit avec un inspecteur de code) et de mettre exactement le même sélecteur avec tes changements...
Merci de la réponse rapide ! Je me doutais que je n'étais pas très clair en expliquant mon problème et je vais essayer de reformuler en précisant certaines choses.

Tout d'abord, si j'ai mis un <p> dans le <a> c'était pour garder une cohérence.
Mon footer est séparé en plusieurs morceaux "Liens utiles", "Adresse", "Logo", ... dans une Grid responsive : le texte dans Adresse était écrit avec des <p>, en mettant un <p> dans mon <a> je gardais cette cohérence au niveau du CSS. Cependant si je mettais un enchaînement de <a> je perdais le saut de ligne, je pense que régler ce problème est une manière de régler le mien. Je suppose que si je mets un <br> entre mes <a> cela pourrait résoudre le problème, je vais essayer.

Une autre manière de voir le problème, over-ride correctement le CSS déjà en place. Si j'ai assez facilement pu trouver les bouts de codes à modifier pour mes précédentes modifications, je n'ai pas trouvé la chose aussi simple pour ce lien. Est-il possible d'observer le css d'un item dans l'état hover avec F12 ? Car personnellement il m'affiche toujours le code de a et non de a:hover.
Il y a des chances que les attributs CSS initiaux de mon lien ne proviennent pas du fichier style.css de mon thème parent mais d'un framework en format min (bootstrap.min.css plus précisément). Je pense que je vais devoir regarder de ce côté là. Cependant la première solution devrait a priori régler le problème, j'éditerai dès que j'aurai de nouvelles informations.
Modérateur
Ara a écrit :
Tout d'abord, si j'ai mis un &lt;p&gt; dans le &lt;a&gt; c'était pour garder une cohérence.
Mon footer est séparé en plusieurs morceaux "Liens utiles", "Adresse", "Logo", ... dans une Grid responsive : le texte dans Adresse était écrit avec des &lt;p&gt;, en mettant un &lt;p&gt; dans mon &lt;a&gt; je gardais cette cohérence au niveau du CSS. Cependant si je mettais un enchaînement de &lt;a&gt; je perdais le saut de ligne, je pense que régler ce problème est une manière de régler le mien. Je suppose que si je mets un &lt;br&gt; entre mes &lt;a&gt; cela pourrait résoudre le problème, je vais essayer.
Et que dirais-tu de garder tes <p> pour organiser ton contenu mais de mettre les <a> dans les <p> plutôt que l'inverse ? Je ne sais pas si ça colle à tes attentes mais sémantiquement c'est déjà plus correct. Smiley smile

Ara a écrit :
Une autre manière de voir le problème, over-ride correctement le CSS déjà en place. Si j'ai assez facilement pu trouver les bouts de codes à modifier pour mes précédentes modifications, je n'ai pas trouvé la chose aussi simple pour ce lien. Est-il possible d'observer le css d'un item dans l'état hover avec F12 ? Car personnellement il m'affiche toujours le code de a et non de a:hover.
Oui c'est possible. Sur quel navigateur debug-tu ? Sur Chrome par exemple c'est le petit carré en pointillé avec un cuseur dedans :
upload/42161-f12states.png
Sur Firebug ça sera dans le menu déroulant de l'onglet "Style".

Ara a écrit :
Il y a des chances que les attributs CSS initiaux de mon lien ne proviennent pas du fichier style.css de mon thème parent mais d'un framework en format min (bootstrap.min.css plus précisément). Je pense que je vais devoir regarder de ce côté là. Cependant la première solution devrait a priori régler le problème, j'éditerai dès que j'aurai de nouvelles informations.
Tiens nous au jus Smiley smile
Modifié par _laurent (26 Jun 2015 - 21:26)
En organisant la balise <a> dans le <p> (ce qui est plus logique en effet) l'effet de hover fonctionne correctement avec une seule classe placée dans <a>.

PS : j'ai remarqué que la vitesse à laquelle le texte change de couleur est plus rapide dans le cas où la couleur est définie avec deux classes (pas vraiment moyen de le montrer avec un gif), est-ce normal ? Sinon globalement mon problème est résolu.
Sujet clos
Aller à