CSS qui ne s'applique plus

Bonjour,
Je débute avec le CSS.

J'ai créé plusieurs pages utilisant chacunes la même feuille de style.
Tout fonctionne bien jusque là.

J'ai créé, par copie d'une page, une autre page.

Toutes les anciennes pages fonctionnent bien sauf celle qui vient d'être créée.

D'où provient le problème ?

Voici le code de ma page html :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<link href="../../style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onload="MM_preloadImages('../../img/menu/le-projet-on.gif','../../img/menu/acteurs-on.gif','../../img/menu/suivi-on.gif','../../img/menu/centre-ressources-on.gif','../../img/menu/programme-on.gif','../../img/menu/infos-pratiques-on.gif','../../boutons/education-on.gif')">
<table width="100%" border="0" cellspacing="2">
  <tr>
    <td><table width="790" border="0" align="left" cellspacing="0">
        <tr>
          <td><a href="../../index.html"><img src="../../img/bandeau/geotopia-bandeau.jpg" alt="Geotopia" width="787" height="111" border="0" usemap="#Map2" /></a></td>
        </tr>
        <tr>
          <td><div align="left"><a href="../projet/projet_1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Le projet','','../../img/menu/le-projet-on.gif',1)"><img src="../../img/menu/le-projet-off.gif" alt="Le projet" name="Le projet" width="115" height="50" border="0" id="Le projet" /></a><a href="../education/educ_1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('education','','../../boutons/education-on.gif',1)"><img src="../../boutons/education-off.gif" alt="Education" name="education" width="113" height="50" border="0" id="education" /></a><a href="../acteurs/acteurs_1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Les acteurs du projet','','../../img/menu/acteurs-on.gif',1)"><img src="../../img/menu/acteurs-off.gif" alt="Les acteurs du projet" name="Les acteurs du projet" width="113" height="50" border="0" id="Les acteurs du projet" /></a><a href="../suivi/suivi_1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Le suivi de la construction','','../../img/menu/suivi-on.gif',1)"><img src="../../img/menu/suivi-on.gif" alt="Le suivi de la construction" name="Le suivi de la construction" width="108" height="50" border="0" id="Le suivi de la construction" /></a><a href="../centre_ressources/centre_1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Le centre de ressources','','../../img/menu/centre-ressources-on.gif',1)"><img src="../../img/menu/centre-ressources-off.gif" alt="Le centre de ressources" name="Le centre de ressources" width="113" height="50" border="0" id="Le centre de ressources" /></a><a href="../activites/activites_1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Le programme des activit&eacute;s','','../../img/menu/programme-on.gif',1)"><img src="../../img/menu/programme-off.gif" alt="Le programme des activit&eacute;s" name="Le programme des activit&eacute;s" width="113" height="50" border="0" id="Le programme des activit&eacute;s" /></a><a href="../infos/info_1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Infos pratiques','','../../img/menu/infos-pratiques-on.gif',1)"><img src="../../img/menu/infos-pratiques-off.gif" alt="Infos pratiques" name="Infos pratiques" width="110" height="50" border="0" id="Infos pratiques" /></a></div></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="790" border="0" cellspacing="2">
          <tr>
            <td width="111" height="100%" rowspan="8" valign="top" background="../../img/degrades/degradeD.gif"><table width="100%" border="0" cellspacing="2">
              <tr>
                <td width="20%">&nbsp;</td>
                <td width="80%">&nbsp;</td>
              </tr>
              <tr>
                <td width="20%">&nbsp;</td>
                <td><a href="suivi_1.html" class="lien">La conception du b&acirc;timent </a> </td>
              </tr>
              <tr>
                <td width="20%">&nbsp;</td>
                <td ><a href="suivi_2.html" class="lien">La d&eacute;marche HQE </a></td>
              </tr>
              <tr>
                <td width="20%"><img src="../../img/degrades/bulle.gif" width="10" height="11" /></td>
                <td class="menu_inactif" >Suivi de chantier  </td>
              </tr>
                          </table></td>
            <td><a href="suivi_3_5.html" class="corps_texte_lien"></a></td>
            <td><div align="right"><a href="suivi_3_2.html">Page suivante <img src="../../img/puce-orange.gif" alt="Page suivante" width="10" height="11" /></a></div></td>
          </tr>
        <tr>
          <td colspan="2" valign="top"><p class="titre" >Le  suivi du chantier en images.</p></td>
        </tr>
        <tr>
          <td width="423" valign="top"><p class="sous_titre">Plan masse d&rsquo;am&eacute;nagement&nbsp;:</p>
            <p class="corps_texte">Trois  b&acirc;timents vont &ecirc;tre implant&eacute;s sur le site&nbsp;:</p>
            <ul>
              <li class="corps_texte" > Pavillon d&rsquo;accueil&nbsp;</li>
              <li class="corps_texte" >B&acirc;timent principal d&rsquo;activit&eacute;s</li>
              <li class="corps_texte" >Observatoire astronomique.</li>
            </ul></td>
          <td width="242" valign="middle"><div><a href="../../img/photos/suivi/suivi2/popup/p_plans01.jpg" target="_blank"><img src="../../img/photos/suivi/suivi2/vig/v_plans01.jpg" alt="Plan de masse" width="107" height="120" border="0" /></a></div></td>
        </tr>
        <tr>
          <td valign="top" class="sous_titre">Terrain existant avant travaux : </td>
          <td valign="middle"><div><a href="../../img/photos/suivi/suivi2/popup/p_PC050055.JPG" target="_blank"><img src="../../img/photos/suivi/suivi2/vig/v_PC050055.JPG" alt="Terrain avant travaux" width="120" height="90" border="0" /></a></div></td>
        </tr>
        <tr>
          <td valign="top"><p class="sous_titre">La Pr&eacute;paration du  chantier&nbsp;:</p>
            <p>R&eacute;alisation de la voirie de chantier<br />
