28234 sujets

CSS et mise en forme, CSS3

Exposants dans des titres surlignés [résolu]

Bonsoir,

Je souhaiterais insérer dans mes titres soulignés, des exposants (j'utilise donc la balise <sup>). Le problème que j'ai est que ces explosants sont surlignés. J'ai beau leurs appliquer la propriété text-decoration:underline; ça ne change rien. Quelqu'un pour m'aider?

Merci
Modifié par mathmax (11 Nov 2005 - 16:57)
Bonjour,

La propriété text-decoration s'applique de manière bien précise selon le contenu de l'élément :
- le soulignement est propagé à une boîte en ligne enveloppant toutes les boîtes de ligne en flux composant le contenu, et à toutes les boîtes blocs en flux qui y figurent. Les boîtes flottantes, positionnées, en display inline-block ou table en sont exclues.
- la seule exception pour les boîtes en flux est celles qui ne contiennent aucun texte : c'est le cas des images.

Autrement-dit, il est tout à fait normal que le soulignement d'un titre ne puisse pas être annulé pour un <sup> contenu dans celui-ci. Seul Internet Explorer enfreint cette règle, lorsque l'élément parent n'est pas doté de layout (voir http://test.blog-and-blues.org/haslayout/tests/underline1.html )

A noter qu'Opera et IE Windows dessinent incorrectement le soulignement des <sup> et <sub> en déplaçant le trait, au lieu de propager le trait à sa hauteur normale comme le fait correctement Firefox.

Et enfin, à noter également :
Opquast a écrit :
Le soulignement est réservé aux hyperliens.

( http://www.opquast.com/bonnes-pratiques/?niveau=1 )

Attention, donc, à ce que ce soulignement ne crée pas d'ambiguïté sur l'identification des liens. Le supprimer est sans doute la meilleure solution.
Bonjour mathmax,
Pour cela il te faudra entrer dans le detail.
<h1><span style=
"text-decoration: underline">souligné</span><span style=
"vertical-align: super;"> exposant</span><span style=
"text-decoration: underline"> souligné</span></h1>
Par exemple.
Et bien sur sans faire fi des remarques de Laurent Denis.
Merci pour vos réponses.

Laurent Denis, tu m'as déjà parlé dans un ancien topic du layout

a écrit :
si l'élément en flux a le layout (état d'une boîte CSS spécifique à Internet Explorer Windows), les 3 pixels apparaissent à l'extérieur de l'élément, comme dans le code ci-dessus. Les éléments aquierent le layout de différentes manières, et notamment en les dimensionnant.


J'ai encore un peu de mal à comprendre ce qu'est ce layout.
Pour un élément donné, quelles sont notament les différentes manière d'acquérir le layout ?
Merci pour cet article super intéressant ! Smiley smile Il illustre un grand nombre de bugs que j'avais rencontré et résolu en tatonnant mais sans jamais réelement savoir dans quels conditions il se produisait. Un grand merci donc pour cet article dont je conseil vraiment la lecture.
Une petite remarque tout de même :
le lien "page d'exemple illustrant la disparition du background d'une liste dans un élément flottant en position relative, selon le layout" se trouvant ici
renvoi vers cette page alors qu'il devrait renvoyer vers cette page.
Mise à part ça c'est vraiment parfait ! Smiley smile
Modifié par mathmax (17 Nov 2005 - 17:05)
Sujet clos
Aller à