Styles non pris en compte avec lien ancre sur page 2 depuis page 1

**Aldrik** · 21/04/2019, 22h00

Bonjour à vous,

Je me suis mis à HTML et CSS et je progresse bien. Mais là je suis confronté à un problème que je n'arrive pas à résoudre, et si l'une ou l'un d'entre-vous peut me dire comment le résoudre de façon simple, je lui en serai reconnaissant.. Je vous explique : j'ai une page 1 qui appelle une page 2. Lorsque j'exécute la page 1, tout va bien. Lorsque j'exécute seule la page 2, tout va ben. Lorsque j'appelle la page 2 depuis la page 1, tout va bien encore. Mais lorsque j'appelle ma page 2 depuis la page 1 avec une ancre sur la page 2, il semble que le CSS associé ne soit plus vraiment "actif".

Ci-dessous je vous mets le code, code que j'ai grandement rafraîchi pour aller à l'essentiel (le problème persiste).

Je vous remercie beaucoup.

fichier styles.css

Code css :

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
html
{
	margin:0;													/* Définit la taille des marges extérieures sur les 4 côtés de l'élément. */
  	padding:0;													/* Définit la taille des marges intérieures sur les 4 côtés d'un élément. */
    background: white url(images/img_arriere_plan.png);
    background-size: 100%;
    font: 1.1em "Verdana", Trebuchet MS, helvetica, sans-serif;	/* Police par défaut puis les polices de remplacement avec taille en unité relative (em). */
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Passage du menu vertical en menu horizontal. Pour ce faire, utilisation du modèle de boite tabulaire. */
/*-------------------------------------------------------------------------------------------------------*/
ul
{
    display: table;												/* Affichage de ul en display : table. */
    width: 1000px;												/* Largeur de la zone de contenu ; chaque élément (au nombre de 5) mesurera donc 1/5 de cette taille. */								
    margin: 100px auto;											/* Marges extérieures. */
    padding: 0;													/* Marges intérieures. */
    background: linear-gradient(#00BFFF, #1E90FF);			    /* Ajout d'un dégradé linéaire en CSS d’un bleu clair (deepskyblue) vers un bleu plus foncé (dodgerblue). */
    background: #1E90FF;								        /* Ajout d'une alternative au dégradé CSS -5 lignes ci-dessous) si le navigateur est trop ancien. */
    background: -webkit-linear-gradient(#00BFFF, #1E90FF);	    /* Ajout de préfixes obligatoires pour fonctionner sur tous les navigateurs. */
    background: -moz-linear-gradient(#00BFFF, #1E90FF);	        /* -webkit- (pour Chrome, Safari, iOS, Android...), -moz- (pour Firefox), */
    background: -ms-linear-gradient(#00BFFF, #1E90FF);	        /* -ms- (pour Internet Explorer), et -o- (pour Opéra). */
    background: -o-linear-gradient(#00BFFF, #1E90FF);
    background: linear-gradient(#00BFFF, #1E90FF);
    border-radius: 3px;											/* Ajout d'angles arrondis au menu. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),					/* Ajout d'ombres afin de donner de la profondeur. */
                0 3px 5px rgba(0, 0, 0, 0.2),
                0 5px 10px rgba(0, 0, 0, 0.2),
                0 20px 20px rgba(0, 0, 0, 0.15);
}
 
ul li
{
    display: table-cell;
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Ajout de styles aux liens contenus dans chaque élément de liste. Les liens seront donc affichés comme */
/* des blocs (afin que la taille de chaque lien corresponde à celle de son parent), le texte est centré, */
/* de couleur noire légèrement transparente et sans soulignement. Les marges internes sont définies      */
/* indépendemment (la marge interne du bas est plus importante).                                         */
/*-------------------------------------------------------------------------------------------------------*/
ul li a
{
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, 0.7); 
    text-decoration: none;
    padding: 8px 8px 10px 8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);				/* Ajout d’une ombre qui simule l’incrustation du texte. */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 	    /* Ajout de plusieurs ombres sur chaque lien. La 1ere de */
                0 -1px 0 hsl(210, 100%, 32%) inset, 			/* ces ombres est une ombre interne claire sur le haut   */
                0 -2px 0 hsl(210, 100%, 38%) inset, 			/* du lien (là où la lumière arrive), les autres sont    */
                0 -3px 0 hsl(210, 100%, 44%) inset, 			/* une succession d’ombres décalées progressivement vers */
                0 -4px 0 hsl(210, 100%, 50%) inset, 			/* l’intérieur du lien à partir du bas. La couleur de    */
                0 -5px 0 hsl(210, 100%, 60%) inset;				/* chaque ombre est progressivement plus claire.         */
    transition: padding 1.3s; 									/* Augmentation progressive taille des marges internes.  */
    position: relative;
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Ajout de coins arrondis sur le premier et dernier lien du menu. En effet, les ombres ne suivent pas   */
/* les arrondis car eux-ci ont été appliqués sur l’élément <ul>.                                         */
/*-------------------------------------------------------------------------------------------------------*/
ul li:first-child a
{
    border-radius: 3px 0 0 3px;
}
 
ul li:last-child a
{
    border-radius: 0 3px 3px 0;
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Ajout de différents états sur les liens pris en compte lors du survol avec la souris (arrière-plan    */
/* plus clair et éclaircissement de la couleur de chaque ombre.                                          */
/*-------------------------------------------------------------------------------------------------------*/
ul li a:hover, 
ul li a:focus
{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 
                0 -1px 0 hsl(210, 100%, 42%) inset, 
                0 -2px 0 hsl(210, 100%, 48%) inset, 
                0 -3px 0 hsl(210, 100%, 54%) inset, 
                0 -4px 0 hsl(210, 100%, 60%) inset, 
                0 -5px 0 hsl(210, 100%, 70%) inset; 
    padding: 8px 55px 17px 55px;								/* Modification de la taille de ses marges internes. */
    color : black;												/* Modifcation de la couleur. */
} 
 
/*-------------------------------------------------------------------------------------------------------*/
/* Lors de l’activation du lien, passage de l’arrière-plan en plus sombre. Pour ce faire, utilisation    */
/* d’un dégradé.                                                                                         */
/*-------------------------------------------------------------------------------------------------------*/
ul li a:active
{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0.1));
    box-shadow: 0 0 2px rgba(0,0,0,0.3) inset;
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Définition des propriétés appliquées sur la balise h1 et ses dérivées.                                */
/*-------------------------------------------------------------------------------------------------------*/
h1
{
    font: 6.1em "Kristen ITC","Helvetica","Verdana", Trebuchet MS, helvetica, sans-serif;
    color:#FFFAFA;
    text-align: center;
    text-shadow: 0.1em 0.1em 0.05em #C0C0C0;                    /* Ajout d’une ombre. */
}
 
h1.accueil
{
    font: 3.1em "Kristen ITC","Helvetica","Verdana", Trebuchet MS, helvetica, sans-serif;
    margin: 0 20px 0 20px;                                      /* Marge en haut, à droite, en bas et à gauche. */                                          
    padding:10px 0 10px 0;                                      /* Ecart de remplissage en haut, à droite, en bas et à gauche. */
    color:#FFFAFA;
    border:solid 2px #FFFAFA;
    border-radius: 20px;                                        /* Ajout d'angles arrondis. */
    background: #2A2A2A;
}
 
h1.autres
{
    font: 2.2em "Kristen ITC","Helvetica","Verdana", Trebuchet MS, helvetica, sans-serif;
    margin: 15px 20px 15px 20px;                                /* Marge en haut, à droite, en bas et à gauche. */                                          
    padding:10px 0 10px 0;                                      /* Ecart de remplissage en haut, à droite, en bas et à gauche. */
    color:#FFFAFA;
    border:solid 2px #FFFAFA;
    border-radius: 20px;                                        /* Ajout d'angles arrondis. */
    background: #2A2A2A;
}
 
h2 
{ 
    font: 1.5em "Kristen ITC","Century Gothic","Verdana", Trebuchet MS, helvetica, sans-serif; 
    font-weight: bold;
    margin-left:20px;
    color:#08088A;
    letter-spacing: 3px; 
}
 
h3 
{ 
    font: 1.1em "Century Gothic","Verdana", Trebuchet MS, helvetica, sans-serif; 
    font-weight: bold;
    margin-left:40px;
    color:#08088A;
    letter-spacing: 1px; 
}
 
h3.type_2
{
    margin: 0 2px 0 2px;                                        /* Marges top right bottom left. */
    padding: 0 0 0 0;
}
 
div#centre_droite 
{
    height:600px;
    margin: 0 20px 0 20px;                                      /* Marge en haut, à droite, en bas et à gauche. */ 
    border:2px solid #FFFAFA;
    border-radius: 20px;                                        /* Ajout d'angles arrondis. */
    overflow-y : scroll;
    background-color: rgba(230, 228, 228, 0.5);
}
 
p 
{
    font: 0.8em "Verdana", Trebuchet MS, helvetica, sans-serif;   
}
 
p.entete
{ 
    color:#08088A;  
    margin-left: 40px;                                          /* Marge à gauche. */ 
    margin-right: 40px;                                         /* Marge à droite. */
    margin-top: 0px;                                            /* Marge en haut. */
    margin-bottom: 5px;                                         /* Marge en bas. */
}
 
p.enumeration 
{ 
    color:#000000;   
    margin-left: 2px;                                           /* Marge à gauche. */ 
    margin-right: 2px;                                          /* Marge à droite. */
    margin-top: 5px;                                            /* Marge en haut. */
    margin-bottom: 5px;                                         /* Marge en bas. */ 
}
 
p.menu 
{ 
    color:#000000;
    background:#dbe0ef;
    border-top:2px solid #aeb8de;
    border-bottom:2px solid #aeb8de;
    padding:1em 1em 1em 5em;
    margin: 0 20px 15px 20px;                                   /* Marge en haut, à droite, en bas et à gauche. */ 
    border-radius: 20px;                                        /* Ajout d'angles arrondis. */
}
 
 
/*-------------------------------------------------------------------------------------------------------*/
/* Définition des classes de propriétés appliquées sur les cellules des tableaux. type_2 est utilisé     */
/* pour cadrer sans faire apparaitre les bordures (associé à table.type_2).                              */
/*-------------------------------------------------------------------------------------------------------*/
td.type_1
{
    border : 1px solid gray;                                    /* Taille de la bordure, style et couleur. */
    padding: 10px 10px;                                         /* Ecart de remplissage vertical et horizontal. */
}
 
td.type_2
{
    border: 1px solid gray;
    padding: 0 0 0 0;                                           /* Aucun écart de remplissage. */
    margin: 0 0 0 0;                                            /* Marges top right bottom left. */
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Définition classes de propriétés à appliquer sur les tableaux. type_2 est utilisé pour cadrer sans    */
/* faire apparaître le tableau.                                                                          */
/*-------------------------------------------------------------------------------------------------------*/
table.type_1
{
    margin-left: 40px;                                          /* Marge à gauche. */ 
    margin-right: 40px;                                         /* Marge à droite. */ 
    border-collapse: collapse;                                  /* Détermine la fusion des bordures (utiliser separate dans le cas contraire). */
}
 
table.type_2
{
    border-style: none;                                         /* Aucune bordure. */
    padding-left: 40px;
}
 
 
/*-------------------------------------------------------------------------------------------------------*/
/* Définition classes de propriétés à appliquer sur les lignes impaires et paires des tableaux.          */
/*-------------------------------------------------------------------------------------------------------*/
.ligne-impaire
{
    font: 0.85em "Verdana", Trebuchet MS, helvetica, sans-serif; 
    background-color: rgba(201, 186, 186, 0.5);
}
 
.ligne-paire
{
    font: 0.85em "Verdana", Trebuchet MS, helvetica, sans-serif; 
    background-color: rgba(231, 207, 207, 0.5);
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Définition classes de propriétés à appliquer sur les images. type_2 est utilisé pour cadrer           */
/* verticalement avec les textes déclarés en p.enumeration.                                              */
/*-------------------------------------------------------------------------------------------------------*/
img.type_1 
{
  vertical-align: middle;                                       /* Alignement de l'image au milieu. */
}
 
img.type_2 
{
    margin-left: 5px;                                           /* Marge à gauche. */ 
    margin-right: 5px;                                          /* Marge à droite. */
    margin-top: 5px;                                            /* Marge en haut. */
    margin-bottom: 0px;                                         /* Marge en bas. */
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* Afin d'enlever le trait sous le lien. On peut aussi mettre directement le CSS dans le HTML en         */
/* faisant : <a href="#leLien"style="text-decoration:none">                                              */
/*-------------------------------------------------------------------------------------------------------*/
a.sanstrait:link 
{ 
    text-decoration:none; 
}
 
/*-------------------------------------------------------------------------------------------------------*/
/* a:hover permet de changer les propriétés d’un lien quand on le survole avec sa souris. Voir aussi     */
/* a:visited, a:active, a-focus.                                                                         */
/*-------------------------------------------------------------------------------------------------------*/
a:hover
{
    color: green;
    font-weight: bold;
}

fichier page 1

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
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
 
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Jean Huard - Chef de projets - Développeur</title>
    <meta name="description" content="CV en ligne de Aldrik Kirdla - Chef de projets - Développeur">
    <meta name="keywords" content="java, C, Projets, SQL, Développeur">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Aldrik Kirdla">
  </head>
 
  <body>
    <h1 class parent>Jean Huard</h1>
    <h1 class="accueil">Chef de projets - Concepteur - Développeur</h1>
  	<ul>
    	<li><a href="page2.html/#linkCompetences">Compétences</a></li>
    	<li><a href="page2.html/#linkExperiences">Expériences</a></li>
    	<li><a href="#3">Autres expériences</a></li>
    	<li><a href="#4">Qui suis-je ?</a></li>
    	<li><a href="#5">Contact</a></li>
      <li><a href="#6">Tutoriels</a></li>
	  </ul>
  </body>
 
</html>

Fichier page 2

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
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
<!DOCTYPE html>
<html>
 
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Aldrik Kirdla - Chef de projets - Développeur</title>
    <meta name="description" content="CV en ligne de Aldrik Kirdla - Chef de projets - Développeur">
    <meta name="keywords" content="java, C, Projets, SQL, Développeur">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Aldrik Kirdla">
  </head>
 
  <body>
    <h1 class="autres">Aldrik Kirdla - Chef de projets, Concepteur, Développeur</h1>
 
    <div id="centre_droite">
      <h2 id="linkCompetences">Synthèse des compétences</h2>
      <p class="entete">Les compétences détaillées ci-dessous ne reprennent pas toutes celles acquises tout au long de ma carrière.
        <a class="sanstrait" href="#detail_experiences"><img class="type_1" src="icones/icone_information.png" alt="Détails" title="Détail de l'expérience professionnelle.">
        </a>pour plus d'informations.
      </p>
 
      <h2 id="linkExperiences">Résumé de l'expérience professionnelle</h2>
      <h3>Gestion de projets, Analyse, Conception, Modélisation, Développement, Conseil et Enseignement.</h3>
      <p class="entete">Détail de l'expérience
        <a class="sanstrait" href="#detail_experiences"><img class="type_1" src="icones/icone_information.png" alt="Détails" title="Détail de l'expérience professionnelle.">
        </a>
      </p>
      <p class="entete">Compétences<a class="sanstrait" href="#competences"><img class="type_1" src="icones/icone_information.png" alt="Compétences" title="Mes compétences techniques et fonctionnelles."></a>
        Autres expériences professionnelles<a class="sanstrait" href="#autres_experiences"><img class="type_1" src="icones/icone_information.png" alt="Autres expériences" title="Mes autres expériences professionnelles, dont celles de formateur en informatique."></a>
      </p>
 
 
      <h2 id="competences"><br>Blablabla</h2>
      <p class="entete">Les compétences détaillées ci-dessous ne reprennent pas toutes celles acquises tout au long de ma carrière.
        <a class="sanstrait" href="#detail_experiences"><img src="icones/icone_information.png" alt="Détails" title="Détail de l'expérience professionnelle.">
        </a>pour plus d'informations.
      </p>
 
    </div>
  </body>
 
</html>

**kevin254kl** · 22/04/2019, 17h04

Salut,

Qu'est-ce que tu entends pas plus vraiment actif? Regarde dans ton navigateur si ta feuille de style est bien chargé, ensuite avec l'inspecteur (firefox ou google) vérifie les propriétés appliqués et si certaines sont écrasés ou pas. Dans l’arborescence les deux fichiers sont au même niveau?