Discussion :

[laurentSc]

Bonjour,

j'ai fait cette manip :

1- le site est dans un répertoire d'un projet en local et le CSS est bien appliqué

2- je copie-colle le site à la racine d'un autre projet et cette fois le CSS n'est pas appliqué.

Je le vois avec l'inspecteur ; dans le cas 1 si je survole
<div id="menu-en-tete"> <!-- ds menu.php -->,
j'ai bien dans la fenêtre à droite le CSS de menu-en-tete (défini dans menu.css) et pas dans le cas 2.

Pourtant dans les 2 cas, on a dans le head :
<link rel="stylesheet" type="text/css" href="styles/menu.css" media="screen">

Dans index.php, on a

Code html :

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

1
2
3
4
/* D'abord l'entete */
include('header.php');
/* On continue avec le menu de navigation */
include('menu.php');

Voyez vous une explication possible ?

[Pytet]

Bonjour,

Je suppose que tu as bien chargé la page sans le cache du navigateur (raccourci Ctrl + F5).

Est-ce que tu as une erreur 404 dans la console pour le chargement du fichier css sur le 2ème site ?

Est-ce que tu arrives à consulter le fichier css sur le 2ème site ? (Raccourci Ctrl + U pour voir le code source html puis clique droit et Ouvrir le lien dans un nouvel onglet sur le lien dans l'attribut href="styles/menu.css")

Si tu arrives à consulter le fichier css, est-ce que tes modifications sont bien visibles ?
Enfin il faudrait vérifier que ton code css puisse correspondre à la structure html pour les 2 sites (pas de sélecteur css différents pour le menu des 2 sites par exemple ?).

[laurentSc]

Je suppose que tu as bien chargé la page sans le cache du navigateur (raccourci Ctrl + F5).

oui

Est-ce que tu as une erreur 404 dans la console pour le chargement du fichier css sur le 2e site ?

non, le fichier menu.css est bien chargé (onglet réseau) et code 200

Est-ce que tu arrives à consulter le fichier css sur le 2e site ? (Raccourci Ctrl + U pour voir le code source html puis clique droit et Ouvrir le lien dans un nouvel onglet sur le lien dans l'attribut href="styles/menu.css")

sur le site 1, ça m'affiche bien menu.css, par contre sur site 2, ça affiche de nouveau le code de la page d'accueil.

(pas de sélecteur css différents pour le menu des 2 sites par exemple ?)

Pas possible, vu que j'ai fait un copier/coller du site 1 sur le site 2.

[Pytet]

D'après les tests, http://localhost/site1/styles/menu.css retourne bien le fichier css mais http://localhost/site2/styles/menu.css retourne une page html.
Tu as le même problème avec les autres href ou src de ta page (les autres fichiers css, les fichiers js, les images...) ou uniquement avec ce fichier css ?

Les 2 sites sont en local avec le même environnement de développement ? Un WampServer (Apache+PHP) ou similaire ?
La configuration du serveur web est-elle identique pour les 2 sites ? Une éventuelle réécriture d'url (dans un .htaccess ou la config du vhosts avec Apache) ?

[laurentSc]

Je répondrais à tes questions plus tard (pas dispo tout de suite) mais quand tu as posté, j'étais en train d'écrire :

Constatation surprenante, qui me permet de travailler mais qui me dérange.

Je travaille en local pour mettre au point une modification mais le site (pas écrit par moi) existe et est en ligne : https://qi98.legtux.org/.

Et si je mets des adresses absolues dans le head (par exemple : <link rel="stylesheet" type="text/css" href="https://qi98.legtux.org/styles/menu.css" media="screen"> à la place de <link rel="stylesheet" type="text/css" href="styles/menu.css" media="screen">), ça fonctionne. Pourquoi ?

[laurentSc]

En voulant te répondre, j'ai observé une différence entre les 2 virtualhosts et en tripatouillant (j'y connais pas grand chose), j'ai résolu le problème ! Mais honnêtement, je comprend pas. Si demain, ça marche encore, je cocherai

[laurentSc]

Merci Pytet de m'avoir mis sur la piste du virtualhost...

Hier soir, je croyais avoir résolu le pb, mais ce matin, il a de nouveau fallu que je retouche au virtualhost (dont je ne suis pas l'auteur). Je crois avoir trouvé une solution, mais comme elle m'étonne, avant de cocher , je souhaite que tu m'expliques.
Avant, le virtualhost était :

Code apache :

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
<VirtualHost *:80>
    DocumentRoot "C:/projets/jlb59/"
	ServerName dev.jlb59.fr
    ErrorLog "logs/jlb59_errors.log"
    CustomLog "logs/jlb59_access.log" common
	RewriteEngine on
	RewriteCond %{REQUEST_URI} /(index)(\..{3,4})?$ [NC]
	RewriteRule ^.* /index.php [QSA,L]
	RewriteCond %{REQUEST_URI} !^/assets/.*$
	RewriteRule . /index.php [QSA,L]	
 
	<Directory "C:/projets/jlb59/">
		Options Indexes Includes FollowSymLinks MultiViews
		AllowOverride None
		Require all granted
	</Directory>
</VirtualHost>

Pour que ça fonctionne, j'ai commenté la ligne 9 :

Code apache :

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
<VirtualHost *:80>
    DocumentRoot "C:/projets/jlb59/"
	ServerName dev.jlb59.fr
    ErrorLog "logs/jlb59_errors.log"
    CustomLog "logs/jlb59_access.log" common
	RewriteEngine on
	RewriteCond %{REQUEST_URI} /(index)(\..{3,4})?$ [NC]
	RewriteRule ^.* /index.php [QSA,L]
	#RewriteCond %{REQUEST_URI} !^/assets/.*$
	RewriteRule . /index.php [QSA,L]	
 
	<Directory "C:/projets/jlb59/">
		Options Indexes Includes FollowSymLinks MultiViews
		AllowOverride None
		Require all granted
	</Directory>
</VirtualHost>

Cela résoud le pb ; je ne sais pas ce que fait cette ligne mais je précise qu'il n'existe pas de répertoire assets, les fichiers css sont dans le répertoire styles.

[laurentSc]

J'ai bien fait de ne pas cocher vu que ça ne l'est pas. Je ne comprend pas mais pour que ça accède aux fichiers CSS, je suis obligé de faire avec des adresses absolues comme indiqué au post 5.

Du coup, je répond à tes questions :

Tu as le même problème avec les autres href ou src de ta page (les autres fichiers css, les fichiers js, les images...) ou uniquement avec ce fichier css ?

oui, je l'ai constaté pour des images...et même solution que pour les fichiers CSS : je mets l'adresse absolue du fichier en ligne.

Les 2 sites sont en local avec le même environnement de développement ?

oui

La configuration du serveur web est-elle identique pour les 2 sites ? Une éventuelle réécriture d'url (dans un .htaccess ou la config du vhosts avec Apache) ?

Merci de me dire s'il y a un souci dans le virtualhost (donné au post 7). Je n'en suis pas l'auteur et m'y connais peu...

[Pytet]

Pour comprendre pourquoi ca fonctionne sur le site 1 mais pas le site 2, as-tu un dossier assets pour le site 1 (renommé en styles pour le site 2) ?

Les lignes 9 et 10 de ton vhosts correspondent à une règle de réécriture d'url : cette règle indique que toutes les requêtes http qui ne commencent pas par ndd.com/assets/ doivent être réécrite en ndd.com/index.php
Avec cette règle, l'url http://ndd.com/styles/menu.css est donc réécrite en http://ndd.com/index.php, ce qui explique pourquoi ton fichier css n'est pas retourné correctement par le serveur.
L'url http://ndd.com/assets/menu.css n'est pas contre pas réécrite avec cette règle.

La correction avec l'url absolue doit fonctionner en local si tu utilises un sous-dossier pour héberger ton site (avec par exemple une url sous la forme http://localhost/site2/styles/menu.css car celle-ci ne valide pas la règle de réécriture) mais le problème risque de se reproduire lors de la mise en ligne.

Pour info, tu peux utiliser des outils en ligne tel que https://htaccess.madewithlove.com/ ou https://technicalseo.com/tools/htaccess/ pour tester les règles de réécriture de ton fichier .htaccess

Pour corriger la règle de réécriture par rapport au site 2 avec son dossier styles, tu devrais simplement pouvoir changer la RewriteCond à la ligne 9, en supposant que toutes les ressources publiques de ton site (css, js, images...) soient dans ce dossier :

Code :

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

1
2
    RewriteCond %{REQUEST_URI} !^/styles/.*$
    RewriteRule . /index.php [QSA,L]

Une autre solution est d'utiliser une RewriteCond avec le paramètre %{REQUEST_FILENAME} à la place de ta RewriteCond actuelle à la ligne 9 :

Code :

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

1
2
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule . /index.php [QSA,L]

Cette règle permet de faire une réécriture d'url uniquement si la requête http ne correspond pas à un fichier existant. Si le fichier existe, l'url ne sera pas réécrite et le serveur va retourner le fichier demandé.

[laurentSc]

Pour comprendre pourquoi ca fonctionne sur le site 1 mais pas le site 2, as-tu un dossier assets pour le site 1 (renommé en styles pour le site 2) ?

non, ce sont parfaitement des codes identiques.

Avec cette règle, l'url http://ndd.com/styles/menu.css est donc réécrite en http://ndd.com/index.php, ce qui explique pourquoi ton fichier css n'est pas retourné correctement par le serveur.
L'url http://ndd.com/assets/menu.css n'est pas contre pas réécrite avec cette règle.

OK, mais logiquement, ça devrait aussi être le cas pour le site 1.

Pour info, tu peux utiliser des outils en ligne tel que https://htaccess.madewithlove.com/ ou https://technicalseo.com/tools/htaccess/ pour tester les règles de réécriture de ton fichier .htaccess

Le premier site génère une erreur interne et le deuxième, sablier interminable...

en supposant que toutes les ressources publiques de ton site (css, js, images...) soient dans ce dossier

mais ce n'est pas le cas. Voici l'arborescence :

styles <!-- dossier des fichiers CSS -->
images <!-- dossier des fichiers image -->
scripts <!-- dossier des fichiers JS -->

Cette règle permet de faire une réécriture d'url uniquement si la requête http ne correspond pas à un fichier existant. Si le fichier existe, l'url ne sera pas réécrite et le serveur va retourner le fichier demandé.

Ca serait bien si ça marchait mais ce n'est pas le cas