18008 sujets

Questions générales et questions de débutants

Problème avec wampserver ?

Bonjour à vous tous,

J'ai un souci. Ce matin, j'ai voulu continuer mon travail et je ne peux plus rien changer dans mon code CSS. J'ai beau, par exemple, changer la couleur de fond en rouge, elle n'est pas prise en compte. Pourtant, hier tout fonctionnait bien. C'est juste ce matin, j'allume l'ordinateur et impossible de changer quoi que se soit dans la CSS. Quand j'ajoute quelque chose dans le code HTML, là ça fonctionne. Je me suis assuré que j'ai bien lancé wampserver, j'ai même redémarré l'ordinateur et rien n'y fait. J'ai vérifié la ligne de code <link> qui appelle la feuille de style et elle est correcte.

Vous savez d'où cela peut venir ?
Merci pour votre aide.

Voici mon code HTML :

<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link href="styles.css" type="text/css" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap" rel="stylesheet">
	<title>Devoir 2, développer en PHP</title>
</head>
<body>
	<div class="cartouche">
		<article>
			<img src="img/2022/blacklight.jpg" alt="Affiche du film Blacklight" title="Affiche de film">
			<p id="annee" class="annee">2022</p>
			<p id="titre_film" class="titre_film">Blacklight</p>
			<p class="genre">jkqdhgkjqhgkjq</p>
		</article>
	</div>
</body>
</html>

Voici mon code CSS :

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	font-size: 100%;
}

body{
	font-family: 'Source Sans Pro', sans-serif;
	background-color: #e0861a;
	font-size: 0.8em;
}

.cartouche{
	background-color: #f5f5f5;
	width: 240px;
	border: 2px solid #fff;
}

.annee{
	background-color: #006e7d;
	padding: 10px;
	font-weight: 300;
	font-size: 0.9em;
	color: #fff;
	border-radius: 5px;
	line-height: 10px;
	position: absolute;
	top: 320px;
	left: 184px;
}

.titre_film{
	font-weight: 600;
	font-size: 1em;
	color: #3b3559;
}

.genre{
	font-size: 1em;
}

Modifié par ObiJuanKenobi (26 Apr 2022 - 07:05)
Modérateur
Salut,

Quand ca me fait ça, 90% du temps c'est que je regarde pas la bonne url (la prod ou la dev au lieu du local).

C'est ptetre une histoire de cache sinon...

Tente de virer complètement le CSS pour voir si ca le fait réagir.
Bonjour,

