Positionner le FOOTER en bas de page

**Artemus24** · 06/03/2023, 05h20

Salut à tous.

Je bidouille un peu en html et css, mais je ne maitrise pas trop mon sujet, sauf pour faire des choses simples.

J'aimerai positionner mon pied de page (footer) vis-à-vis de la fenêtre en fonction de la hauteur du corps de ma page (main).

Si le corps de ma page (main) est plus petit que la hauteur de la fenêtre, coller le pied de page (footer) au bas de la fenêtre. Dans le cas contraire, coller le pied de page (footer) au bas du corps de la page (main).

Séparément, je sais le faire, mais pas quand ils sont liés.

Cordialement.
Atemus24.
@+

**NoSmoking** · 06/03/2023, 09h27

Bonjour,
de nos jours on peut faire simple avec le positionnement GRID.

Sur base du HTML de base :

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
<body>
  <header>
    <h1>Titre header</h1>
  </header>
  <main>
    <section>
      <h2>Titre section</h2>
      <p>Texte paragraphe ...</p>
    </section>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</body>

et en appliquant le CSS minimum suivant :

Code :

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

1
2
3
4
5
6
7
8
9
body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* (1fr) la ligne centrale prend la place restante */
  min-height: 100vh;
}
/* juste pour voir les zones */
header  { background-color: #EFD;}
main    { background-color: #DEF;}
footer  { background-color: #FDE;}

**Artemus24** · 06/03/2023, 10h14

Salut NoSmoking.

Bravo pour ton exemple, NoSmoking.

J'ai testé sous WampServer et j'ai même vérifié en appuyant sur la touche F11 de mon clavier.
Le footer reste bien à la même position quand la fenêtre est réajustée. Ca fonctionne parfaitement.

Je connaissais le "min-height" mais pas cette valeur "100vh".
C'est 100% vertical height.

Merci !

Cordialement.
Artemus24.
@+

**Artemus24** · 06/03/2023, 18h48

Salut NoSmoking.

Le sujet n'est pas terminé ! Je ne vois pas pourquoi il devrait être mis à résolu.

Je ne connaissais pas les grid ccs et j'ai donc consulté le net afin de savoir ce qui est possible de faire.
Que ce soit "grid-template-row" ou "grid-template-column", je n'ai rien compris des exemples données sur le net

Je prends comme exemple : "grid-template-columns: repeat(3, 1fr);".
Et cet exemple de positionnement : "grid-column: 1 / 3;".

Or à l'affichage de la boîte, elle est positionnée sur la première ligne mais de la colonne 1 à la colonne 2.
Cela demande quelques explications car je ne trouve pas cela très logique.

Cordialement.
Artemus24.
@+

**mathieu** · 06/03/2023, 20h23

regardez déjà les 2 pages suivantes qui contiennent beaucoup de détails sur l'utilisation possible ainsi que des exemples visuels que je trouve très instructifs :
https://developer.mozilla.org/fr/doc...mplate-columns
https://developer.mozilla.org/fr/doc...SS/grid-column

**Artemus24** · 07/03/2023, 08h36

Salut Mathieu et merci pour ta participation.

Je suis en train de refaire mon site qui par ailleurs est ancien (plus de quinze ans) et les techniques de l'époque ne sont plus trop d'actualité.
Parfois je me servais du javascript, avec l'inconvenient d'avoir un mauvais affichage durant un bref instant.

La solution donnée par NoSmoking fonctionne bien, mais je me suis aperçu que ma façon de faire la mise en page était compliquée.
Une feuille de style par page sans lien avec les autres pages de mon site.
J'ai construit mon site web, en partant d'une première page que j'avais placé dans un répertoire.
Celui-ci contenait le document HTML, la feuille de styles et le script Javascript.
Quand je créais une nouvelle page, je dupliquais le répertoire et je l'adaptais à mes besoins.
J'ajoutais des images, et des exemples pour les utilisateurs, qu'ils pouvaient récupérer chez eux.

D'où l'inconvénient de ne pas retrouver au même endroit, le menu, ou la fameuse balise <footer>, d'une page à l'autre.
Je sais, ce sont des erreurs de débutant dans l'art du HTML et du CSS.

Je me suis plus concentré sur Apache et MySql que sur le HTML et le CSS durant ces dernières années.
Franchement, je ne suis pas du tout doué pour la mise en forme des pages web.

Envoyé par Mathieu

regardez déjà les 2 pages suivantes qui contiennent beaucoup de détails sur l'utilisation possible ainsi que des exemples visuels que je trouve très instructifs :

Je les avais déjà consultées, mais cela ne m'a pas aidées du tout.
Les exemples ne sont pas intuitifs, voire même abscons, en ce qui me concerne.
Je reconnais qu'il y a des exemples, mais aucune explication sur la syntaxe utilisé et le résultat produit. Il faut deviner.

Je ne sais même pas si ces propriétés CSS sont celles dont j'ai besoin pour faire de nouvelles mise en page.

Je désire créer un modèle pour les différents types de mises en page que je vais utiliser.
Disons un modèle fourre tout, pour tous les cas que je vais avoir.
Aller au plus simple. Je ne sais pas si c'est la bonne façon de procéder.

Il y a la balise <header>, prenant toute la largeur de la page, et va contenir le titre de la page, ainsi qu'un menu horizontal sous forme de boutons.
Le titre sera centré en gros caractères, et à droite en plus petits caractères, sur la même ligne, le mois et l'année de la rédaction de la page.
Quand on consulte une page, on ignore sa date de rédaction. C'est pourtant utile de connaitre cela.

Il y a aussi la balise <footer> que je désirais positionner au bas de la fenêtre si le conteneur au centre n'occupait pas la totalité de la hauteur de la page.
Dans le cas contraire, cette balise <footer> serait collée au bas de la page. J'ai repris le code de NoSmocking sans trop me poser de question et ça fonctionne.
Sauf qu'après avoir fait des recherches sur le net, je n'ai rien compris de sa syntaxe.

Au milieu, je vais utiliser la balise <main> qui va me servir de conteneur.
Jusqu'à présent, j'utilisais la propriété CSS "float" pour me positionner à gauche ou à droite à partir d'un conteneur.
Et je faisais un grand usage de la balise <div> avant l'arrivée du html 5.
De même, j'utilisais des tailles en pixels et non en pourcentage.

Depuis le html 5, pour me positionner dans le conteneur, j'utilise les balises :
--> <nav>, à gauche en tant que conteneur de liens.
--> <aside>, à droite, que je redécoupais selon la présentation choisie.

Pas simple de faire une mise en page qui fonctionne parfaitement sur tous les navigateurs.
Depuis, il y a le "responsive web" pour les utilisateurs des smartphones, ce qui complique encore plus la mise en page.
Il y a aussi le redimensionnement des pages en fonction de la taille des écrans d'un PC.
Et je ne parle même pas de l'accessibilité aux malvoyants ou aux daltoniens.
Mon site web doit être accessible à tout le monde, aller au plus simple, avec une présentation minimaliste.

Je cherche avant tout des conseils sur comment bien procéder dans la mise en page selon des normes que je ne maitrise pas.
Je ne suis pas du tout doué pour tout ce qui est esthétique, comme le choix de belles couleurs harmonieuses.
Ce n'est pas mon métier et ce n'est que pour mon site web personnel, rien de plus.
Que de l'HTML et du CSS, pas de Javascript et encore moins du Jquery.

J'avais déjà bidouiller avec le HTML et le CSS au siècle dernier avec l'apparition de l'internet tout publique.
Comme je n'avais pas trop le temps de m'y consacrer sérieusement, j'ai remis cela à bien plus tard.

Je possède le livre de Raphaël Goetter (Alsacréations) "CSS avancées : Vers HTML5 et CSS3" dont j'ai fait l'acquisition à sa sortie en 2012.
Cela m'a aidé pour une meilleur compréhension du HTML et du CSS.
J'ai fait beaucoup d'exercices pour mieux comprendre les propriétés CSS.
J'avais déjà des problèmes dans la mise en forme des pages, surtout avec l'IE 6.0.
Cela fait plus de dix ans que je ne me suis pas remis à faire du web design.

Comment avec le GRID CSS faire de la bonne mise en page ?

J'ai consulté cette page qui me semble un peu plus clair au niveau des exemples.
Mais l'auteur donne des exemples disons cas d'école mais pas de vrais exemples.

J'ai pu découvrir ce que signifiait l'exemple que j'ai donné en consultant cette page.
--> "grid-template-columns: repeat(3, 1fr);".
Le "3" signifie 3 colonnes. pas contre, je n'ai pas compris ce que signifie ce "1fr".
Le "FR" signifie "fractional units". Parfois, je vois "2fr". Je pense que c'est le double du "1fr".
Ainsi "grid-template-columns: 1fr 2fr", cela signifie que le "1fr" a une largeur de 33% et le "2fr" une largeur de 66%.
"grid-template-columns: 1fr 2fr 1fr", le "1fr" a une largeur de 25% et le "2fr" une largeur de 50%".
Ce sont des tailles relatives et elles s'ajustent les unes par rapport aux autres.

J'ai vu aussi un "8ch". Pas trouvé sa signification.

--> "grid-column: 1 / 3". le "1" correspond à "min-width" et le "3" à "min-height".
Vu les exemples, je n'ai pas bien compris comme cela fonctionne.

Désolé pour la longueur, mais je suis un bavard. : )

Cordialement.
Artemus24.
@+

**mathieu** · 07/03/2023, 09h10

Envoyé par Artemus24

Quand je créais une nouvelle page, je dupliquais le répertoire et je l'adaptais à mes besoins.

comme vous avez remarqué, le jour où vous avez 10 pages et que vous voulez faire une modification, la motivation de devoir changer 10 fichiers fini souvent par un arrêt des mises à jour du site.
ce souci se règle avec un langage de programmation comme php, javascript côté serveur (node.js) par exemple. quand on utilise les langages de programmation, le fait de copier-coller quelque chose est un signal qu'il est peut-être plus intéressant de faire une boucle, une fonction ou toute autre technique qui fait qu'il n'y a pas de code en double.

Envoyé par Artemus24

Depuis, il y a le "responsive web" pour les utilisateurs des smartphones, ce qui complique encore plus la mise en page.

pour simplifier je vous conseille de partir sur 2 largeurs d'écran, la 1re largeur est un écran d'ordinateur et la 2e largeur est un écran de téléphone.
à partir de 2 présentations, vous pourrez ensuite faire du code css qui dira "si la largeur est plus grande que 1 500 pixels, faire la 1re présentation et si c'est plus petit faire la 2e présentation". avec ce principe, les utilisateurs de tablette auront les effets responsifs du téléphone mais si vous voulez faire d'autres présentations pour ces utilisateurs, la question est d'abord de savoir quels écrans utilisent vos visiteurs. suivant le public visé, vous n'allez pas faire une présentation pour chaque taille d'écran possible.

Envoyé par Artemus24

Je ne suis pas du tout doué pour tout ce qui est esthétique, comme le choix de belles couleurs harmonieuses.

moi non plus. en plus, css et html ne sont pas de langage de programmation donc avec 20 ans d'expérience en php, j'arrive à comprendre un autre langage comme javascript ou C++ par exemple mais le css à longtemps été un obscurantisme épais pour mon cerveau. ce n'est que depuis l'arrivée des modèles flex et grid il y a quelques années que j'arrive tout doucement à construire des présentations utilisables.

Envoyé par Artemus24

Je les avais déjà consultées, mais cela ne m'a pas aidées du tout.
Les exemples ne sont pas intuitifs, voire même abscons, en ce qui me concerne.
Je reconnais qu'il y a des exemples, mais aucune explication sur la syntaxe utilisé et le résultat produit. Il faut deviner.

c'est vrai que les modèles flex et grid utilisent un grand nombre de mots clés donc il faut plutot commencer par dessiner sur le papier la présentation qu'on cherche à obtenir et ensuite explorer les différents-mots clés pour trouver comment arriver à cette présentation.
pour faire cela, les 2 pages suivantes m'aident aussi souvent :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/...te-guide-grid/

Envoyé par Artemus24

J'ai vu aussi un "8ch". Pas trouvé sa signification.

voilà une page qui liste plusieurs unités :
https://developer.mozilla.org/fr/docs/Web/CSS/length
ça peut être utile de la garder dans ces marques-pages

Envoyé par Artemus24

--> "grid-column: 1 / 3". le "1" correspond à "min-width" et le "3" à "min-height".

loupé

relisez la 1re ligne de cette page :
https://developer.mozilla.org/fr/doc...SS/grid-column

**Artemus24** · 07/03/2023, 12h17

Salut Mathieu.

Envoyé par Mathieu

ce souci se règle avec un langage de programmation comme php, javascript côté serveur (node.js) par exemple.

Je parlais bien de HTML et de CSS et non de programmation.

Envoyé par Mathieu

pour simplifier je vous conseille de partir sur 2 largeurs d'écran, la 1re largeur est un écran d'ordinateur et la 2e largeur est un écran de téléphone.

Quand j'ai commencé mes premières pages web, le "responsive web" n'existait pas. Et je n'avais pas l'outil "Responsinator" à ma disposition.

Un écran d'ordinateur, je veux bien, mais de quelle résolution parlez vous ?
Avec mon vieux HP, j'avais un écran de 17" au format 4/3 en résolution 1440x900.
Avec mon nouvel Asus, j'ai aussi un écran de 17" mais au format 16/9 en résolution 1920x1080, c'est le standard aujourd'hui.
Mon téléviseur Samsung a un écran de 65", aussi en 16/9 (4K) mais au résolution 3840×2160.
Je n'ai fait qu'effleurer le sujet car il y a pléthore de formats d'écran : 3/2, 5/4, 16/10, 21/9 ...

Et celle d'un téléphone mobile ? Je ne possède pas de téléphone mobile pour tester réellement.

Envoyé par Mathieu

mais si vous voulez faire d'autres présentations pour ces utilisateurs, la question est d'abord de savoir quels écrans utilisent vos visiteurs.

Je me trompe peut-être, mais tout le monde doit en principe accéder aux pages web, non ?

Quand j'ai appliqué le "responsive web" à mes présentations sur deux colonnes, j'ai fait le choix de mettre la colonne de gauche au dessus de la colonne car je n'avais pas la largeur suffisante pour les mettre cote à cote.
J'avais lu qu'il fallait plusieurs images à des résolutions différentes.
Sur un écran de téléphone mobile, l'éran est déjà petit, je me demande ce que l'on peut lire réellement.

Envoyé par Mathieu

Suivant le public visé, vous n'allez pas faire une présentation pour chaque taille d'écran possible.

Non bien sûr mais je pensais que vous aviez un découpage en fonction de la résolution des écrans.
Le standard des ordinateurs est le 1920x1080. Et celui des téléphones mobile est le 360x800.
J'ai fait une recherche sur le net, mais je m'aperçois que d'un page à une autre, le standard des téléphones mobiles n'a pas la même résolution.
Le sujet de la résolution des écrans devient vite compliqué, je trouve.

Envoyé par Mathieu

Envoyé par Artemus24

Je ne suis pas du tout doué pour tout ce qui est esthétique, comme le choix de belles couleurs harmonieuses.

moi non plus.

Cela me rassure.

Envoyé par Mathieu

mais le css à longtemps été un obscurantisme épais pour mon cerveau.

J'ai oublié de préciser que je suis à la retraite, mais avant j'étais ingénieur en informatique, dans le domaine bancaire, sur gros système IBM et avant sur BULL. Je ne vais pas étaler ici mon pedigree mais je maitrise bien les langages de programmes puisque mon métier à la base est celui de developpeur et de chef de projet.
Je bidouille sur mes raspberry Pi pour faire de l'électronique et de la domotique.
Je maitrise bien le développement system sur linux et donc de surcroit bash et 'C/C++'. Je n'aime pas Python.

J'aide beaucoup les débutants dans le forum Mysql.
Je viens de terminer un sujet compliqué, celui de la création des certificats OpenSSL et l'introduction du mode SSL dans Mysql.
Mon but était d'atteindre le plus haut niveau de sécurité, à savoir "mode_ssl=verify_identity" pour les connexions client/serveur.
Apache était déjà opérationnel avec le certificat Let's Encrypt.

Le web n'est pas du tout ma formation de base. Je l'ai appris sur le tas. Je n'aime pas du tout le javascript.
L'HTML et le CSS, pour des choses simples, je maitrise mais pas pour la mise en forme des pages web.

Envoyé par Mathieu

Ce n'est que depuis l'arrivée des modèles flex et grid il y a quelques années que j'arrive tout doucement à construire des présentations utilisables.

Je connais ni l'un ni l'autre. Je pense que je vais me diriger vers le GRID CSS.

Envoyé par Mathieu

c'est vrai que les modèles flex et grid utilisent un grand nombre de mots clés donc il faut plutot commencer par dessiner sur le papier la présentation qu'on cherche à obtenir et ensuite explorer les différents-mots clés pour trouver comment arriver à cette présentation.

Ce que je cherche à faire, je l'ai exposé dans mon message précédant.
J'ai commencé à réaliser ma page la plus compliqué, à savoir le blog.

Merci pour tes liens et tes explications, Mathieu.

A l'attention de NoSmoking, ce n'est pas parce que je remercie quelqu'un que cela signifie que le sujet est clôt.
En fait, il sera ouvert pour encore longtemps car je ne fais que commencer la refonte de mes pages web.
Je reviendrais, d'ici peu, montrer ce que j'ai fait sur ma page la plus compliqué et obtenir des corrections ainsi que d'autres conseils.
Et quand il sera clôt, je l'indiquerai en tout lettre.

Cordialement.
Artemus24.
@+

**Artemus24** · 07/03/2023, 14h04

Salut à tous.

Je viens de terminer l'ébauche de mon blog. Voici le 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
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
<!doctype html>
<html lang="fr">
<html>
<head>
<meta charset="ISO-8859-15" />
<title>Grid</title>
 
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
	<header>
		<p>Bienvenue chez Artemus24 !</p>
		<ul>
			<li><a href="/">Accueil</a></li>
			<li><a href="/A_Propos">A Propos</a></li>
			<li><a href="/Blog">Blog</a></li>
			<li><a href="/Contact">Contact</a></li>
			<li><a href="javascript:history.back()">Retour</a></li>
			<li><a href="#">...</a></li>
		</ul>
	</header>
<main>
	<nav>
		<ul>
			<li><a href="x1.php">mon premier lien</a></li>
			<li><a href="x2.php">mon deuxième lien</a></li>
			<li><a href="x3.php">mon troisième lien</a></li>
		</ul>
	</nav>
	<aside>
		<section id="bil">
			<p>Titre</p>
			<p><span>Sujet : xxxx</span><span>date : xxxx</span></p>
			<pre>bla bla bla
			</pre>
		</section>
		<section id="com">
			<article>
				<p>Titre Un</p>
				<main>
					<div>
						<p>Pseudo 1</p>
						<p>date</p>
						<p>Time</p>
						<a href="mailto:email.fr"><img src="image.png" /></a>
					</div>
					<div>bla bla bla
					</div>
				</main>
			</article>
			<article>
				<p>Titre Deux</p>
				<main>
					<div>
						<p>Pseudo 2</p>
						<p>date</p>
						<p>Time</p>
						<a href="mailto:email.fr"><img src="image.png" /></a>
					</div>
					<div>bla bla bla bla bla bla bla bla
					</div>
				</main>
			</article>
		</section>
		<form method="post" action="Index.php">
			<fieldset>
				<legend> Votre commentaire : </legend>
				<label for="L1">Pseudo : <input id="L1" type="text"  name="pseudo" /></label>
				<label for="L2">Email : <input id="L2" type="email" name="email" /></label>
				<label for="L3">Titre : <input id="L3" type="text" name="parag" /></label>
				<label for="L4">Commentaire : <textarea id="L4" name="texte"></textarea></label>
				<input type="hidden" name="id" value="<?php echo $num; ?>" />
			</fieldset>
			<input type="submit" value="Envoyer" />
			<input type="reset"  value="Effacer" />
		</form>
	</aside>
</main>
<footer>mon pied de page</footer>
</body>
</html>

Et voici le CSS :

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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
* {
	margin					: 0;
	border					: 0 none;
	padding					: 0;
	box-sizing				: border-box;
}
 
body {
	background				: maroon;
	padding					: 10px;
 
	display					: grid;
	grid-template-rows		: auto 1fr auto;
	min-height				: 100vh;
}
 
/*------------------------------------------------------------------*/
 
header {
	margin-bottom			: 10px;
	background-color		: lightyellow;
	text-align				: center;
	border-radius			: 25px;
	padding					: 10px;
}
 
header p {
	font-family				: "Times New Roman", arial, Georgia, Serif;
	font-size				: xx-large;
	font-weight				: bolder;
}
 
header ul {
	list-style-type			: none;
	margin					: 0 auto;
}
 
header ul li {
	display					: inline-block;
	width					: 120px;
}
 
header ul li a {
	display					: block;
	margin					: 10px 10px 0 10px;
	text-align				: center;
	border-radius			: 10px;
}
 
header ul li a:link {
	text-decoration			: none;
	background-color		: lightgreen;
	color					: black;
	border-color			: #CECECE #4A4A4A #4A4A4A #CECECE;
	border-width			: 1px 2px 2px 1px;
	border-style			: solid;
	overflow				: hidden;
}
 
header ul li a:visited {
	background-color		: lightgreen;
}
 
header ul li a:hover {
	border-color			: #4A4A4A #CECECE #CECECE #4A4A4A;
	border-width			: 2px 1px 1px 2px;
	border-style			: solid;
}
 
/*------------------------------------------------------------------*/
 
main {
	margin-bottom			: 10px;
 
	display					: grid;
	grid-template-columns	: 1fr 11fr;
	grid-gap				: 10px;
}
 
/*------------------------------------------------------------------*/
 
main nav {
	grid-column				: 1;
	display					: block;
 
	padding					: 20px;
	border-radius			: 25px;
	background-color		: lightyellow;
	vertical-align			: top;
}
 
main nav ul					{list-style-type	: none;	}
main nav ul li				{margin				: 5px 0;}
main nav ul li a			{text-decoration	: none;	}
main nav ul li a:link		{color				: black;}
main nav ul li a:visited	{color				: red;	}
main nav ul li a:hover		{color				: blue;	}
 
/*------------------------------------------------------------------*/
 
main aside {
	grid-column				: 2;
	display					: block;
 
	margin-bottom			: 0px;
	padding					: 10px;
	border-radius			: 25px;
	background-color		: lightyellow;
	text-align				: center;
}
 
/*------------------------------------------------------------------*/
 
main aside section#bil {
	background-color		: lightpink;
	margin					: 0 auto;
	padding					: 10px;
	border					: 1px solid pink;
}
 
main aside section#bil p {
	text-align				: center;
	font-size				: xx-large;
}
 
