28172 sujets

CSS et mise en forme, CSS3

Bonjour,

en débutant un site internet, j'ai voulu souligner à l'aide de pointillés mes liens. Donc j'ai fait :
.container a{border-bottom:1px dotted}


Mais maintenant je commence (un peu tard) à me tourner vers les images qui sont des liens.
Ces images héritent donc d'une bordure basse car le code suivant ne fonctionne pas étant donné que le border porte sur le lien et non sur l'image.
.container a img{border-bottom:0}


Existe t'il une solution afin d'enlever cette bordure sans passer par une class ou un id à attribuer à l'élément <a> ?
(Car c'est une template wordpress et je ne suis pas assez calé pour créer une fonction qui ajoute une class aux liens d'image)

En résumé : existe t'il une solution afin d'appliquer une propriété à un élément parent ?
La question reste ouverte pour ma culture générale, car Wordpress ajoute un attribut rel="attachment" (que je n'avais pas vu) à ce type de lien.
Donc un
a[rel~="attachment"]{border-bottom:0}
fonctionnera dans mon cas bien précis.
À ma connaissance non.
Les liens ont leurs borders, et les images les leurs :
.container a img{border-bottom:0}
ne supprimera que les borders des liens, seulement celui des images.

J'imagine quelques solutions :
* tu utilises un background sur tes liens au lien d'un border (repeat-x left bottom) et dans le cas où c'est une image qui sera contenu par ton lien, celle-ci se superposera au background.
* soit en JS tu cherches les images, tu gardes que celles qui sont directement dans un lien, et tu supprimes le border sur le lien.
* soit tu oublies cette idée des souligner tes liens en pointillés Smiley smile parce que c'est ce qu'on reserve à d'autre type de contenu (quand on à une infos supplementaire sur un terme en roll over.. je sais pas comment ca s'appel).
Modifié par dhjapan (31 Aug 2010 - 17:10)
Tu peux essayer ça aussi, bizarrement ça donne l'effet voulu chez moi, sauf sur IE7 qui refuse un border sur le a.
Mais c'est pas élégant et assez contraignant.



.container a{ border-bottom:1px dotted black; }
.container a img{ border:0; margin-bottom:-5px; }

Modifié par keyraw (31 Aug 2010 - 17:13)
Salut,

Glabok a écrit :
existe t'il une solution afin d'appliquer une propriété à un élément parent ?
Non.