Utilisation du modèle de GRID

**simooon** · 15/12/2023, 16h41

Bonjour à tous.
J'essaie de realiser ma 1ere page web en html/css que je souhaite organiser à l'aide des GRID.
Pour commencer, j'ai essayé de reproduire le style de la bannière suivante :
Nom : grid.PNG
Affichages : 312
Taille : 14,6 Ko

Nom : grid.PNG
Affichages : 312
Taille : 14,6 Ko

Malheureusement, je n'arrive pas du tout à agencer les différents blocs et malgré mes recherches sur le net, je n'y arrive pas! Besoin d'aide pour comprendre pourquoi svp

HTML

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="../css/acceuil.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=Signika&display=swap" rel="stylesheet">
</head>
 
<body>
 
    <!-- ######### HEADER ######### -->
    <header>
        <div class="header">
            <div class="img">
                <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855" alt="logo">
            </div>
            <div class="haut">
                <a href="test.html">
                    Documentations/Guides techniques
                </a>
            </div>
            <div class="bas1">
                <a href="#">
                    TEST1
                </a>
            </div>
            <div class="bas2">
                <a href="2.html">
                    TEST2
                </a>
            </div>  
        </div>
    </header> 
 
</body>
</html>

CSS

Code :

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
header .header {
 
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 5px;
}
 
header .img {
    grid-column: 1/2;
    grid-row: 1/2;
}
 
header .haut {
    grid-column: 3/4;
    grid-row: 1/1;
}
 
header .bas1 {
    grid-column: 3/4;
    grid-row: 2/2;
}
 
header .bas2 {
    grid-column: 4/5;
    grid-row: 2/2;
}

**unanonyme** · 15/12/2023, 20h46

Bonjour,

Votre sélecteur ne résout rien "header div .header ".

"header .header" peut être.

header .header c'est pas terrible.

acceuil c'est pas terrible non plus.

Finalement, c'est bien d'avoir poster le code, mais quand je le reproduis ici, c'est très loin de votre image. Trop loin.

Ce n'est pas normal.

Bonne journée.

**simooon** · 15/12/2023, 21h57

Merci pour cette très grande aide, sans aucune explications sur mes erreurs. Pourquoi avoir pris la peine d'écrire si l'envie d'aider n'y ai pas ?

J'espère avoir de la vraie et sincère aide

**unanonyme** · 15/12/2023, 22h01

Bonjour,

moi j'estime que c'était sincère.
Peut être pas à la hauteur de vos attentes,
à mon corps défendant,
vous n'en faites pas mentions,
de vos attentes.

Bonne journée.

**laurentSc** · 15/12/2023, 22h08

Bonsoir,
pas le temps de regarder ni compétent pour t'aider, simplement, j'ai récupéré récemment un guide sur le CSS avec grid qui peut peut-être t'aider : https://css-tricks.com/snippets/css/...te-guide-grid/

C'est justement unanonyme qui m'a signalé ce lien !

**unanonyme** · 15/12/2023, 22h54

Bonjour,

c'est pas très sympa de me faire passer pour un con
en éditant votre message initial après coup,
m'enfin bref, voilà une astuce pour vous aider,
pour le reste je m'arroge le droit de vous le dire clairement,
démerdez vous.

https://firefox-source-docs.mozilla....uts/index.html

D'autres le liront et trouveront cela utile.

Bonne journée.

**simooon** · 16/12/2023, 00h28

@unanonyme

heu... ce message devait précéder l’édit de mon post, dommage que vous l'ayez mal pris car je voulais en même temps vous remercier pour cela...

Avec vos remarques et après recherche, j'ai donc compris que j'utilisais mal les syntaxes css, après légère modification, les blocks s'agencent donc bien.

Merci pour le lien quand même, j'espère pouvoir trouver par la suite comment centrer le texte en plein milieu des block.

**ProgElecT** · 16/12/2023, 09h12

Salut

text-align: center;.

Ce lien pour centrer en horizontal et/ou vertical https://www.w3schools.com/css/css_align.asp

**laurentSc** · 17/12/2023, 15h20