main aside section#bil p+p {
	font-size				: medium;
	color					: black;
}
 
main aside section#bil p+p span {
	text-align				: center;
	margin					: 0 25px;
	padding					: 5px;
}
 
main aside section#bil pre {
	background-color		: lightblue;
	margin					: 10px auto 0 auto;
	padding					: 5px 10px;
	border					: 1px solid blue;
	border-radius			: 25px;
	font-size				: small;
	text-align				: left;
}
 
/*------------------------------------------------------------------*/
 
main aside section#com {
	margin					: 0px;
	padding-top				: 0px;
	border					: 1px none;
}
 
main aside section#com article {
	margin					: 10px auto;
	background-color		: lightpink;
	border					: 1px solid pink;
}
 
main aside section#com article>p {
	border					: 1px solid blue;
	border-radius			: 25px;
	margin					: 10px 10px 0 10px;
	padding					: 0px;
	background-color		: lightblue;
	color					: red;
	font-weight				: bold;
}
 
main aside section#com article main {
	display					: grid;
	grid-template-columns	: 1fr 11fr;
	padding					: 10px 10px 0 10px;
}
 
main aside section#com article main div {
	grid-column				: 1;
	vertical-align			: top;
	border					: 1px solid blue;
	border-radius			: 25px;
	padding					: 5px 10px;
	background-color		: lightblue;
	text-align				: center;
}
main aside section#com article main div p {
	text-align				: center;
}
 
