Aide : propriétés A:after pour un div

Bonjour à vous, je viens ici car je n'ai pu trouver de réponse à mon problème (ou a ma maladresse plutôt). Celui-ci est assez simple :

J'ai un calque div appellé "article" et j'ai décidé que dans ce calque là, les liens (tous externes) auraient la petite flèche.

.article {
	font-size: 14px;
	margin-left: 5px;
	border-left: 5px #FF6600 dotted;
	padding-left: 5px;
}
	.article A:after {
		content: "\0000a0[\2197]";
	}

	.article A:link {
		border-bottom: 1px #FFCCCC dashed;
		padding-bottom: 1px;
	}

Le problème c'est que les images contenant un lien A ont aussi cette flèche là et la bordure associés. Chose que je ne veux pas !

J'ai essayé avec les tournures suivantes mais aucune n'a d'effets.

.article A:link IMG {
 border:none; }
ou encore
.article img A:link {
	border: none;
}

J'ai la même chose avec un A:after vide. J'ai même inversé et réinversé mais toujours rien.

Je vous remercie de porter un oeil sur ma demande, je désespère alors que c'est si simple pourtant .
Merci par avance.

Bonsoir,
je ne suis pas certain d'avoir bien comprsi mais
il te suffit d'annuler le after sur les lien contenant des images
en leur appliquant une class.

Donc

.article a.nofleche:after  {content: "";}

Modifié par Hermann (30 May 2006 - 19:21)

As tu essayé avec

img {border:0;}

@Hermann : Le problème c'est que je ne peux pas appliquer de class pour les liens de ces images. Donc ça devrait être une instance formelle pour toutes les balises IMG contenue dans le div "article".

@fredmac : Oui j'ai déjà ça de configurer en général mais rien n'y fait pour ceux contenu dans les balises <a></a>

Merci quand même, si c'était aussi simple je n'aurai pas posté

Ok essayes (mets tout en minuscule)

.article a {border:0}

Tu es a mon humble avis obligé d'attribuer des classes.
Modifié par Hermann (30 May 2006 - 19:29)

Hermann a écrit :
Ok essayes (mets tout en minuscule)

.article a {border:0}

Euh mais ce que je veux c'est QUE les images contenue entre les balises <a></a> et non TOUS les liens.
Ahh je suis chiant n'empèche ^^. Merci.

ça ne changera rien à tes lien normaux si tu ne leur a pas attribué de border.
Ah si autant pour moi.
Ajoutes donc un !important

.article A:link {
		border-bottom: 1px #FFCCCC dashed !important;
		padding-bottom: 1px;
	} 

Modifié par Hermann (30 May 2006 - 19:33)

Toujours la petite flèche et la bordure en dessous de l'image..

J'ai homis de dire par contre que l'image se présente comme ça :

<div class="article">
 <div style="text-align: center;">
  <a ..><img /></a>
 </div>
</div>

Si cela peut être utile de le préciser.

Tu n'as malheureusement pas le moyen de dire en css: je voudrais les lien contenant des images soient comme tu l'as défini.

Ce ne sont pas tes images auquelle il faut attribuer un style mails tes lien.
Tu dois ecrire plus bas en appliquant une class

.article a.img {border-bottom:0}
.article a.img:after ...

Hermann a écrit :
Tu n'as malheureusement pas le moyen de dire en css: je voudrais les lien contenant des images soient comme tu l'as défini.

Ce ne sont pas tes images auquelle il faut attribuer un style mails tes lien.
Tu dois ecrire plus bas en appliquant une class

.article a.img {border-bottom:0}
.article a.img:after ...

Je ne disais pas appliquer un style aux images mais aux liens, oui, je ne pensais pas comme tu l'as expliqué

Malheureusement, ça ne marche toujours pas. Je crois que je vais arreter de prendre la solution que je veux et que je vais passer en <a class="blblbl"> spécifique.

Merci quand même pour votre aide, c'est assez rageant en plus vu la simplicité du CSS.

Est ce que les liens sur les images pointent aussi en externe ?

Dans la négative, tu peux utiliser ça

.article a[href*="http"]:after {
	content: "\0000a0[\2197]";
}

pgilbert a écrit :
Est ce que les liens sur les images pointent aussi en externe ?

C'est justement ça tout le problème

bosam a écrit :
Le problème c'est que les images contenant un lien A ont aussi cette flèche là et la bordure associés. Chose que je ne veux pas !

bonjour,

peut-etre une solution en trichant (cela depand de la taille des images).

En plaçant les images en absolute,
les liens <a>en display:table-cell; On oubli IE qui ne gere pas le pseudo :after.

une tailles minimales dans FF et compagnies inferieurs a celles des images.

Theoriquement ça peut recouvrir le <a> entierement et caché le resultat du ":after"

Si tes images sont de tailles de plus d'une interligne de hauteur , ... bricolage inutile, et il faudra passer par une class .
Il est probablement possible d'ajouter une class en passant par le dom , si tu n'as pas accés au source .
++

Salut bosam,

tu as raison d'etre exigeant, utilise donc ceci :

.article a + img:after{content: "\0000a0[\2197}

Le sélécteur "+" va cibler uniquement les balises images situées directement aprés une balise <a>.

Regarde aussi ce lien, la messe y est dite.

traduction des spécifications du w3c sur yoyodesign

Bonne chance pour la suite
Modifié par coccimaster (26 Jun 2006 - 15:52)

coccimaster a écrit :


Le sélécteur "+" va cibler uniquement les balises images situées directement aprés une balise <a>.

Il parait que IE ne gère pas +

nORKy a écrit :
Il parait que IE ne gère pas +

On s'en fout, IE ne gère pas les propriétés AFTER et BEFORE de toute façon

@coccimaster : Merci je test tout de suite