Live Server (VS Code) renvoi une page blanche ?

18 décembre 2023 à 17:59:48

Bonjour à tous

Je préviens à l'avance, je débute avec HTML/CSS. Je faisais justement un exercice pour CSS Grid, mais pour la première fois, j'ai une page blanche qui s'affiche avec Live Server. Je n'ai pas l'impression qu'il manque quelque chose dans mon code, j'ai essayé de recharger le dossier dans VS Code, je sèche un peu. Quelqu'un peut m'éclairer ?

Merci d'avance à ceux qui m'aideront.

Mon code HTML :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Cartes grid</title>
</head>

<body>
<div class="container">
  <div class="autre"></div>
  <div class="image"></div>
  <div class="banniere"></div>
  <div class="coeur"></div>
  <div class="label"></div>
  <div class="content"></div>
</div>
</body>

</html>

Mon code CSS :

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  background-color: black;
  grid-template-columns: 10% 23% 66%;
  grid-template-rows: 5% 8% 53% 33%;
  grid-template-areas:
        "autre image image"
        "banniere banniere image"
        "autre image image"
        "autre label content";
}

.autre {
  grid-area: autre;
  background-color: white;
}

.image {
  grid-area: image;
  background: url(/src/image.jpg);
}

.banniere {
  grid-area: banniere;
  background-color: rgb(84, 160, 236);
}

.label {
  grid-area: label;
  background-color: rgb(84, 160, 236);
}

.content {
  grid-area: content;
  background-color: red;
}

Domi65

18 décembre 2023 à 21:04:09

Page blanche, oui mais le code HTLM est-il bien là ? (CTRL + U pour le visualiser)

Tu n'as aucun texte et tes divs n'ont pas de hauteur définie. Qu'espères-tu voir ? ;-)

Par ailleurs, les outils de dev signalent :

« Erreur d’analyse de la valeur pour « grid-template-areas ». Déclaration abandonnée. »

Cordialement.

-
Edité par Domi65 19 décembre 2023 à 17:25:52

AdamChaveneau

18 décembre 2023 à 21:31:28

Bonsoir

En faisant CTRL U, le code HTML a l'air d'apparaître mais il y a un script d'erreur (je pense ?) qui se rajoute visiblement. Je joins la photo.

J'ai rajouté des hauteurs à tous mes éléments, rien ne change. La page est blanche, le seul truc qui apparait c'est la div ".contenu" en bas à droite. Je joins aussi la photo.

J'ai essayé de retoucher aux valeurs de "grid-template-areas", en mettant plutôt des pixels, en réduisant, en augmentant, rien n'y fait. Je n'arrive pas à comprendre ce qui coince, j'ai fais juste avant un peu le même genre d'exercice avec un modèle de grille en Grid CSS et tout a bien fonctionné.

Merci de ton aide

Erreur code ?

(détail : le rectangle en bas à droite est violet car j'ai remplacé la couleur rouge par du violet pour identifier que c'était bien ça. C'est bien la div .contenu)

-
Edité par AdamChaveneau 18 décembre 2023 à 21:34:43

Domi65

19 décembre 2023 à 17:39:01

Hello !

Comme indiqué dans le code source, le javascript (ce qui est dans une balise script est du JS) est injecté par Live-server. Ce n'est pas un message d'erreur et tu n'as pas à t'en inquiéter.

« J'ai essayé de retoucher aux valeurs de "grid-template-areas", en mettant plutôt des pixels, en réduisant, en augmentant, rien n'y fait. »

Des pixels ?? Je t'invite à revoir cette propriété, ici ou ici.

Cela dit, je ne suis pas rompu aux grilles, je laisserai donc les autres te guider pour la suite.

Bon apprentissage.

AdamChaveneau

19 décembre 2023 à 21:28:55

En fouillant sur le net encore ce matin, j'ai fini par trouver. On ne peut pas avec "grid-template-areas" définir une zone autre que rectangulaire/carré/linéaire, ou même dupliquer un contenu sur plusieurs lignes. C'était mon erreur dans la valeur "grid-template-areas", du coup toute la valeur ne fonctionnait pas, hors mis pour .contenu en bas à droite qui lui était une zone rectangulaire.

Merci Domi d'avoir tenté de m'aider