main aside section#com article main div p:first-child {
	color					: red;
	font-weight				: bold;
}
 
main aside section#com article main div a img {
	width					: 48px;
	height					: 48px;
}
 
main aside section#com article main div+div {
	grid-column				: 2;
	text-align				: left;
	font-size				: small;
}
 
/*------------------------------------------------------------------*/
 
main aside form {
	background-color		: lightpink;
	text-align				: center;
	border					: 1px solid pink;
	margin					: 0 auto;
	padding					: 10px 10px 0 10px;
}
 
main aside form fieldset {
	background-color		: lightblue;
	margin					: 0 auto;
	padding					: 10px;
	border					: 1px solid blue;
	border-radius			: 25px;
}
 
main aside form fieldset legend {
	text-align				: left;
}
 
main aside form fieldset label {
	display					: block;
	margin					: 5px auto;
	text-align				: right;
}
 
main aside form fieldset label input[type="text"],
main aside form fieldset label input[type="email"] {
	width					: calc(100% - 100px);
}
 
main aside form fieldset label textarea {
	width					: calc(100% - 100px);
	height					: 50px;
	vertical-align			: middle;
}
 
main aside form input[type="submit"],
main aside form input[type="reset"] {
	display					: inline-block;
	background-color		: lightblue;
	border					: 1px solid blue;
	border-radius			: 25px;
	margin					: 10px;
	padding					: 5px;
	text-align				: center;
	width					: 80px;
}
 
