Problème de texte souligné dans un lien

css :

.infobulleHaut span { text-decoration: none;}

puis html :

<a href=" " class="infobulleHaut">Espace Salariés<span>Infobulle espace salariés</span></a>

NB : Tant que l'ancre <a class="infobulleHaut"> n'est pas fermée on reste dans cette classe. Donc il est inutile de l'indiquer deux fois.
Modifié par Aureance (14 Jul 2005 - 01:38)

merci.
justement si, je dois avoir cette classe 2 fois, d'où mon problème. mais j'ai contourné et fait différement

Si tu as besoin de l'indiquer deux fois, c'est que tu as défini ailleurs une classe pour toutes les spans ? Donc ta soluce à du être :

span.infobulleHaut { text-decoration: none;}

Aureance a écrit :
css :

.infobulleHaut span { text-decoration: none;}

puis html :

<a href=" " class="infobulleHaut">Espace Salariés<span>Infobulle espace salariés</span></a>

Ceci ne fonctionnera pas, car la propriété text-decoration a une particularité : appliquée à un élément en ligne (ici le <a>), elle s'étend à toute les boîtes générée par ses descendants, sans tenir compte de leurs propres valeurs de text-decoration .

Pour obtenir ce type d'effet, il faut passer par un border-bottom.
Modifié par Laurent Denis (14 Jul 2005 - 10:36)

a.infobulleHaut {
	text-decoration: none;
	border-bottom: 1px solid red;
} 
a.infobulleHaut .infospan {
	text-decoration: none;
	border-bottom: 0;
}
/* ------ partie html ----- 
<a href=" " class="infobulleHaut">Espace Salariés<span class="infospan"> Infobulle espace salariés</span></a>*/

C'est vrai que mon truc ne fonctionne pas, alors je viens d'essayer celui de Laurent Denis qui me parrait logique aussi... sans succès, hélas. Vite Ericf, comment as-tu fait ? Ca m'étonne qu'on ne puisse pas briser l'héritage dans la balise <a> ???

Admettons, pour un exemple un peu hors-sujet mais concernant tout de même les liens soulignés, qu'on enlève le problème d'affichage de la span au survol et que pour simplifier on reste " en ligne ".
Il y a tout de même quelque chose qui m'intrigue dans tout ça : Plusieurs styles proposés avec l'unique portion de code html :
Avec les deux propositions suivantes j'obtiens le même résultat : Span soulignée, lien non souligné.

<p><a href="#"><span>là où je veux un soulignement</span> et là où j'en veux pas</a></p>

a { text-decoration: none; } 
a span { border-bottom: 1px solid #000; }
/* ou bien : */
a { text-decoration: none; } 
a span { text-decoration: underline; }

Alors que pour faire l'inverse : Span non soulignée, lien souligné, ça ne marche pas dans les deux cas...

<p><a href="#"><span>là où je ne veux pas de soulignement</span> et là où j'en veux </a></p>

a { text-decoration: none;  border-bottom: 1px solid #000;} 
a span { border-bottom: 0; }
/* ou bien : */
a { text-decoration: underline; } 
a span { text-decoration: none; }

On dirait donc que les ancres acceptent l'ajout de propriétés pour les balises insérées mais pas le retrait de certaines propriétés comme border et text-decoration. Bizarre, car il n'y a pas de difficulté avec des italiques ou des changements de graisse ou de couleur etc...

PS : petit à parte encore un "peu plus" hors-sujet.
C'est vrai, j'avais pas vu que l'exemple n'allait pas sous Opera, maintenant avec ta petite indication en plus: "ça le fait bien" comme on dit.
Sur IE-Mac, je n'ai jamais vu d'infobulles css s'afficher, mais uniquement par le biais des javascript onMouseOver.
Avec Opera-Mac, j'ai un autre problème pour des bulles css sophistiquées en trois parties ( largeur fixe avec têtière + centre extensible en hauteur + pied. Le tout avec images d'arrière plan ) l'infobulle s'affiche au survol mais ne se désaffiche pas quand j'éloigne la souris. Il faut alors que je fasse défiler un tout petit peu le navigateur pour qu'elle " s'éteigne ". Mais ce comportement est peut-être dû à la mauvaise influence d'une de mes div en position fixed...
Parfois, avec d'autres sortes de bulles ( celles des exemples Alsacréations par exemple ), Opéra ne désaffiche pas totalement la bulle et il en reste un morceau. De fait, je ne trouve pas ce navigateur très bon.

Pour finir, j'ai pas trouvé l'article de Bert Boss w3c ( il y avait beaucoup de choses en Allemand, mais la traduction en Français de Google est aussi claire que... du Chinois ! J'ai renoncé.)

Pour le premier problème : c'est une affaire de sélecteur qui ne vise pas ce qu'on croit

En effet, dans:

a { text-decoration: none;  border-bottom: 1px solid #000;} 
a span { border-bottom: 0; }

pour

<p><a href="#"><span>là où je ne veux pas de soulignement</span>
 et là où j'en veux </a></p>

... que disent exactement tes sélecteurs ?
a dit: appliquez ce style à la totalité de l'élément a, span compris donc.
a span dit: appliquez ce style à l'élément span seul

autrement dit, le deuxième sélecteur ne dit pas enlève la bordure du a dans le span, il dit le span n'a pas de bordure propre

Pour visualiser, il suffit de modifier le code en ce sens :

 a { text-decoration: none;  border-bottom: 1px solid #000;} 
 a span { border-bottom: 1px solid red; }

On voit bien alors que la bordure rouge ne remplace pas la bordure noire du lien a : elle s'ajoute au-dessus de celle-ci, car c'est la bordure de la boîte générée par le span, et non la bordure de la boîte générée par le a

En d'autres termes, la boîte d'un élément enfant ne peut pas modifier la bordure de la boîte de son parent, ce qui est assez rassurant

<edit> des padding-bottom permettent de visualiser tout ça beaucoup plus facilement</>

Pour le underline, de toutes façons, il se propage aux descendants sans que ceux-ci ne puissent le modifier. Il n'y avait pas d'article de B.Boss, mais une simple réponse à un mail privé, qui avait été reproduite ici. C'était il me semble David Latapie qui avait soulevé la question.
Modifié par Laurent Denis (15 Jul 2005 - 21:08)