pour voir si le bon fichier est appelé, tu peux utiliser les outils développeurs du navigateur (F12 sur firefox), ou click droit sur la page et choisir "inspecter".
Puis dans l'onglet réseau, regarde l'appel de ton css (Raffraichis la page si tu ne vois pas l'appel du css) en cliquant sur la ligne appelant style.css, et clique ensuite sur l'onglet "réponse" qui t'affichera la réponse retournée par le serveur.

Pour voir s'il s'agit d'un problème de cache, appelle style.css en écrivant 
<link href="style.css?toto" type="text/css" rel="stylesheet">

Et change le paramètre à chaque fois que tu rafraîchis la page. (si tu travailles en php, mets un timestamp au lieu de toto, comme ça, ça se rafraîchis tout seul).
J'ai vidé le cache et rien ne change. J'ai créé un nouveau fichier CSS, en donnant le nom test.css, j'ai placé la déclaration background-color: red; en ciblant le sélecteur <body> et là ça marche, le fond de la page devient rouge. Mais quand je reviens à l'ancien nom de fichier styles.css, rebelote, aucun de mes changements n'est pris en compte. J'ai vérifié et revérifié le lien <link> et il est correct (nom de fichier + extension + chemin). De toutes façons, la création de ce fichier date de lundi matin et tout fonctionnait parfaitement à ce moment là. J'ai pu placer plusieurs déclarations et si le lien <link> était erroné, je l'aurai vu tout de suite puisque aucune déclaration ne serait prise en compte.

J'ai viré la ligne <link> et il réagit. Plus de couleur de fond, plus de police de caractère, plus aucun style n'est appliqué. J'ai aussi changé le nom du fichier CSS en lui supprimant un caractère (passer de styles.css à style.css, sans "s"). Cela réagit aussi, plus aucun style n'est appliqué. Mais dès que je remet le bon fichier CSS et que je tente de modifier par exemple une taille de caractère de 0.8em à 5em, le changement n'est pas pris en compte. Pourtant 5em c'est une taille de 500 % par rapport à la taille de base et cela se voit tout de suite à l'écran. Mais non, rien ne change !

J'ai pris rendez-vous par téléphone avec le formateur, demain, mercredi, à 14 heures. Il prendra la main à distance sur mon ordinateur et regardera d'où vient le problème. De mon côté, je ne suis pas suffisamment calé pour résoudre ce genre de souci. Je ne suis que débutant en PHP et en règle générale je suis également débutant dans le web.

Merci d'avoir essayé de m'aider.
Modifié par ObiJuanKenobi (26 Apr 2022 - 17:06)
Bonjour ObiJuanKenobi,

Il peut y avoir des problèmes de priorité. C'est à dire si tu as ce HTML :

<body class="maClasse">
</body>


Avec ce CSS :

body {
    background-color: red;
}

.maClasse {
    background-color: blue;
}


Et que ca ne prend pas la bonne couleur en compte pense à tester ça :

body {
    background-color: red;
}

.maClasse {
    background-color: blue !important;
}

Modifié par BaldFox (26 Apr 2022 - 17:33)
Merci BaldFox pour ta réponse mais je ne pense pas que le problème vient d'une priorité. Hier, quand j'ai créé les fichiers HTML et CSS, tout fonctionnait bien. C'est seulement ce matin où plus aucune modification n'est prise en compte. Et entre temps, je n'ai rien fait de particulier.

La couleur de fond que j'ai créé hier est le orange. Mais ce matin j'ai voulu la changer, en mettant par exemple du rouge, mais impossible. Aucun changement n'est pris en compte. Pareil, si je veux augmenter la taille des caractères, impossible.

Si c'est une histoire de priorité, pourquoi hier cela fonctionnait et ce matin cela ne fonctionne plus en sachant que les deux fichiers n'ont pas changé ?
Modérateur
Bonjour,

Il y a un sujet similaire au tien ici ou est aussi evoqué ce que @loicbn te proposé à propos d'un timestamp (si tu est bien sur d’éditer le bon fichier) : https://forum.alsacreations.com/topic-4-89383-1.html

@laurent évoques aussi un truc tout bête qui peut arriver à tout le monde, c'est éditer un fichier du même nom, dans un répertoire du même nom mais pas dans le même répertoire racine que celui que tu pense modifier.




en js pour ajouter un timestamp, je proposais ce script à ajouter après ton contenu:
<script>
let cssURLs = document.querySelectorAll('link[rel="stylesheet"]');
let now =  Date.now();
for (i = 0; i < cssURLs.length; i++) {
  cssurl = cssURLs[i].getAttribute('href');
  cssURLs[i].setAttribute('href', cssurl + '?t=' + now);
}
</script>


Sinon, si ta page est en php, tu peut aussi faire 
<link href="styles.css<?php echo'?t='.time() ?>" type="text/css" rel="stylesheet">


Si avec l'un ou l'autre, cela ne fonctionne toujours pas, c'est que tu est surement en train d’éditer un autre fichier que celui chargé par ta page.

Cdt
Modifié par gcyrillus (26 Apr 2022 - 19:31)
Meilleure solution
a écrit :

@laurent évoques aussi un truc tout bête qui peut arriver à tout le monde, c'est éditer un fichier du même nom, dans un répertoire du même nom mais pas dans le même répertoire racine que celui que tu pense modifier.

Merci gcyrillus, c'était ça le problème !!!!! Effectivement, j'ai un autre fichier styles.css dans un autre dossier de nom différent, provenant du devoir1, alors que maintenant je suis dans le dossier devoir2. Apparemment, le navigateur a décidé de garder l'ancien chemin. J'ai donc renommé le fichier en styles2.css et tout est rentré dans l'ordre.

Cependant, cela n'explique pas pourquoi hier tout fonctionnait bien. Le navigateur utilisait le nouveau chemin pour appeler la feuille de styles (dans le dossier "devoir2") et soudain ce matin il décide de prendre l'ancien chemin (dans le dossier devoir1). Pourquoi le navigateur a décidé ça ? Serait-il un peut intelligent et espiègle ? Y aurait-il de l'IA dans le navigateur Chrome ? Google chercherait-il à doter son navigateur fétiche de pulsions intelligentes pour tourner en bourrique les utilisateurs ?

Du coup, demain matin j'annulerai le rendez-vous de 14 heures avec le formateur vu que le souci est réglé. Merci encore une fois, le magicien gcyrillus !
Modifié par ObiJuanKenobi (26 Apr 2022 - 20:44)
Modérateur
ObiJuanKenobi a écrit :

Cependant, cela n'explique pas pourquoi hier tout fonctionnait bien. Le navigateur utilisait le nouveau chemin pour appeler la feuille de styles (dans le dossier "devoir2") et soudain ce matin il décide de prendre l'ancien chemin (dans le dossier devoir1). Pourquoi le navigateur a décidé ça ? Serait-il un peut intelligent et espiègle ? Y aurait-il de l'IA dans le navigateur Chrome ? Google chercherait-il à doter son navigateur fétiche de pulsions intelligentes pour tourner en bourrique les utilisateurs ?


Bah en fait je ne crois pas qu'il y est d'IA impliqué, ou alors il faut tout de suite laisser tombé le script qui se prend pour une IA, , c'est totalement foireux !

Je crois plutôt qu'il peut s'agir de tentative d'optimisation dans les navigateur et aussi les script pour les serveurs penser comme des pieds d'unijambistes. Dans ton apprentissage, tu vas faire face à d'autre situation similaire, ... un htaccess qui n'existe plus mais toujours appliqué malgré un redémarrage du serveur , puis du pc , un script js modifié mais pas rechargé par le navigateur(ou serveur ?, bah oui, tu change ou installe un nouveau navigateur et pareil!! donc ça doit venir du serveur ) qui ne prends pas en compte les modifs, un fichier chargée en AJAX qui n'est jamais mis à jour malgré de multiples modifs, bon la feuille de style ... tu as déjà vu. Si le timestamp aide, il ne suffit pas toujours. Il y a aussi les plugin des navigateur et les fonctions des OS et navigateurs peut-être solliciter en cas de crise qui se télescopent avec le fonctionnement normal. Bref, tout cela est bien mystérieux Smiley cligne

En final , ces c@nnrHie sont chronophages car pas ou peut documentées.
Modifié par gcyrillus (26 Apr 2022 - 21:09)
Je ne connais pas les problèmes que tu listes. Certainement qu'un jour je serai confronté à ces difficultés.

Tu m'avais donné précédemment un code en Javascript pour le timestamp. Mais je ne connais pas du tout le Javascript, je commencerai à l'apprendre dans le cours suivant, après le PHP. C'est pour ça que je ne l'ai pas testé. Je sais juste que le Javascript sert à dynamiser une page web et cela s'arrête là. Qu'est-ce cela signifie, dynamiser une page web ?
Modérateur
ObiJuanKenobi a écrit :
Je sais juste que le Javascript sert à dynamiser une page web et cela s'arrête là. Qu'est-ce cela signifie, dynamiser une page web ?


Ah désolé, j’oublie que tu est en plein apprentissage et que tout est presque nouveau. Smiley smile

Cela est par exemple,
* afficher la date ,
* faire un calcul
* vérifier des champs de formulaire
* modifier des styles à la volée (menu déroulant, messages, galerie, ...)
* et bien plus encore

HTML et CSS t'affichent un contenu mis en forme, mais statique, ce ne sont pas des langages de programmation.
JavaScript est un langage de programmation et permet une interaction avec le contenu et le visiteur. Des variables peuvent être récoltées et stockées en mémoire puis réutilisées ou modifiées dans des fonctions pendant la durée de l'affichage de la page. Par exemple : une calculatrice, lancer un chronomètre , dessiner un graphique, une liste de choix interactive , etc ...

Bonne journée
Prévenir un modérateur
Répondre au sujet
Aller à