main aside form input[type="submit"]:hover,
main aside form input[type="reset"]:hover {
	background-color		: blue;
	color					: white;
}
 
/*------------------------------------------------------------------*/
 
footer {
	background-color		: lightblue;
	text-align				: center;
	border-radius			: 25px;
	padding					: 10px;
}
 
footer a {
		padding				: 0 2%;
}
 
footer a img {
		height				: 32px;
		width				: 32px;
}

Je l'ai testé sans passer par WampServer.

Si quelqu'un peut améliorer les couleurs, ce serait bien.
J'ai utiliser les quatre couleurs pastels rouge vert bleu et jaune.

Il y a certainement des choses à améliorer.
Par exemple la forme des boutons dans la balise <header> ou encore les liens ans la balise <nav>.
Ce ne fut pas aussi compliqué à mettre au point cette fois-ci.
C'est à croire que j'ai compris comment fonctionne le "display : grid".
Inversement, ce fut bien plus compliqué avec les "float : left" et "float : right".

Pour aujourd'hui, j'en ai marre, j'arrête. Je ferai la suite demain.

Cordialement.
Artemus24.
@+

**NoSmoking** · 07/03/2023, 18h01

Envoyé par Artemus24

A l'attention de NoSmoking, ce n'est pas parce que je remercie quelqu'un que cela signifie que le sujet est clôt.
En fait, il sera ouvert pour encore longtemps car je ne fais que commencer la refonte de mes pages web.
Je reviendrais, d'ici peu, montrer ce que j'ai fait sur ma page la plus compliqué et obtenir des corrections ainsi que d'autres conseils.
Et quand il sera clôt, je l'indiquerai en tout lettre.