Bonjour,
j'ai essayé de me rapprocher un peu de la mise en page présentée au post #1.
J'ai tenu compte de la proposition de ProgElecT, et voici :

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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link href="accueil.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=Signika&display=swap" rel="stylesheet">
    </head>
 
    <body>
 
    <!-- ######### HEADER ######### -->
    <header>
        <div>
            <div class="img cell">
                <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855" width="150" alt="logo">
            </div>
 
            <div class="haut cell padding">
                <a href="test.html">
                    Documentations/Guides techniques
                </a>
            </div>
            <div class="bas1 cell padding">
                <a href="#">
                    TEST1
                </a>
            </div>
            <div class="bas2 cell padding">
                <a href="2.html">
                    TEST2
                </a>
            </div>
        </div>
    </header>
    </body>
    </html>

Code css :

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
header div .header {
 
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 5px;
}
 
header .img img {
    grid-column: 1/2;
    grid-row: 1/2;
}
 
header div .haut {
    grid-column: 3/4;
    grid-row: 1/1;
}
 
header div .bas1 {
    grid-column: 3/4;
    grid-row: 2/2;
}
 
header div .bas2 {
    grid-column: 4/5;
    grid-row: 2/2;
}
 
header div .cell, header{
    text-align: center;
    display: inline-block;
}
 
header div .padding {
padding: 30px;
}

https://codepen.io/laurentsch/pen/bGzXegZ
C'est pas nickel mais on se rapproche...

EDIT : en plus, si on enlève le text-align: center;, ça change rien.

**laurentSc** · 18/12/2023, 23h09

Je me couche

À demain

**unanonyme** · 19/12/2023, 09h21

Bonjour,

mode rienàfoutre j'y passe pas une semaine

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<style>
                body{
                        margin:0;background-color: rgb(231, 234, 236);
                        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                }
                main{width:1200px;margin:auto;background-color: white;position:relative;}
                .header{
                        background-image: url("grid.PNG");background-repeat: no-repeat;
                        width: 100%;
                }
                .header .fullwidth{
                width: 100%;
                        vertical-align: top;
                }
                .header .docs{
                        padding-left: 20px;
                        
                }
                .header .nav{
                        padding-left: 12px;padding-top: 4px;
                }
                .header .nav tr td{  position: relative;}
                .header .links a{
                        text-transform: uppercase;
                        text-decoration: none;
                        padding-right: 33px;
                        font-weight: bold;
                        letter-spacing: 1px;
                        color: #17428c;
                }
                .header .links span{
                        position: absolute;
                        bottom: 9px;
                        left: 0;
                        display: inline-block;
                        width: 30px;
                        height: 1px;
                        background-color: #17428c;
                }
                .header .contact{
                        background-color: #00838e;
                }
                .header .contact{
                        display: inline-flex;
                        align-items:center;
                        padding: 8px 12px 8px 12px;
                }
                .header .contact a{
                        text-transform: unset;
                        color: white;
                        text-decoration: none;
                        font-size: larger;
                        letter-spacing: 1px;
                }
                .header .nav2{
                        margin-left: 50px;text-align: right;
                }
                .header .nav2 .search{
                        margin: 0px;
                        padding: 0px;
                        border: none;
                        background-color: #f5f6fa;
                        padding: 3px 10px 5px 10px;
                }
                .header .nav2 .search img{
                        width: 40px;
                }
                .header table{width: 100%;}
        </style>
</head>
<body>
	<main>
		<table class="header">
			<tr>
				<td>
					<img src="debut_53876-25533.avif" class="logo" />
				</td>
				<td class="fullwidth">
					<table>
						<tr>
							<td class="docs">
								Documentations
							</td>
						</tr>
						<tr>
							<td>
								<table class="nav">
									<tr>
										<td class="links">
											<a href="#">Produits</a>
											<span></span>
										</td>
										<td class="links">
											<a href="#">Marchés</a>
											<span></span>
										</td>
										<td class="links">
											<a href="#">service</a>
											<span></span>
										</td>
										<td class="links">
											<a href="#">groupe</a>
											<span></span>
										</td>
										<td>
											<div class="nav2">
												<div class="contact">
													<img src="icon.png" />
													<a href="#">Contactez-nous</a>
												</div>
												<button class="search"><img src="loupe.png" /></button>
											</div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</main>