L&rsquo;entreprise de V.R.D. (APPIA Artois),  r&eacute;alise la plateforme d&rsquo;&eacute;volution du chantier (pistes d&rsquo;acc&egrave;s, parvis, all&eacute;es).<br />  
              <br />
            </p>          </td>
          <td valign="middle"><div><a href="../../img/photos/suivi/suivi2/popup/p_P1140022.JPG" target="_blank"><img src="../../img/photos/suivi/suivi2/vig/v_P1140022.JPG" alt="Pr&eacute;paration du chantier" width="120" height="90" border="0" /></a></div></td>
        </tr>
        <tr>
          <td valign="top"><p class="corps_text_gras">Installation  du chantier&nbsp;et terrassements g&eacute;n&eacute;raux</p>
            <p class="corps_texte">Le panneau de chantier est pos&eacute;.<br />
  Le  Ma&icirc;tre d&rsquo;ouvrage&nbsp;est la Communaut&eacute;    Artois-Lys.<br />
  Le  Ma&icirc;tre d&rsquo;&oelig;uvre&nbsp;: Atelier d&rsquo;architecture &eacute;cologique, J&eacute;r&ocirc;me Houyez, &agrave;  Bouvines.<br />
  Les  partenaires financiers pour la construction des b&acirc;timents sont&nbsp;: L&rsquo;Europe,  l&rsquo;Etat, la R&eacute;gion Nord  pas de Calais, l&rsquo;Ademe (voir rubrique acteurs).<br />
  Les  entreprises intervenantes sur le chantier sont: VATP, Bel&rsquo;Bois, Pirlet, SNH,  ETF, Bonnel, Hydro-Thermie, Tenesol, Ramery TP, SAPR, CK Carrelages, Appia  Artois.</p>
            Le chantier est raccord&eacute; en  &eacute;lectricit&eacute; et en eau potable.<br />
              <br />
            </p>          </td>
          <td valign="middle"><div>
              <p>&nbsp;</p>
              <p><a href="../../img/photos/suivi/suivi2/popup/p_P2270038.JPG" target="_blank"><img src="../../img/photos/suivi/suivi2/vig/v_P2270038.JPG" alt="Panneau de chantier" width="90" height="120" border="0" /></a></p>
              </div></td>
        </tr>
        <tr>
          <td colspan="2" valign="top"><p class="corps_texte">L&rsquo;entreprise de Gros &OElig;uvre (VATP) r&eacute;alise la  plateforme des rez-de-chauss&eacute;e des futurs b&acirc;timents.</p>
          <table width="100%" border="0" cellspacing="2">
              <tr>
                <td><div>
                  <div align="center" class="legende"><a href="../../img/photos/suivi/suivi2/popup/p_P1220043.JPG" target="_blank"><img src="../../img/photos/suivi/suivi2/vig/v_P1220043.JPG" alt="D&eacute;capage du sol" width="130" height="97" border="0" /></a><br />
                    D&eacute;capage du sol </div>
                </div></td>
                <td><div>
                  <div align="center" class="legende"><a href="../../img/photos/suivi/suivi2/popup/p_P1230059.JPG" target="_blank"><img src="../../img/photos/suivi/suivi2/vig/v_P1230059.JPG" alt="Remblaiement" width="97" height="97" border="0" /></a><br />
                    Remblaiement et mise &agrave; niveau</div>
                </div></td>
              </tr>
            </table>            </td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
 
        <tr>
          <td height="100%" valign="top" background="../../img/degrades/degradeD.gif">&nbsp;</td>
          <td valign="top">&nbsp;</td>
          <td valign="top"><div align="right"><a href="suivi_3_2.html" class="corps_texte_lien">Page suivante <img src="../../img/puce-orange.gif" alt="Page suivante" width="10" height="11" /></a></div></td>
        </tr>
 
 
      </table></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>
  <map name="Map2" id="Map2">
    <area shape="rect" coords="13,13,66,76" href="http://www.cc-artois-lys.fr" target="_blank" />
  </map>