Tout d'abord, il ne faut pas confondre clôt et résolu.

Tout d'abord en préambule, notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous.

L'ouverture d'une discussion n'a pas pour vocation de traiter un cas très/trop particulier, même si c'est souvent le cas, mais un problème qui peut être récurrent.
Ici on peut noter l’importance d'un titre bien choisi.

Marquer une discussion comme résolue indique simplement qu'une solution au problème principal a été trouvée.

Marquer une discussion comme résolue ne signifie en aucun cas que le sujet est clôt ou la discussion fermée, il y a pléthore d’exemples sur le forum de discussions résolues qui ont continuées en s’enrichissant aux fils des avis des intervenants.

Marquer une discussion comme résolue, permet à ceux qui rencontreraient le même soucis, ou similaire, de ce concentrer lors de leur recherche sur des discussions au statut résolu.

Marquer une discussion comme résolue, permet, en outre, à un membre qui souhaite répondre à des questions, mais ayant peu de temps, de consacrer ce temps aux discussions dont le statut n'est pas résolu, merci de penser à leur temps de bénévole.

Me référant simplement à ce que je viens d'écrire oui cette discussion est résolue.

Envoyé par Artemus24

Si quelqu'un peut améliorer les couleurs, ce serait bien.
(...)

Je rajouterais que, poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum en général: notamment, lors d'une recherche, même si la recherche n'est visiblement pas utilisée par beaucoup, tout le contenu du fil n'est pas indiqué dans le titre, et ne sert pas forcément à tous.

