28220 sujets

CSS et mise en forme, CSS3

Pseudo-classes pour les images liées

Bonsoir,
j'ai la structure HTML suivante :
<a href=".."><img src=".."></a>

Ma CSS indique une bordure pour les liens :link et :hover et j'aimerais l'annuler pour les images liées. J'ai donc pensé à :
a img:link, a img:visited, a img:link:hover {
	border: none;
}

Mais vraisemblablement c'est interprété comme des pseudo-classes sur <img> et non pas sur <a>. Le code suivant ne convient pas non plus on dirait :

a:link img, a:visited img, a:link:hover img {
	border: none;
}


Quelqu'un a-t-il une idée ?

D'avance merci Smiley smile 

a:link img, a:visited img, a:link:hover img {
	border: none !important;
}

?
Modifié par Stephan (09 Oct 2005 - 00:40)
Bonsoir,


ce serait plutôt, je pense (normalement) :

a écrit :

a img, :link img, :visited img, :hover img { border: none; }



Smiley murf
Modifié par arkange (09 Oct 2005 - 00:50)
Bonsoir et merci,
non aucune solution ne fonctionne... ce qui m'embête aussi c'est que toutes les images liées du site n'affichent pas de bordure, même sans cette CSS, et que seules 2 l'affichent, alors qu'elles ont la même imbrication et que l'appel de la CSS est bon.

Je ne savais pas s'il est possible de placer une pseudo-classe devant un élément comme ceci :
a:pseudoclasse élément
d'après vous oui, mais mes bordures persistent même avec le !important.
Bonjour,

Ce n'est pas un problème de sélecteur, mais de modèle de rendu CSS : un boîte (img) ne peut pas modifier une propriété (border) d'une autre boîte parente (a).

Ajouter une classe aux liens a qui ne doivent pas être doté d'une bordure et styler la classe.
Modifié par Laurent Denis (09 Oct 2005 - 06:30)
Salut
Mets 
img {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
tu supprimes pas le soulignement ,tu lui donnes une valeur nulle
Smiley rolleyes

Jp949 : pourrais-tu lire les messages précédents avant d'intervenir dans un fil, svp ?

Une bordure est appliquée à tous les liens. Elle peut être annulée pour une classe de liens, ou sur un id de liens.

Cette bordure du lien n'a rien à voir avec la bordure d'une image éventuellement contenue dans le lien. Quelque soit le poids du sélecteur visant l'image et quelque-soit la manière de préciser la propriété de bordure de l'image.
Modifié par Laurent Denis (09 Oct 2005 - 08:33)
Si j'ai bien compris le post initial de Psychomessia c'etait de faire diparaitre la bordure sur ses images liées non?
Prends une image et affiche le code suivant :

<style type="text/css">
<!-- 
 a {
border: 5px solid red;
}
img {
border: 5px solid green;
}
-->
</style>
</head>
<body>
<a href="#"><img src="test.png" alt="..." /></a>
</body>


Il y a deux bordures sur deux boîtes CSS différentes :
- la bordure rouge de la boîte de lien (celle que PsychoMessiah cherche à supprimer)
- la bordure verte de la boîte d'image (celle sur laquelle tout le monde s'acharne en vain à intervenir depuis le début de ce sujet)

Il ne sert strictement à rien de modifier les propriétés de la bordure verte pour faire disparaître la rouge... Il faut agir sur les liens et non sur les images.

Or, il n'existe aucun moyen de viser avec un sélecteur CSS "les liens avec des images dedans et seulement ceux-là. Il est donc nécessaire de doter cette catégorie de liens d'une classe spécifique pour les différencier des autres liens de la page.
Modifié par Laurent Denis (09 Oct 2005 - 09:06)
Ah excuses
pas vu border ,je pensais soulignement simplement .
Certain que si c'est une bordure definie pour les liens dans la css on ne peut pas la supprimer mais j'ai cru que c'etait simplement le soulignement des liens qui provoquer cette bordure comme ca se presente generalement avec les liens soulignes
Ahem. Laborieux, décidément, ce sujet dominical.

La propriété text-decoration s'applique de manière bien précise selon le contenu de l'élément :
- le soulignement est propagé à une boîte en ligne enveloppant toutes les boîtes de ligne en flux composant le contenu, et à toutes les boîtes blocs en flux qui y figurent. Les boîtes flottantes, positionnées, en display inline-block ou table en sont exclues.
- la seule exception pour les boîtes en flux est celles qui ne contiennent aucun texte : c'est le cas des images.

Une image placée dans un lien souligné par [i]text-decoration n'est donc pas soulignée dans un navigateur conforme[/b]. Le comportement d'IE et d'Opera est correct sur ce point. Celui de Firefox est correct quand le lien ne comporte que l'image, mais il est non conforme lorsque le lien comporte à la fois un texte et une image en flux (l'image ne devrait pas être soulignée). Voir http://test.blog-and-blues.org/text-decoration/

Le comportement d'IE Windows est en revanche erroné sur d'autres aspects du soulignement. L'ajout de certaines propriétés CSS conférant le layout aux éléments enfants d'un lien permet de modifier le soulignement de l'élément parent de manière non-conforme. Voir http://test.blog-and-blues.org/haslayout/tests/underline1.html

Le comportement d'Opera est également erroné un point : le soulignement mal placé des éléments <sup> et <sub>.

Mais dans tous les cas, modifier img { border: ...} n'a aucune influence sur a {text-decoration:...}
Modifié par Laurent Denis (09 Oct 2005 - 11:09)
Bonjour et merci de vos réponses,
il est vrai que mon ancienne méthode consistait à donner une classe "img" aux liens image, mais je cherchai à l'éviter. J'ai maintenant bien compris qu'«il n'existe aucun moyen de viser avec un sélecteur CSS "les liens avec des images dedans et seulement ceux-là"».
Vous dites qu'«Une image placée dans un lien souligné par text-decoration n'est donc pas soulignée dans un navigateur conforme.» et «Celui de Firefox est correct quand le lien ne comporte que l'image, mais il est non conforme lorsque le lien comporte à la fois un texte et une image en flux» Or, j'utilise Firefox, il n'y a pas de texte dans le lien, et la bordure apparaît.
J'ai mis l'image en float gauche et la bordure disparaît, mais comme vous l'avez dit il n'y aurait pas eu besoin, car l'image est bien seule dans le lien et était en flux. Pourtant la bordure apparaissait sous Firefox mais pas sous IE. Smiley confus
Modifié par PsychoMessiah (09 Oct 2005 - 11:59)
Sujet clos
Aller à