28221 sujets

CSS et mise en forme, CSS3

[Résolu] Decoration de liste ordonnée

Pages :
Bonjour,

D'abord, je me présente : David Latapie, officiellement étudiant en géographie.
Je traîne sur W3C-style, W3C-QA et pompeurs-CSS ; je connais plutôt bien le XHTML et les CSS.

Malheureusement, il m'arrive de me trouver en face d'un problème bête et, même en retournant la question dans ma tête, de ne pas en trouver la solution.

Alors voilà :

Je n'arrrive pas à désactiver le soulignement du texte dans un liste ordonné et ce, sur aucun des trois moteurs (Gecko, KHTML ou Presto - Opera)

Je suis certain que la solution est simple (je n'envisage même pas une lacune des trois moteurs à la fois), mais tout seul, je ne trouve pas. Voici donc le code épuré autant que possible, si vous pouvez diagonostiquer le problème…

niveau 2-1 et niveau 2-2 ne devraient *pas* être souligné…


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<style type="text/css">
		#test li	{text-decoration:underline}
		#test li li	{text-decoration:none}
	</style>
</head>

<body>
<div id="test">
<ol>
	<li>niveau 1-1
		<ol>
			<li>niveau 2-1</li>
			<li>niveau 2-2</li>
		</ol>
	</li>
	<li>niveau 1-2</li>
</ol>
</div>
</body>
</html>

Modifié le 22 Nov 2004 - 07:20
Tu peux essayer : 

<style type="text/css">
#test li {text-decoration:underline}
#test ol ol li {text-decoration:none}
</style>
vchahun a écrit :
Si tu fermais ta première balise li ?
<ol>
[b]<li>1-1</li>[/b]
<ol><li>2-1</li></ol>
<li>1-2</li>
</ol>


Structurellement c'est pas génial...
Salut,

1. 
<style type="text/css">
#test li {text-decoration:underline}
#test ol ol li {text-decoration:none}
</style>


Ça ne change rien

2. Mon code est valide. Ma balise est bel et bien fermée, là, où il faut, c'est-à-dire après les subdivisions.


[b]<li>[/b]niveau 1-1
	<ol>
		<li>niveau 2-1</li>
		<li>niveau 2-2</li>
	</ol>
[b]</li>[/b]


Donc, retour à la case départ.
Modifié le 14 Nov 2004 - 16:56
Ceci fonctionne : 

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html>
 <head>
  <title>test</title>

<style type="text/css">
#test span {text-decoration: underline;}
</style>

 </head> 
 <body>
  <div id="test">
   <ol>
    <li><span>niveau 1-1</span>
     <ol>
      <li>niveau 2-1</li>
      <li>niveau 2-2</li>
     </ol>
    </li>
    <li><span>niveau 1-2</span></li>
   </ol>
  </div>
 </body>
</html>

Modifié le 14 Nov 2004 - 18:41
Et en utilisant les class ?? je ne comprend pas trop pourquoi ça ne fonctionne pas, c'est étrange... mais les listes ordonnées ne sont pas soulignées par défaut Smiley eyecrazy
-edit- bon en relisant je crois que j'ai lu en diagonale en fait ...

Pour résumer, tu as un <li> qui contient des <ol> (et de nouveau des <li>) et tu souligne le premier <li> et tu ne veux pas que le reste soit souligné.

Le comportement est donc celui attendu je pense, l'écrasement des propriétés CSS ne fonctionne pas.
J'ai remarqué ça quand on faire un titre dans une page et un autre avec une class et dans les CSS :

h2 { pptéX: valeur; }
h2.class { pptéX: valeur par défaut; }

La valeur par défaut n'est pas appliquée...

Donc la seule solution semble en effet l'ajout de <span>.
L'utilisation de class pour les <li> imbriqués ne devrait rien changer en principe.
Modifié le 14 Nov 2004 - 20:31
Pourquoi un bogue?? c'est un comportement par défaut, il ne suit pas la logique de tous peut être mais pas un bogue je pense.
Regarde le box model, celui des geckos n'est pas le plus logique, perso je ne sommerais pas la valeur de width et celle de padding mais pourtant c'est ce qui se passe.

Qui appelles tu les grand ??
Administrateur
David Latapie a écrit :

Je n'arrrive pas à désactiver le soulignement du texte dans un liste

Vu la question et le titre du sujet, je déplace en "CSS et mise en forme"
ElMoustiko a écrit :
h2 {pptéX:valeur}
h2.class {pptéX:valeur par défaut}


Tu as bien compris ce que je voulais. Ce n'est pas suffisamment important pour que je passe par des classes (déjà que je voudrais utiliser davantage les sélecteurs…)

Qu'est-ce que 
pptéX:
?

Enfin, pour le message suivant : « les grands » est à prendre au second degré (d'où les guillemets) et signifie les des personnes que je connais pour être très compétentes. En l'occurence, j'ai envoyé un mail à Karl (Dubost) et Laurent Denis.
ElMoustiko a écrit :
h2 {pptéX:valeur}
h2.class {pptéX:valeur par défaut}


Tu as bien compris ce que je voulais. Ce n'est pas suffisamment important pour que je passe par des classes (déjà que je voudrais utiliser davantage les sélecteurs…)

Qu'est-ce que 
pptéX:
?

Enfin, pour le message suivant : « les grands » est à prendre au second degré (d'où les guillemets) et signifie les des personnes que je connais pour être très compétentes. En l'occurence, j'ai envoyé un mail à Karl (Dubost) et Laurent Denis.

Je n'arrive pas à supprimer mon message envoyé en double (erreur SQL, parait-il).

ElMoustiko a écrit :
Regarde le box model

En quoi ça consiste ?
Modifié le 14 Nov 2004 - 23:30
Bonjour,

Si je fais l'inverse, ça marche, niveau 2-1 et niveau 2-2 sont soulignés, pas niveau 1-1 et 1-2 !
<style type="text/css">

		#test li	{text-decoration:none}

		#test li li	{text-decoration:underline}

	</style>

J'ai l'impression que c'est un problème de valeurs spécifiées, calculées et réelles
a écrit :

Les agents utilisateurs doivent d'abord appliquer une valeur spécifiée à une propriété selon le mécanisme suivant (dans l'ordre de priorité) :

1. Si la cascade donne une valeur, utiliser celle-ci ;
2. Sinon, si la propriété est héritée, utiliser la valeur de l'élément parent, qui est en général une valeur calculée ;
3. Sinon, utiliser la valeur initiale de la propriété. Cette valeur initiale est définie pour chaque propriété.

La racine de l'arbre du document n'ayant pas de parent, et ne pouvant donc pas hériter de valeurs, c'est la valeur initiale qui est utilisée si nécessaire.

Mais, pas si simple pour text-decoration
a écrit :
Valeur : none | [ underline || overline || line-through || blink ] | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non (voir les explications)


Cette propriété décrit les décorations qui sont ajoutées au texte d'un élément. Quand la propriété est appliquée à un élément de type bloc, elle agit sur tous les descendants de type en-ligne de celui-ci. Quand elle est appliquée à un élément de type en-ligne, ou agit sur celui-ci, cette propriété influence toutes les boîtes générées par cet élément.


Cette propriété n'est pas héritée, cependant les boîtes qui descendent d'une boîte de bloc donnée devraient recevoir la même décoration que celle-ci (ex. toutes devraient être soulignées). La couleur de la décoration devrait être conservée, même si la valeur de la propriété 'color' des éléments descendants était différente.


Peut-être explication... mais pas solution... la nuit porte conseil et l'espoir fait vivre Smiley smile
Monique a écrit :
Peut-être explication... mais pas solution... la nuit porte conseil et l'espoir fait vivre Smiley smile


J'atteins mes limites, là.
À l'école, je n'aimais pas la grammaire et la syntaxe, ça se confirme avec les CSS.
Il me semble que la réponse tient au fonctionnement très particulier de la propriété text-decoration. Voir en particulier les explications données par CSS2.1, qui précise considérablement CSS2 ( http://www.w3.org/TR/CSS21/text.html#lining-striking-props )

Je proposerai l''explication suivante : en fait, le soulignement n'est pas hérité par les éléments li li. Il est appliqué à une boîte anonyme qui entoure tous les éléments contenus dans les li de premier niveau, donc qui comprend aussi les li de second niveau.

Mais il n'est pas possible, apparemment, d'atteindre cette boîte anonyme à l'aide des sélecteurs CSS du type ol li ol li et autres ci-dessus, qui visent les boîtes générés par les éléments, et non cette boîte induite par la propriété text-decoration. C'est pourquoi ce soulignement ne peut être annulé pour les li de second niveau.
Tout juste Laurent Denis, je viens d'avoir la réponse par… Bert himself (apparemment, même Karl ne savait pas)

Karl Dubost a écrit :
Quand les saints ne savent pas, il faut demander au père Smiley langue , donc voici la réponse de Bert Bos (W3C), éditeur de CSS.

[09:50] <karl> Bert, tu en penses quoi ?
[09:50] <karl> http://forum.alsacreations.com/topic.php?fid=4&tid=374
[09:53] <Bert> La spec dit que le soulignement continue dans les elements enfant. Alors il n'y a pas moyen d'arreter ca dans CSS2.
[09:54] <Bert> Il faut soit utiliser une propriete de CSS3, soit mettre le text dans un SPAN et souligner celui-la.


Je vais attendre les CSS 3. Je préfère modifier la CSS que la structure.
Modifié le 15 Nov 2004 - 17:14
Si tu ne tiens pas spécialement à la numérotation dans les listes de second niveau, un:

#test li ol {
display: table-cell;
}

peut régler le problème (les éléments en display:table-cell sont exclus de la boîte de soulignement).
Pages :
Sujet clos
Aller à