Comportement bizarre de ma feuille de style

**noradan** · 27/10/2025, 21h10

bonjour

je viens de fabriquer une page ou j'ai une sous-liste ol ol. J'ai voulu la mettre en lower-roman.

Et bien si dans ma page css j'écris ol ol{list-style-type:lower-roman} il ne se passe rien et les item sont en décimal.
La seule façon de les mettre en lower-roman et d'écrire au début du fichier des balises <style></style> avec le même ol ol{list-style-type:lower-roman} dedans.

Je ne comprend pas pourquoi ?

Il n'y a aucune définition de ol dans mes feuilles de style.

**casperweb** · 28/10/2025, 01h15

Envoyé par noradan

Je ne comprend pas pourquoi ?

Bonjour, pour comprendre les raisons il faudrait que l'on puisse voir le code HTML et CSS en entier.

**kevin254kl** · 28/10/2025, 07h01

Hello

Comme demandé il nous faut le html css.
Vous pouvez aussi avec l'inspecteur vérifier si la règle est bien appliqué à votre élément.
Parfois avec les différents héritages css ...
Vou pouvez aussi vider votre cache au cas ou

**noradan** · 29/10/2025, 14h51

je voulais vous épargner ça !
Comme rien n'est trop énorme (ca. 175 lignes en tout) je les mets directement
Bon, alors voilà le html (je n'ai quand même pas tout mis, j'ai oté la fin) heureusement la plupart des choses se font via php include
titre album contient les meta jusqu'à <title>. Je ne vous le mets pas. J'ai bien vérifié, il inclus deux css

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$racine=$_SERVER['DOCUMENT_ROOT'];
include($racine.'/fonctionsphp.php');
include($racine.'/titre_album.php');
include($racine.'/colgauche_album.html');?>
<style>ol ol{list-style-type:lower-roman}</style>                               // Si je ne mets pas ça ici je n'ai pas de roman
<div class='corps'>
<div id='entete'>
 
<?php
<div class='contenu-album  lienvert'>  <div >
<ol>                                      // LE PREMIER OL NUMEROTE EN DECIMAL
<li> <a href="metamorphosis-The_Ballad_of_Samuel_Layne.php">The Ballad of Samuel Layne
</a>&nbsp&nbsp(20:17)
<ol >                                       //LE DEUXIEME OL QUE JE VEUX EN ROMAN
<li>The Balad of Samuel Lane</li>
<li>The War Brides's Prayer</li>
<li>The Soldier's Prayer</li></ol></li>
<li> <a href="m

Ensuite
colgauche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
h2{color:magenta;
       font-size:20px;
       /*text-align:left;*/
margin:0;
font-family:fonteproglyrics;
display:inline}
 
.colgauche{flex: 1 0 25%;
display:flex;
/*text-align:center;
background-color:yellow;*/
justify-content:space-between}
 
.coldroite{flex: 1 0 25%;
}
 
form{display:inline;
position:relative;
right: 0px}
</style>
 
 
<div class="colgauche">

Après il y a une image et un formulaire

Voila les deux css en commençant par le premier, celui du site

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 @font-face {
    font-family: "fonteproglyrics";
 src : url("materiel_prog/aston/Aston_Script.ttf")
format('truetype');
 /*src:url("materiel_prog/leva/LevaBlackshear.ttf")format('truetype');*/
    font-weight: bold;
    font-style: normal;
    }
 
body{background-color:DarkBlue;
display:flex;
justify-content:center;
}
 
.corps{background-color:white;
width:950px;
border:solid;
}
 
.home a{color:magenta;
font-family:fonteproglyrics;
font-size:18px;
 }
.home a:hover{color:lime}
 
/*.corps span{padding-left:3em} fiche le binz dans les info groupe*/
 
.entete{width:950px;
background-color:#FFF8DC;
/*border-bottom:solid;*/
position:sticky;
top:0;
}
 
.groupe{font-size:72px;
font-weight:bold;
text-align:center;
width:600px;
display:inline-block;
vertical-align:top
 }
 
.nom_groupe{font-size:72px;
font-weight:bold;
text-align:center}
 
.photogroupe{width:300px;
border:double;
background-color:#FFF8DC;
font-size:14px;
display:inline-block;
margin-left:30px;
text-align:center
}
 
.infogroupe{display:grid;
grid-template-columns: 1fr  1fr 1fr;
grid-column-gap:15px;
background-color:#FFF8DC;
}
 
.album{display:inlineblock}/*peut-être inutile*/
 
.nom_album{font-size:48px;
text-align:center}
 
.lienvert  a:link{text-decoration:none;color:black}
.lienvert  a:visited{color:black}
.lienvert  a:hover{color:lime}
 
.titre{font-style:italic;
vertical-align:middle;
display:inline-block}
 
.lyrics{font-size:16px;
padding:2em
}
 
.contenu-album{display:grid;
grid-template-columns: 1fr 1fr}
 
.pochette{width:300px;
border:double;
align-self:end;
background-color:#FFF8DC;
font-size:14px
}
 
.cadretitre{
display:flex;
justify-content:space-between ;
font-size:28px;
text-align:center;
height:50px ;
line-height:50px;
background-color: Coral;
border-bottom:solid;
border-top:solid
}
 
