Pourquoi le CSS n'est pas appliqué ?

Version imprimable

01/08/2024, 15h16
laurentSc

Pourquoi le CSS n'est pas appliqué ?
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"> ,
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:

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 ?
01/08/2024, 16h47
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 ?).
01/08/2024, 17h38
laurentSc

Citation:

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

oui

Citation:

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

Citation:

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.

Citation:

(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.
01/08/2024, 19h12
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) ?
01/08/2024, 19h45
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 ?
01/08/2024, 23h46
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 :resolu:

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 :resolu:, je souhaite que tu m'expliques.
Avant, le virtualhost était :
Code:

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:

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.

02/08/2024, 14h27
laurentSc

J'ai bien fait de ne pas cocher :resolu: 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 :

Citation:

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.

Citation:

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

oui

Citation:

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...
02/08/2024, 15h24
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:

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:

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é.
02/08/2024, 17h33
laurentSc
Citation:

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.

Citation:

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.

Citation:

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...

Citation:

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 
images 
scripts 
```
Citation:

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 :(