</p>
</body>
</html>

Code:

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
 
/* CSS Document */
 
html,body {
background-color : none; 
}
 
p,ul,li,td {
font-size : 10px; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
background-color : none; 
}
 
 
.lien {
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:left;
	text-decoration:none;
}
 
.corps_texte_lien {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FF9900;
	text-decoration:underline;
}
 
.titre {
	font-size:14px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:left;
	font-weight: bold;
}
 
.sous_titre {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#0000FF;
	font-weight: bold;
}
 
.menu_inactif {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-align:left;
	color:#000000;
	text-decoration:none;
	font-weight: bold;
}
 
.corps_texte {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align:justify;
}
 
.corps_texte_souligne {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align:justify;
	text-decoration:underline;
}
 
.legende {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#000000;
	text-align:center;
	font-style:italic;
}
 
.corps_texte_centre {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align:justify;
	text-align:center;
}
 
 
.corps_texte_gras_souligne {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align:justify;
	text-decoration:underline;
	font-weight:bold;
}
 
 
.corps_text_gras {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align:justify;
	font-weight:bolder;
}
 
.presse_auteur {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align:right;
}
 
.presse_journal {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align:right;
	font-weight:bolder;
}
 
a:hover.lien {
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:left;
	text-decoration:inherit;
}
 
a:link {color:	#000000; text-decoration:underline;}
a:visited {color: black; text-decoration:underline;}
a:hover {color:#FF9900; text-decoration:none;}

Merci par avance pour votre coup de main.
A bientôt.

Salut

La raison pour laquelle ta nouvelle page ne prend pas en compte est que ta nouvelle page se trouve peut-être dans un autre dossier que tes anciennes pages.

Vérifie le chemin de ta CSS qui là indique que ta page est dans un dossier qui est dans un dossier... On va faire plus simple :
D'après ton chemin :
Code:

1 2 3 4 5 6 7 style.css | Dossier_A | Dossier_B | tapage.html

oui, c'est bien ça.

Le fichier style.css se trouve bien à la racine de l'hébergement et la page en question dans 2 sous dossiers.
Mais toutes mes pages fonctionnent de la même façon.

Pas d'autres pistes ?

J'ai fait un test de mon côté avec la même architecture et le CSS est bien pris en compte...

Tu n'as pas de protection ou autre sur tes dossiers ?
Sur quel navigateur cela ne marche-t-il pas ?
Peut-être un problème de cache.

Je viens de tester, le pb est présent que ce soit sur IE 6 ou 7, et Firefox.

Aucun dossier n'est protégé.

Je viens même de faire un essai en créant un autre fichier css spécifique à une page et c'est toujours pareil.

Pour en avoir un aperçu, voici le lien du site :
http://www.geotopia.fr

Le pb est présent sur les pages "Le suivi de la construction".

Merci encore pour votre coup de main. J'avoue que je suis un peu perdu.

Sur tes pages, le chemin relatif du fichier CSS essaie de le trouver dans le même répertoire au lieu de remonter à la racine :

Code:

<link href="style.css" rel="stylesheet" type="text/css" />

Oui, je viens d'essayer et c'est pareil.
En revanche, en local ça marche très bien, même sans déplacer le fichier css.

Normalement ton css se trouve à la racine du site c'est bien ça ?
Vu le chemin que tu lui donne il doit se trouver à cette adresse :
http://www.geotopia.fr/style.css
mais là, erreur 404

Et avec le valideur CSS de W3C qui confirme : http://jigsaw.w3.org/css-validator/v...i/suivi_1.html

Merci Merci MERCI !!!
Je n'ai pas vu que le fichier avait été supprimé.

Mais dans ce cas, comment se fait-il que les autres pages du site fonctionnaient encore ?

Mais en tout cas encore merci, je n'aurais jamais pensé à vérifier si le fichier était bien présent.

Génial.

Dans tes autres pages (enfin celles que j'ai regardé), ton CSS est écrit directement dans ta page et non pas de lien avec ton fichier:

suivi_1.html

Code:

<link href="../../style.css" rel="stylesheet" type="text/css" />

projet_1.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <style type="text/css">  .link { text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #000000; } </style>
Citation:

Envoyé par cynoq

Mais en tout cas encore merci, je n'aurais jamais pensé à vérifier si le fichier était bien présent.

Eh ben il faut le faire :aie:

Edit : correction de ton CSS avec les balises styles :
place --> juste avant </style> et pas en plein milieu ;)

Les styles cités ne sont plus utilisés.
Je suis en train de les supprimer au fur et à mesure.
Merci tout de même pour l'info.

Citation:

Eh ben il faut le faire

Je le ferai la prochaine fois, promis :oops:

Merci encore à tous et à bientôt