.adroite{justify-self:end;
margin:1em;
float:right
}
.adroitep img{width:200px}
 
.adroitep{
margin:1em;
float:right;
border:double
}
 
.adroitep:hover{border:solid;
border-color:lime;
border-width:10px}
 
.aucentre{text-align:center}
 
.gras{font-weight:bold}

Comme je vous ai dis, il ne contient aucune chose liée à des listes
Puis le second spécifique de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*valeur initiale 950 trop large*/
 
.corps{flex:0 1 800px;}
 
.contenu-album{/*display:grid;
grid-template-columns: 1fr 1fr;*/
padding-left:1em}
 
 ol >ol{list-style-type:lower-roman	//cette déclaration ne fait rien du tout
}
 
#entete{height:150px;
background-color:#FFF8DC;
position:sticky;
top:0}
 
 @font-face {
    font-family: "fonteproglyrics";
 src : url("materiel_prog/aston/Aston_Script.ttf")
format('truetype');
 /*src:url("materiel_prog/leva/LevaBlackshear.ttf")format('truetype');*/
    font-weight: bold;
    font-style: normal;
    }

Et je ne vois pas ce qui peut empêcher les ol ol de fonctionner à partir des css.

**gabi7756** · 29/10/2025, 17h39

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 ol >ol{list-style-type:lower-roman

Je sais pas quel IDE tu utilises mais il devrait grogner ici.

Il manque le ";"

Quand tu fais clique droit inspecter sur tes listes ca donne quoi ?
Je demande car je connais pas la syntaxe ol > ol
T'as test de mettre juste ol ?

Si tu es sur visual studio code fait :
CTR A => CTR P + SHIFT => Tu écris réindent selected line
Pour indenter le code proprement

**casperweb** · 29/10/2025, 18h09

Bonjour, quand vous postez dans le forum HTML/CSS n'indiquez pas de code PHP on n'en à pas besoin. Uniquement le code généré.
Et indenter votre code comme cela vous à déjà été demander. Ce sera plus lisible pour vous mais également pour ceux qui vous lisent.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ol ol{list-style-type:lower-roman}

N'est pas du tout la même chose que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 ol >ol{list-style-type:lower-roman	//cette déclaration ne fait rien du tout
}

Prenez l'habitude d'écrire un point virgule après la valeur de la propriété même si ce n'est pas obligatoire pour la dernière propriété de la règle CSS.
Le sélecteur n'est pas le même. Si vous écrivez ol ol {} c'est une liste dans une autre liste peut importe son emplacement dans la structure HTML.
Si vous écrivez ol > ol {} c'est une liste qui est enfant direct de la première liste. Et cette syntaxe n'est pas valide en HTML puisque un liste ol (ou ul) a comme enfant direct un li obligatoirement.
Donc la règle CSS ol > ol {} ne sera jamais appliquée car cible une structure HTML non valide.

Voici des liens à toujours avoir sous le coude :
https://developer.mozilla.org/fr/doc...ild_combinator
https://webdesign.tutsplus.com/fr/th...ze--net-16048t

**noradan** · 31/10/2025, 19h14

J'ai trouvé !
Cet après-midi j'ai fait un nouveau fichier avec là encore une sous-liste et tout a fonctionné.

J'ai donc épluché le code généré et j'ai trouvé ... j'avais oublié de fermer le second 'ol' !

Les histoires d'héritage sont parfois tellement subtiles (j'ai d'immense problèmes avec les flex les display et autres justify-content) que
lorsque j'ai un problème et que je ne vois pas immédiatement une faute de rédaction de code, je me dis toujours qu'il y a une subtilité d'héritage qui m'a encore échappée.

J'en connais un qui va me dire "c'est bien fait... je te dis d'indenter !! Scron-gneu-gneu !"

En tout cas c'est une console magique le "inspecter" !
Depuis que je pose des questions ici c'est la première fois qu'on me parle de la console magique.
Cela dis je ne comprends pas pourquoi après le second 'ol' le style hérité n'est pas chargé.
Que l'oubli de fermeture influence ce qui se passe après est évident. Mais quand le navigateur lit le ol ol, "normalement " il ne devrait pas savoir que j'ai oublié de le fermer après.

Apparemment si !

Vous pouvez m'expliquer pourquoi?

**casperweb** · 31/10/2025, 19h52

Bonjour, pour vérifier la validité de votre code HTML vous avez à votre disposition le validateur du w3c => https://validator.w3.org/ qui corrige les erreurs de syntaxe.
Vérifier régulièrement votre code si vous n'êtes pas sur, ou en cas de problème comme celui-ci.

>> Vous pouvez m'expliquer pourquoi?
Un petit exemple de code pour savoir de quoi on parle? Vous pouvez utilisez https://jsfiddle.net/ ou https://codepen.io pour nous transmettre un exemple de code problématique.

Les navigateurs interprète le code HTML, CSS, et JS. Chaque navigateur à sa propre interprétation selon son moteur de rendu. Il est donc difficile de donner une réponse exact sans connaitre le code incriminé, le navigateur utilisé (avec sa version si ce n'est pas la dernière), et la plateforme sur laquelle le code est tester (Windows, mac, Linux.... )

Et tout état de cause, TOUJOURS écrire du code valide. Cela évite bien des problèmes.