Utilisation du modèle de GRID

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

**laurentSc** · 19/12/2023, 18h22

Envoyé par simooon

Documentation devait être placé au dessus des autres menus

Documentations/Guides techniques, non ? Si c'est bien ça, ton code va bien, même si je crois qu'on peut simplifier mais pas le temps tout de suite de détailler.

**Dave Hiock** · 20/12/2023, 19h04

Envoyé par NoSmoking

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

j'entrevois une solution sur base de float et d' inline-block !

Utilisation du modèle de GRID

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager