Bonjour tout le monde,

On m’a conseillé d’abandonner les balises <table> pour utiliser les Grid Layout. Donc, vu que je ne prends jamais les conseils à la légère, je suis en train de refaire le design de mon site en utilisant les Grid Layout au lieu de mes balises <table>. Cependant, je me retrouve confronté à un problème qui me dérange grandement.

Voici l’image de mon architecture pour que vous voyiez visuellement le souci :

Nom : IMG_1.jpg Affichages : 347 Taille : 27,3 Ko


Sur le haut de la page, se trouve le logo et la date. La date est affichée sur le haut de la cellule, mais ce n’est pas du tout ce que je veux… Moi, ce que j’aimerais c’est que la date s’affiche sur le bas de la cellule, mais je n’arrive pas à trouver comment faire ?

Avec une balise <td> je la définirais simplement avec l’attribut valign="bottom", ce qui est assez simple. Mais avec les Grid Layout, j’ai essayé pas mal de chose, mais rien à faire, cette maudite date ne veut pas descendre en bas. Pouvez-vous m’aider ?

Voici le code source de ma page :

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
<!DOCTYPE html>
<html lang="fr-CH">
<head>
	<title>Gwanda.ch</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="no-cache" />
	<link rel="stylesheet" href="images/designs/styles.css" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<script src="https://kit.fontawesome.com/2e9b34a81e.js"></script>
	<style>
.tabloPrincipal {
        display: inline-grid;
        grid-template-columns: 200px 600px;
        grid-template-rows: auto auto auto auto;
        justify-content: center;
        align-content: start;
        grid-gap: 0px;
        padding: 0px;
        background-color: #000000;
}
.cellPrincipal {
  font-size: 15px;
}
 
.tabloLogo {
        display: grid;
        grid-template-columns: auto auto;
        align-content: start;
        justify-content: space-between;
}
.cellLogo {
  font-size: 15px;
}
        </style>
</head>
 
 
<body>
 
 
 
<div align="center">
	<div class="tabloPrincipal">
 
		<div class="cellPrincipal" style="grid-column-start: 1; grid-column-end: 3; background-color: #ADBC81; border: 1px solid #000000; padding: 0px;">
 
			<div class="tabloLogo" style="align-content: end;">
				<div class="cellLogo"><div align="left" style="padding: 15px 0px 0px 15px;"><img src="images/designs/logo.png" border="0"></div></div>
				<div class="cellLogo">
					<div align="right">
						<div style="padding: 0px 10px 5px 0px; white-space: nowrap;">
							<?=ucFirst($dateExtract->joursTXT(date('w')));?> <?=date('j');?> <?=$dateExtract->moisTXT(date('n')-1);?> <?=date('Y');?> - <span id="horloge"> </span>
						</div>
						<script type="text/javascript">
                                                        function horloge(){
                                                                var div = document.getElementById("horloge");
                                                                var heure = new Date();
                                                                var hours = (heure.getHours()<10)?"0"+heure.getHours():heure.getHours();
                                                                var minutes = (heure.getMinutes()<10)?"0"+heure.getMinutes():heure.getMinutes();
                                                                var seconds = (heure.getSeconds()<10)?"0"+heure.getSeconds():heure.getSeconds();
                                                                div.firstChild.nodeValue = hours+":"+minutes+":"+seconds;
                                                                window.setTimeout("horloge()",1000);
                                                        }
                                                        horloge();
                                                </script>
					</div>
				</div>
			</div>
 
		</div>
 
		<div class="cellPrincipal" style="grid-column-start: 1; grid-column-end: 3; background-color: #000000; padding: 7px; color: #FFFFFF">
			<div align="left"><i class="fas fa-chevron-right"></i> Accueil</div>
		</div>
 
 
		<div class="cellPrincipal" style="background-color: #FFFFFF; padding: 10px; border: 1px solid #000000; border-right: 0px;">
			<a href="index.php" target="_parent"><div class="menuA">Accueil</div></a>
		</div>
 
 
		<div class="cellPrincipal" style="background-color: #FFFFFF; border: 1px solid #000000; border-left: 0px;">
			<div align="left">CONTENU.... CONTENU.... CONTE</div>
		</div>
 
 
		<div class="cellPrincipal" style="grid-column-start: 1; grid-column-end: 3; background-color: #FFFFFF; padding: 5px;">
			<a href="" target="_parent" title="Remonter sur le haut de la page" style="top: 0;"><span style="font-size: 20px;"><i class="fas fa-sort-up"></i></span></a>
			<div style="margin: -5px 0px 0px 0px; font-size: 9px;">
				<a href="gwanda.ch" target="_parent">Gwanda.ch</a> - <a href="contact.php" target="_parent">Contact</a><br />
				Mise &agrave; jour de la page, le <?=MAJ;?><br />
			</div>
		</div>
 
 
	</div>
</div>
</body>
</html>



Et voici comment la date devrait s'afficher (Exemple avec la balise <table>) :

Nom : IMG_2.jpg Affichages : 363 Taille : 29,2 Ko