Discussion :

[qwerty31]

Bonjour,

Pour une création de news pour un site, j'ai voulu faire un titre centré avec, à droite, la date de la news correspondante. Voici mon code :

Code HTML :

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

1
2
3
4
<article>
<h1><time pubdate datetime="2018-08-18">18 août 2018</time>Mon titre</h1>
<p>bla bla bla</p>
</article>

Avec le CSS qui correspond :

Code :

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

1
2
3
4
5
6
7
8
9
 
article > h1
{
	text-align : center;
}
time
{
	float : left;
}

Le tout a l'air de marcher bien, mais le centrage du titre de l'article n'est pas centré par rapport au bloc article, mais centré en tenant compte de la date. Ce que je souhaiterai ce serait que le texte soit centré "comme si" la date n'était pas là, afin de ça ne fasse pas étrange en comparaison d'autres textes centrés sur le site qui ne subissent pas le décalage de cette date. J'ai essayé différentes manips mais rien n'y fait, le texte reste centré avec un décalage dû à la date.

Une idée de comment faire ?

Merci d'avance !

[Invité]

Bonjour,

Une solution :

Code html :

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

1
2
3
4
<article>
<h1><time pubdate datetime="2018-08-18">18 août 2018</time>Mon titre</h1>
<p>bla bla bla</p>
</article>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
article > h1 {
  position: relative;
  text-align: center;
  background:lightgrey; /* (pour visualiser) */
}
article > h1 time {
  position: absolute;
  left: 5px;
  top: 5px;
  font-size:75%;
  font-weight:normal;
}

Une meilleure solution :

Code html :

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

1
2
3
4
5
6
7
8
9
<article>
  <header>
    <time pubdate datetime="2018-08-18">18 août 2018</time>
    <h1>Mon titre</h1>
  </header>
  <div>
    <p>bla bla bla</p>
  </div>
</article>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
article header {
  position: relative;
  background:lightgrey; /* (pour visualiser) */
}
article header h1 {
  text-align: center;
}
article header time {
  position: absolute;
  left: 5px;
  top: 5px;
}

[qwerty31]

Merci beaucoup ! Tout fonctionne comme je le souhaite maintenant !