**Artemus24** · 08/03/2023, 11h41

Salut NoSmoking.

Envoyé par NoSmoking

Tout d'abord en préambule, notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous.

Si tu désires maintenir une base de connaissances, ce n'est pas au travers d'un forum que tu dois le faire. Imagine qu'un sujet contienne la solution à ton problème mais que celui-ci fasse une centaine de pages. Il faudrait avoir beaucoup de patience pour lire ces pages jusqu'au bout et enfin atteindre la solution.

Autre point que tu ne soulèves pas, le rang du sujet dans le forum. Si la solution se trouve très très loin, la personne en question doit défiler tous les sujets avant d'arriver au bon endroit.

Dans les deux cas, une perte de temps.

Envoyé par NoSmoking

L'ouverture d'une discussion n'a pas pour vocation de traiter un cas très/trop particulier, même si c'est souvent le cas, mais un problème qui peut être récurrent.

Un utilisateur qui ouvre un sujet, le fait dans un contexte particulier. Il sollicite de l'aide auprès de personnes ayant un niveau de compétence supérieur à lui. Il arrive fréquemment que cette personne à la flemme d'effectuer une recherche qui peut être très longue. La solution de facilité est tout simplement de poser la question et d'avoir dans l'immédiateté la réponse tant recherchée.

