[résolu] Annuler une propriété appliquée de façon générale ?

Bonjour à tous,

J'ai défini via ma feuille de style que toutes les balises <a> dans un certain <div> devaient avoir une image d'arrière-plan non répétée à droite (une petite flèche symbolisant le lien).

Seulement voilà, dans ce même <div> j'ai parfois des images qui portent un lien. J'aimerais donc que cette règle soit appliquée uniquement à mes liens textuels et pas à mes liens sur image...

Sauf que je n'y arrive pas.
La propriété background:none ne semble pas fonctionner

Merci d'avance pour vos conseils.
Modifié par Corinne (20 Jun 2006 - 17:02)

Bonjour Corinne

Je répond vite mais as-tu essayé :

a img { background-image: none }

?

Bonsoir,

Il conviendrait d'utiliser une classe il me semble

Alan a écrit :
Bonsoir,

Il conviendrait d'utiliser une classe il me semble

+1

Si on peut dire que l'image porte le lien, d'un point de vue html c'est bien le lien qui contient l'image et comme le parent ne peut être déterminé par l'enfant je ne vois pas trop d'autre solution :

<div id="ce_div">
...

... 
<a href="" class="lien_image"><img /></a>

...

</div>

#ce_div .lien_image {
propriété:valeur;
}

clb56 a écrit :

Si on peut dire que l'image porte le lien, d'un point de vue html c'est bien le lien qui contient l'image et comme le parent ne peut être déterminé par l'enfant je ne vois pas trop d'autre solution :

Oups t'as raison m'suis gouré moi

Bonjour et merci à tous !

Argh, une classe... N'y a-t-il vraiment aucune autre solution ?

Le problème étant que j'ai adapté un CMS graphiquement et que les futurs utilisateurs de celui-ci ne doivent pas avoir à s'occuper de classes... et surtout pas bidouiller le code HTML

Stephan, non ça ne marche pas

Quitte à bidouiller quelque chose en PHP... mais à l'heure actuelle je ne vois pas trop comment, mes connaissances dans ce domaine étant plutôt basiques. Une idée ?
Modifié par Corinne (15 Jun 2006 - 16:00)

Fait en sorte que quand tu as du texte que ça sois dans une tag <span> et que les images ne le soit pas. Et tu appliques le background à la tag <span> au lieu du liens :S

Euh, merci, mais alors là je vois pas du tout. Le texte du CMS est formatté de manière standard (paragraphes balisés avec des <p>).
Je ne peux pas modifier ces règles là, hélas.

As-tu un exemple d'images en background, ça nous donnerait peut-être une idée ??

Bonjour,

C'est un problème intéressant à plus d'un titre. Voici quelques idées.

1/ comme indiqué au dessus, il n'est pas possible en CSS de cibler un élément en fonction de ses éléments descendants.

2/ mais il est possible en CSS de cibler un élément en fonction de ses ascendants. Cela semble ouvrir des portes ouvertes, mais... quand quelque chose bloque il peut être utile d'examiner les symétries, la contraposée, etc. En l'occurrence il suffit de styler l'élément fils de manière à contrecarre le style indésirable du parent.
Pour une solution concrète il faudrait travailler sur du code concret ce qui oblige jusqu'ici à faire des hypothèses. Imaginons que le texte du lien reste à coté de la flèche du fait de la présence d'un padding, alors il suffit que l'image présente une marge négative de la taille du padding pour faire disparaître la flèche. Ca n'est qu'un exemple sujet à de nombreuses adaptations possibles.

3/ je pense que certains vont hurler à la bidouille. Une autre possibilité, puisque tu est prêtes à faire du PHP : simplement ajouter une classe avec une transformée XSLT (à condition que les pages sorties de ton CMS soient du XML bien formé) : simple et élégant.

Hello,

Désolée pour le délai de réponse. Je suis toujours en quête d'une solution.
Voici donc mon problème illustré :

http://www.exiledesigns.com/tempo/testcss/

Comme vous le voyez, la petite flèche au-dessus de l'image vient gêner la mise en page.

Sur mon exemple j'ai essayé de mettre un padding négatif, comme suggéré par Xavier, mais ça ne semble pas le faire

