Discussion :

[moimp]

Bonjour,
J'ai un bandeau d'en-tête qui comprend 3 éléments que je veux répartir le premier à gauche, le second au milieu, le troisième à droite.
Je n'arrive pas à définir les valeurs à affecter à grid-template-columns.
html:

Code html :

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

1
2
3
4
5
6
7
<header>
	<div class="displTimer">
		<span id="timer"></span> <?php /* This line is used to display the calendar/clock */ ?>
	</div>
	<h1><?= $this['h1'] ?></h1>
	<img src="images/logo.png" alt="logo">
</header>

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
header {
	margin-bottom:40px;
	width:100%;
	display:grid;
	grid-template-columns:1fr 80% 1fr;
}
header div {
	width:180px;
	height:fit-content;
	border:1px solid white;
	padding:5px;
	text-align:center;
}
header img {
	width:fit-content;
}

J'ai testé différents paramètres sans y parvenir.

[NoSmoking]

Bonjour,

J'ai testé différents paramètres sans y parvenir.

il est souvent préférable de chercher à comprendre ce que l'on fait

Sans plus d'info, par exemple :

Code :

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

grid-template-columns: 180px 1fr auto;

Ressource :

• grid-template-columns