Envoyé par NoSmoking

Ici on peut noter l’importance d'un titre bien choisi.

Encore faut-il que ce titre soit en concordance avec la recherche que l'on fait. Cela m'arrive fréquemment de constater que la solution recherchée fonctionne sur un autre OS que celui que j'utilise.

Envoyé par NoSmoking

Marquer une discussion comme résolue indique simplement qu'une solution au problème principal a été trouvée.

On peut l'interpréter de cette façon là. J'ai déjà vu des sujets marqués comme résolue et où l'utilisateur ne communique pas la solution. Ou mieux encore, la solution donnée ne fonctionne pas du tout. Pourquoi ? Sujet trop vieux.

Envoyé par NoSmoking

Marquer une discussion comme résolue ne signifie en aucun cas que le sujet est clôt ou la discussion fermée, il y a pléthore d’exemples sur le forum de discussions résolues qui ont continuées en s’enrichissant aux fils des avis des intervenants.

Un sujet est ouvert par un utilisateur et concerne que cet utilisateur. Si un autre utilisateur a le même genre de problème, il doit ouvrir son propre sujet. Dans d'autres forum que Developpez, si au bout disons d'un mois, il n'y a pas eu d'autres réponses, le sujet est verrouillé.

Mais il faut faire la distinction entre "open bar" et un sujet technique où l'on ne vient pas y passer un bon moment mais pour résoudre un problème.

Envoyé par NoSmoking

Marquer une discussion comme résolue, permet à ceux qui rencontreraient le même soucis, ou similaire, de ce concentrer lors de leur recherche sur des discussions au statut résolu.

Oui, mais ça, c'est la théorie. Dans la pratique, ils ne font pas de recherches et vont à la facilité. Autrement dit, ouvrir un n^ième sujet sur le même thème. Et à la longue, répondre toujours aux mêmes questions devient vite lassant.

Envoyé par NoSmoking

Marquer une discussion comme résolue, permet, en outre, à un membre qui souhaite répondre à des questions, mais ayant peu de temps, de consacrer ce temps aux discussions dont le statut n'est pas résolu, merci de penser à leur temps de bénévole.