C'est quoi une classe avec une transformée XSLT

Salut,

Padding négatif, ça n'existe pas.

a écrit :
Le problème étant que j'ai adapté un CMS graphiquement et que les futurs utilisateurs de celui-ci ne doivent pas avoir à s'occuper de classes... et surtout pas bidouiller le code HTML

Peut-être peux-tu recourir aux expressions régulières ?
Modifié par Alan (20 Jun 2006 - 15:46)

Les expressions régulières c'est une très bonne idée... Mais je n'ai pas assez de connaissances pour savoir où, dans le complexissime code du CMS (à mes yeux de débutante) je devrai créer ma fonction .

/edit

Ah, et autre problème avec les expressions régulières...
Dans mon site originel, j'aurais des images en-dehors du #content... et aucune classe ne devra leur être appliquée. Du coup, je n'aurais pas les compétences pour réaliser un parser suffisamment évolué
Modifié par Corinne (20 Jun 2006 - 16:16)

Ah si seulement j'étais lu

Comme l'a dit Alan le padding négatif n'existe pas, mais les marges négatives oui. Le procédé résout la question le plus simplement du monde. En partant de ton exemple retire simplement le padding, le display block et met les marges adaptées comme ceci :

.post_content img {
	margin: 0 -12px 0 12px;
	border: 1px solid #BD6F75;
}

Un commentaire par ailleurs, je te conseille de traiter ton image comme le reste de ton texte, et de choisir une hiérarchie constante : paragraphe --> lien --> contenu, avec contenu valant soit texte soit image.
Modifié par Xavier (20 Jun 2006 - 18:01)

Hey Xavier, mais je t'ai lu, promis
Juste que comme tu parlais de marges j'ai assumé qu'il pouvait s'agir de marges externes ou externes, ne sachant pas que le padding négatif était interdit

Merci beaucoup pour ta solution, qui marche en effet. Seul hic, il devrait y avoir un espacement en-dessous de l'image... et si j'ajoute un margin positif en bas... et bien la flèche y apparaît

Pour la hiérarchie qu'entends-tu ? Que par exemple mon <p> ait un margin supérieur de 12px, et donc que mon image aussi ?

/edit

Et bien si c'est ce que tu entendais je t'en remercie, cela fonctionne, Youhouuuuuuuuuuuuuuuuuuuuuu !

Merci à tous ceux qui ont cherché à trouver la solution !
Modifié par Corinne (20 Jun 2006 - 17:01)

C'est sûr que cette solution marche mais je t'avoue que je ne la trouve pas bonne.
Utilise au moins .post_content a img, histoire que seules les images comprises dans une balise A soient touchées.
Mais si par exemple un lien comprend une image suivie d'un texte, alors le début texte sera rogné ou se superposera..
Modifié par Alan (20 Jun 2006 - 17:24)

Merci Alan, j'ai adapté la chose.
Cependant... Explorer m'affiche tout de même l'image d'arrière-plan dans la marge
Je n'en ai pas fini de souffrir je crois...
Modifié par Corinne (20 Jun 2006 - 18:02)

Corinne a écrit :
Explorer m'affiche tout de même l'image d'arrière-plan dans la marge

Tu peux essayer d'ajouter {zoom:1} (ou une autre propriété conférant le layout) à .post_content a

Wahou, génial oO Je l'ai mis dans ma feuille de style pour IE.

Cependant, le concept de layout est... quelque peu difficile à comprendre.
Je sens que je vais lire et relire cette page pour les semaines à venir

Alan a écrit :
C'est sûr que cette solution marche mais je t'avoue que je ne la trouve pas bonne.

Oui je savais bien que quelqu'un allait remarquer que cela s'apparente à une bidouille, mais c'est un plus simple qu'une solution serveur.

Alan a écrit :
Mais si par exemple un lien comprend une image suivie d'un texte, alors le début texte sera rogné ou se superposera..

Non ça je ne crois pas, car la marge négative compense juste l'excès de padding dédié à la flèche (la flèche qui repousse le texte qui suit d'autant).

Corinne a écrit :
Cependant, le concept de layout est... quelque peu difficile à comprendre.

Peut être un complément utile sur le HasLayout.