Soulignement dans h2 ne peut s'annuler
Le
fra-PasDeSp
Soit des h2 soulignés :
h2 { text-decoration: underline; }
Ces sous-titres ont un " :" en fin de ligne que je souhaite pas voir
souligné (je suis un peu maniaque).
Hors si je place ces " :" dans un span et définis
h2 span { text-decoration: none; }
ces spans restent soulignés !!
Pourquoi ? Que faire de simple ?
Merci pour votre aide.
--
Fra
h2 { text-decoration: underline; }
Ces sous-titres ont un " :" en fin de ligne que je souhaite pas voir
souligné (je suis un peu maniaque).
Hors si je place ces " :" dans un span et définis
h2 span { text-decoration: none; }
ces spans restent soulignés !!
Pourquoi ? Que faire de simple ?
Merci pour votre aide.
--
Fra
Peut être ne pas l'inclure dans le H2 ?
--
http://grenault.net/accueil.htm
Dans ce cas comment éviter le retour à la ligne en fin de h2 ?
--
Fra
Bon finalement j'ai fait le contraire : le underline sur le span et le
titre mis entre <span> dans le <h2>... et là ça marche !!!
Je ne comprends toujours pas pourquoi.
Au fait c'est pas génant pour la sémantique du <h2> d'avoir le texte
principal de ce h2 entre span ?
--
Fra
Le 07/07/2015 19:15, (Fra) a écrit :
Je comprends.
Or (moi aussi je suis un peu maniaque)
Si tu remplaces « none » par « line-through » dans cette déclaration, tu
verras que tu as à la fois le soulignement dû au h2 et le barré dû au
span.
Cf. supra. Il y a un soulignement dans tout le h2, que celui-ci ait
ou non un span à l'intérieur.
Tu as répondu toi-même ensuite : mettre ce que tu veux souligner dans un
span plutôt que ce que tu ne veux pas souligner. Ce n'est pas du tout
gênant pour la sémantique.
Note que j'ai essayé ceci, mais que ça ne fonctionne pas non plus :
h2:after { content: " :"; text-decoration: none; }
--
Olivier Miakinen
Mes 2 cents
Celà ne serait-il pas du au fait que span est inline et h1 block ?
Si vous mettez quelle chose du genre :
<h1>sous_titre<span style="display: inline-block;
text-decoration:none;"> : </span></h1>
Respectueusement.
Jean François Ortolo
Le 08/07/2015 22:44, Jean Francois Ortolo a écrit :
Je ne comprends pas pourquoi, mais en effet ça fonctionne très bien
en ajoutant « display: inline-block; » aux CSS.
Je ne suis pas sûr qu'il y ait toujours une belle logique dans ce genre
de règle. En fait, il me semble que le comportement un peu hybride du
inline-block répond avant tout à un besoin fréquent. Dans cette
logique, il n'hérite pas de text-decoration (mais de color, en
revanche, oui), comme un block je crois. Donc on peut faire l'économie
du text-decoration:none (ou no-underline), à vérifier quand même sur
tous les navigateurs, autant le laisser. Autre chose, l'espace avant
les ':' va sauter, pour avoir un espace non souligné, il faut utiliser
Je pense que le plus pratique est de créer une classe spécifique, qui
pourra d'ailleurs également être utilisée pour des étiquettes de
formulaires:
.deuxpoints::after {
display: inline-block;
content: ' 0a0:';
}
Si on souhaite conserver le soulignement sous le ' :':
.deuxpointsul::after {
display: inline-block;
text-decoration: inherit;
content: ' 0a0:';
}
utilisation:
<h2 class="maclassedetitre deuxpoints">titre sans colons</h2>
Ça devrait être pratique, en particulier quand le texte est obtenu
dynamiquement (translate, templates, etc.). Mais il faut que l'absence
des ':' dans les chaînes soit cohérente, ce qui n'est pas toujours le
cas.
--
Pierre Maurette
Désolé.
Est-ce une règle spécifique aux titres de ne pas pouvoir annuler un
underline ?
C'est quand même bizarre de pouvoir créer un underline par un span mais
de ne pas pouvoir l'annuler par un span !
Bon bein j'en reste là. Merci à tous.
--
Fra