28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je voudrais faire quelquechose d'a-priori très simple, mais je ne parviens pas à trouver le selecteur ou la combinaison qui fonctionne:
Les liens sont soulignés, mais avec l'attribut border-bottom.
a {border: 1px dotted grey}

Quand le lien est sur une image, c'est pas terrible, donc j'aimerais attribuer un {border=0;} à l'élement A suivi de IMG.

On peut selectionner par rapport à l'ascendance (les IMG enfants de A), mais est-ce possible par rapport à la descendance (les A parents de IMG)? Smiley hum

J'ai un peu essayé des imbrications genre a img>a, etc, j'ai testé tout ce que j'ai pu, mais je n'y parviens pas. Smiley mur Je finis par me demander si c'est possible sans ajouter une classe, ou alors si la canicule fait vraiment fondre le cerveau?! Smiley confus

Merci de votre aide.
Ce mode de sélection n'existe pas.

Ce problème avec les images ne se posera pas (ou très rarement) en soulignant avec text-decoration (les images ne sont pas soulignées).
Ok merci, pas la peine que je m'acharne. Smiley sweatdrop
Je vais me diriger vers d'autres solutions, underline ou classe. Le rendu est vraiment plus sympa en border dotted, j'hésite. C'est du chipottage, mais bon...
Bonne soirée. Smiley smile
Laurent Denis a écrit :
Ce problème avec les images ne se posera pas (ou très rarement) en soulignant avec text-decoration (les images ne sont pas soulignées).

Les images ne sont pas soulignées ?

[b]HTML[/b]
<p>
	<a href="#"><img src="whatever.png" /> Et du texte pour faire bonne mesure</a>.
</p>

[b]CSS[/b]
a img {vertical-align: baseline;}
a {text-decoration: underline;}

Chez moi ça souligne.

Si pas visible avec le vertical-align: baseline, essayer un vertical-align: super.
mpop a écrit :
Chez moi ça souligne.

Après test, je précise :

– Opera 9 et IE 6 ne soulignent pas l'image ;
– Firefox 1.5 et Konqueror 3.5 soulignent l'image.

À voir pour Safari.
Bonjour,

Mpop: dans le cas de stz, il me semble qu'il s'agit plutôt d'images sans texte adjacent, ce qui entraîne peu de bugs côté navigateurs (les espaces peuvent être soulignés abusivement par certains).

Dans le cas contraire, effectivement, les navigateurs gecko traînent une vieille erreur sur ce point: le soulignement CSS ne peut affecter que les contenus textuels et certains types d'espaces. Pour KHTML, l'erreur est plus surprenante (il me semblait qu'elle avait été corrigée il y a longtemps déjà).

En résumé:
- liens ne contenant que des images : utiliser text-decoration et éviter les espaces et indentations de code si nécessaire
- liens mixtes textes+images: baliser spécifiquement le texte (span) et lui appliquer le text-decoration pour contourner le bug FF.
- pour le recours à une bordure à la place du soulignement: attention au fait qu'une bordure ne se propage pas sur les blocs de ligne, et que le résultat peut être médiocre si le contenu du lien (texte) est amené à se répartir sur plusieurs lignes. Cela peut-être aussi un effet volontairement recherché.
Modifié par Laurent Denis (27 Jul 2006 - 07:05)