Je suis bénévole et je passe beaucoup de temps dans le forum consacré aux SGBDR et en particulier à Mysql et MariaDB. Je donne la solution sous forme de script que j'ai testé dans mon ordinateur. Cela me permet d'augmenter mon niveau de connaissance et de ne pas perdre la main.

Je ne procède pas ainsi. A vrai dire, je ne tiens pas compte du statut "résolu" ou pas "résolu". Chaque soir, je reçois un email avec les derniers sujets encore en activités. Je les consultes et je réponds quand le sujet m'intéresse. Je vais aussi dans le forum directement et je clique sur les sujets qui sont en gras. Cela signifie qu'une réponse est arrivée depuis ma dernière lecture. Si tous les sujets ont déjà été lus par moi, je n'y entre pas à nouveaux, même si l'un d'entre eux passe à "résolu".

A vrai dire, le bouton résolu n'est pas un critère de sélection. C'est plutôt, comme tu l'as dit plus haut, le titre qui est pertinent.

Pour une recherche, je le fais au niveau de Google, en français et en anglais. Donc pas spécifiquement dans le forum Developpez. Le tout est de bien poser mes mots clefs pour obtenir la réponse attendue.

Envoyé par NoSmoking

Me référant simplement à ce que je viens d'écrire oui cette discussion est résolue.

Pas pour moi car si j'ai ouvert ce sujet, j'ai juste déposé une question et non la totalité des problèmes que je rencontre.

Et comme je l'ai dit plus haut, si je remercie quelqu'un, cela ne signifie pas que le sujet est résolu. C'est juste une forme de gratitude et de respect envers la personne qui a passé du temps et a donné la réponse à une question posée.

Ce qui m'a grandemment surpris, tu forces le sujet à résolu, huit heures après que j'ai donnée ma dernière réponse. Tu aurais pu attendre quelques jours, disons une semaine, afin de le mettre à "résolu". Et pourquoi huit heures, et pas cinq minutes ?

Envoyé par NoSmoking

Je rajouterais que, poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum en général:

Oui et non car cela dépend s'il s'agit du même thème ou pas.
Il arrive dans le forum mysql qu'une même personne commence une discussion dans un sujet et le termine dans un autre. Tu devras reconnaitre qu'il est, dans ce cas, difficile de tout comprendre de la problématique de son auteur. Il n'y a pas de bonnes ou de mauvaises méthodes, juste un lieu où l'on demande de l'aide.

Envoyé par NoSmoking

notamment, lors d'une recherche, même si la recherche n'est visiblement pas utilisée par beaucoup, tout le contenu du fil n'est pas indiqué dans le titre, et ne sert pas forcément à tous.

La bonne question est de savoir à qui profite le plus le forum ? Ce n'est pas en imposant des règles que tu auras l'approbation des membres. Dans le pire des cas, tous les membres iront dans un autre forum où les règles sont moins contraignantes. Normalement, un forum devrait être un lieu d'entraide et de convivialité où les membres sont unis par une même passion.

Si je commets des erreurs, je ne le fais pas avec l'intention de nuire à qui que ce soit, mais juste parce que je suis concentré sur mes problèmes.

Merci de ta réponse.

Qu'est-ce que je fais ? Je continue dans ce sujet où j'ouvre un autre sujet ?

Cordialement.
Artemus24.
@+

**mathieu** · 08/03/2023, 12h09

je me rappelles des statistiques d'il y a quelques années qui indiquaient que toutes les discussions sont lues profondément environ 10 fois en moyenne par des personnes non connectées. Donc la réponse va servir un 1re fois à l'auteur de la question mais ensuite il y a aussi 10 autres personnes qui vont lire tout le fil, c'est pour ça que les responsables du forum ont décidés de mettre en place ces règles.

et donc si vous avez des autres questions, il vaut mieux créer une nouvelle discussion par question.
cela a l'avantage d'ouvrir la porte à d'autre membres du forum qui pourrait vous aider. en postant plusieurs questions vous allez perdre des participants qui ont la flemme (comme moi souvent) de lire tous les messages pour savoir où se trouve la nouvelle question.

**Artemus24** · 09/03/2023, 10h07

Salut Mathieu.

D'accord, j'arrête mes interrogations dans ce sujet.
Et je vais créer, quand j'aurai une autre question, un autre sujet.
En ce qui me concerne, le sujet n'est pas clôt.
C'est juste une étape résolue dans la refonte de mes pages web.

Cordialement.
Artemus24.
@+

Positionner le FOOTER en bas de page

Positionnement en CSS

Discussions similaires

Partager

Partager