27799 sujets

CSS et mise en forme, CSS3

Bonjour,
Comme dit dans le titre j'aimerai mettre une img a droite de mon écran.
Code HTML:
<div class="actus">
		<div class="actus-img-danger">
			<div class="actus-danger">
				<img src="/img/danger.png" width="32">
			</div>
		</div>
		<div class="actus-text">
			<span class="actus-span">
				<p class="actus-p">
					Les différentes actualité en Ukraine <a href="">ici</a>.
				</p>
			</span>
		</div>
		<div class="actus-img-croix">
			<div class="actus-croix">
				<img onclick="document.querySelector('.actus').style.display='none';" class="actus-croix-img" src="/img/cross.png" width="26" align="left">
			</div>
		</div>
	</div>

Code CSS:
.actus{
	background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.actus-p{
	font-size: 30px;
	margin: 0;
}

.actus-img{
	float: right;
}

.actus-img-croix{
	display: flex;
    position: fixed;
    float: left;
    width: 100%;
}

.actus-croix-img{
    cursor: pointer;
}

Voilà. A l'aide
Modifié par BurgerKingKong (11 Mar 2022 - 18:51)
Modérateur
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 Smiley smile

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)
Meilleure solution
C'était exactement ça mon problème ! Merci beaucoup ! Et encore désolé de d'avoir pris de ton temps.
Cordialement,
Modifié par BurgerKingKong (12 Mar 2022 - 10:18)