[Résolu] Mettre élément "display: flex;" et "position: fixed;" à droit

Salut,

Tu mélanges un peu tout la...

display: flex; va influer sur les enfants de la div. Ici l'image. Et franchement je ne vois pas a quoi ca peut servir ici.

float: left; fait flotter l'élément en le sortant du flux pour le mettre à gauche de là ou il est.

position: fixed; encore plus fort que le position absolute, la position fixed positionne l'élément par rapport à la fenêtre de ton navigateur. Ici ca va annuler le float. Il manque également un positionnement top/bottom et left/right, tu lui dit "ok je vais te positionner par rapport aux bord" mais tu ne lui dit pas ou.

C'est quelle image que tu veux aligner à droite ? Et l'autre image ?

Ce que je conseille aux dev qui sont avec moi et qui ne connaissent pas le CSS c'est de partir de 0 et n'ajouter que ce qui sert. Sinon ils rajoutent tout ce qu'ils connaissent, ils en font des tartines et la moitié des trucs ne servent a rien, voir font tout foirer.

On repart de 0 et on en profite pour supprimer des div parceque :

<div class="actus-img-danger">
	<div class="actus-danger">
		<img src="/img/danger.png" width="32">
	</div>
</div>

si tu n'as pas de bonne raison d'imbriquer une image dans une div seule dans une autre div ça t'apporteras plus de soucis qu'autre choses... donc :

<div class="actus">
  <img src="/img/danger.png" width="32">
  <p class="actus-text">Les différentes actualité en Ukraine <a href="">ici</a>.</p>
  <img src="/img/cross.png" width="26">
</div>

Ton bloc actus tu le veux collé en bas et rouge ? Ce que tu as fait est nickel, il manque juste le left (pour être sur qu'il soit a 0)

.actus{
  background-color: red;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

et ensuite bah je connais pas encore ton but. Mais si tu veux une image a droite, une a gauche et le texte au milieu le display flex peut effectivement t'aider :

.actus{
  background-color: red;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display:flex;
}

A partie de la qu'est-ce qui manque ? que le texte prenne toute la place au milieu. Que le texte soit centré. Et que verticalement les trois blocs soit centrés. 1 propriété par besoin pas plus :

.actus{
  background-color: red;
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center; /* alignement vertical */
}
.actus-text {
  flex: 1; /* prend toute la place */
  text-align: center; /* texte centré */
}

et voila

https://jsfiddle.net/undless/x9j6abhm/

Apres si c'est pas exactement ce que tu veux rectifie le tir.

Bonne nuit !
Modifié par _laurent (11 Mar 2022 - 22:27)