Forum d'entraide PHPFrance

Bonjour,

Je ne sais pas si le titre est clairement rédigé.
En fait j'ai un DIV auquel j'applique l'underline sur le texte,
et à l'intérieur du div une classe, et je voudrais annuler
dans cette classe l'underline. Mais ça fonctionne pas.

Code : Tout sélectionner

partie html

<div>
<div id="bloc12">
<li>L'inde orientale</li>
<div class='un12'>
auteur : le webmaster
</div>
</div>
</div>

partie css

div#bloc12 {
position: absolute;
margin-top: 10px;
margin-left: 0;
width: 300px;
text-decoration: underline;
text-align: left;
font-family: arial;
font-size: 0.68em;
}

.un12 {
margin-left: 0;
width: 300px;
text-align: right;
font-family: verdana;
font-size: 0.82em;
color: #FF0000;
text-decoration: none;
}

Tous les changements s'opèrent bien dans .un12
sauf l'annulation de l'underline,
text-decoration: none;
reste sans effet.

Merci pour votre aide.

Quel est l'élément auquel tu applique la classe un12 ?

Le css s'applique selon la spécificité du terme.
Div#bloc12 est plus spécifique que #bloc12.

Donc, dans cette logique, et si un12 est un span, tu devrais essayer
span.un12

Non c'est un div, j'ai essayé en ajoutant la balise span,
le résultat est le même, impossible d'annuler le souligné.

Comme j'ai pas trouvé de solution je crée un autre div avec
position absolute. Mais ça me satisfait pas comme solution.

Si c'est un div faut mettre

div.un12 {
margin-left: 0;
width: 300px;
text-align: right;
font-family: verdana;
font-size: 0.82em;
color: #FF0000;
text-decoration: none;
}

Y'aurais pas un lien dans ton texte ?

Pour info, j'ai testé avec des sélecteurs super-spécifiques comme div#bloc12 div.un12 et je n'ai pas réussi à retirer l'underline non plus. (Fx2.0/Opera 9)

Pour info, j'ai testé avec des sélecteurs super-spécifiques comme div#bloc12 div.un12 et je n'ai pas réussi à retirer l'underline non plus. (Fx2.0/Opera 9)

et si on essayait avec html body di... hum.. c'est p'têt ounn bug ? ça donne quoi sous IE ? et avec des paragraphes ?

Tiens, ça semble être un effet de bord dans l'héritage des propriétés des 2 div imbriquées.

Une solution serait de prendre le problème à l'envers : plutôt que de chercher à enlever le soulignement dans un descendant, essaye de n'ajouter le soulignement qu'aux éléments qui en ont besoin dans l'élément parent.

Avec ton exemple bravegars, tu pourrais dans le CSS effacer la ligne 'text-decoration: underline;'
et ajouter ceci en dessous de div#bloc12 :

Code : Tout sélectionner

div#bloc12 ul li {
   text-decoration: underline; 
}

et corriger ton html comme ceci (il manquait les balises <ul>):

Code : Tout sélectionner

<div> 
   <div id="bloc12"> 
      <ul><li>L'inde orientale</li></ul>
      <div class='un12'>auteur : le webmaster</div> 
   </div> 
</div>

Forum d'entraide PHPFrance

Peut-on annuler l'underline à l'intérieur d'un div ?

Peut-on annuler l'underline à l'intérieur d'un div ?