Rendu GRID incorrect

**markham** · 05/04/2021, 18h17

Bonjour,

les couleurs ne remplissent pas les bonnes case de ma grid pourquoi ? (il sont tous dans l’entête)

mon code :

Code html :

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>test page</title>
<style type='text/css'>
body	{
		margin: 0;
		padding: 0;
		}
 
.container{
		height: 100vh;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-template-rows: 1fr 1fr 8fr 1fr; 
		grid-template-areas:
		"entete entete entete"
		"logobar logobar logobar"
		"contenu contenu contenu"
		"pied pied pied"
		;
 
}
 
.entete{
		grid-area: entete;
		background-color: #0073a5;
		}
 
.logobar{
		grid-area: logobar;
		background-color: red;		
		}
.contenu{
		grid-area:contenu;
		background-color: yellow;		
		}
 
.pied	{	
		grid-area:pied;
		background-color: green;
		}
 
 
</style>
    </head>
    <body>
		<div class="container">
 
		<div class="entete">entete</div>
		<div class="logobar">logo<div>
		<div class="contenu">contenu</div>
		<div class="pied">pied</div>
 
	</div>
</body>
 
</html>

Merci

**mathieu** · 05/04/2021, 20h06

avec votre code, je vois cela :
Nom : Capture du 2021-04-05 20-04-39.png
Affichages : 72
Taille : 2,8 Ko

quel résultat cherchez-vous à produire ?

**NoSmoking** · 07/04/2021, 09h57

Bonjour,
faute de frappe ou de copier/mal coller ?

Code html :

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

<div class="logobar">logo<div> <!-- manque balise fermante -->

devrait être

Code html :

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

<div class="logobar">logo</div>

• Au passage

Code html :

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

1
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>