</body>
</html>

Bonne journée.

**Dave Hiock** · 19/12/2023, 11h45

\ô/

mode rienàfoutre

t'es plutôt en mode je m'emmerde alors je viens pourrir votre discussion.

Laisse les gens qui ont envie d'apprendre des choses nouvelles les apprendre, ce que visiblement tu devrais faire également et comme tu n'es pas à une contradiction prête on appréciera ton

Code :

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

1
2
3
4
5
.header .contact {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px 8px 12px;
}

dans un enchevêtrement de <table>, tu as raté l'occasion de mettre une <table> de plus.

L'impression globale qui en ressort est que tu es pitoyable dans la plupart de tes réponses !

**unanonyme** · 19/12/2023, 11h57

Bonjour,

Et pourtant, je pense que certains feraient bien de s'en inspirer.

Les grids, ne sortent pas de nulle part et fournissent une logique d'implémentation qui existait déjà avant.

Bonne journée.

**NoSmoking** · 19/12/2023, 18h21

<reponse_a_troll>

Envoyé par unanonyme

Et pourtant, je pense que certains feraient bien de s'en inspirer.

s'inspirer de quoi de ton infâme bouilli de code ?

Savais-tu que même au siècle dernier on était capable de faire des entêtes avec ce rendu et ce sans utilisation de <table>.

Juste avec cela on y arrive sans peine :

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
<div class="entete">
  <img class="logo" src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg">
  <p>Documentations Guides techniques</p>
  <ul class="contact">
    <li><a href="#">Contactez-nous</a>
    <li><button class="search">🔍</button>
  </ul>
  <ul class="links">
    <li><a href="#">Produits</a>
    <li><a href="#">Marchés
    <li><a href="#">Service</a>
    <li><a href="#">Groupe</a>
  </ul>
</div>

.. reste à trouver le CSS qui va bien mais je te fais confiance

Envoyé par unanonyme

Les grids, ne sortent pas de nulle part et fournissent une logique d'implémentation qui existait déjà avant.

Comme cette phrase est belle même si elle ne signifie pas grand chose.

</reponse_a_troll>

Pour en revenir à ce qui ont envie d'avancer

Tu n'es pas obligé de déclarer des grid-column/grid-row pour tous tes éléments mais uniquement pour ceux dont tu as le besoin. Les suivants se replaceront naturellement dans le « flux » du layout GRID.

Donc pour :

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
<header>
    <div class="logo">
        <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg"
             alt="logo">
    </div>
    <div class="doc">
        <a href="test.html">Documentations/Guides techniques</a>
    </div>
    <div>
        <a href="#">TEST1</a>
    </div>
    <div>
        <a href="2.html">TEST2</a>
    </div>
    <div>
        <a href="3.html">TEST3</a>
    </div>
</header>

il te suffit de définir les règles suivantes :

Code css :

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
header {
  display: grid;
  grid-template-columns: 150px repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 1em;
  align-items: center;
}
.logo {
  /*--
  grid-row-start: 1;
  grid-row-end: last;
  /*--*/
  grid-row: 1 / last;
}
.logo img {
  width: 150px;
  display: block;
}
.doc {
  /*--
  grid-column-start: 2;
  grid-column-end: last;
  /*--*/
  grid-column: 2 / last;
}

Nota:

grid-template-columns: 150px repeat(4, 1fr); la 1st colonne fait 150px suivi de 4 colonnes qui se partagent l'espace restant à part égale, inutile dans déclarer de trop.
last(ou -1) remplace avantageusement l'index de la « dernière colonne/ligne », si on modifie le nombre de colonnes/lignes cette valeur vaudra toujours le dernier emplacement.
Plusieurs écritures cohabitent, il ne faut hésiter à utiliser celle qui vous convient le mieux.

Utilisation du modèle de GRID

Grille CSS (CSS Grid)

Vue hybride

Discussions similaires

Partager

Partager