28172 sujets

CSS et mise en forme, CSS3

Aligner des images sur une page

Bonjour!

J'aimerais aligner ces images à l'horizontal, par 3 sur 2 lignes. J'ai fait plusieurs tentatives en modifiant mes HTML et CSS, mais rien n'y fait...

Voici un screen :
upload/1492945736-65323-screen.png

Voici mon code :
<div id="contenu">
		<h1>Articles</h1>
		<img src="images/intheafter.jpg" alt="intheafter" />
		<img src="images/werber.jpg" alt="werber" />
		<img src="images/humains.jpg" alt="humains" />
		<img src="images/tyme.jpg" alt="tyme" />
		<img src="images/tyme.jpg" alt="tyme" />
		
		<p></p>
		<div style="clear:both;"></div>
		<div id="piedDePage">
			Copyright ifList
		</div>
</div>

Et CSS :
img{
    	padding:0px;
	margin-top:20px;
	margin-right:10px;
}

img.imageDroite{
	float:right;
	margin-left:10px;
	margin-bottom:0px;
	margin-top:0px;
}

Modifié par Mirajen (23 Apr 2017 - 13:10)
Modérateur
Bonjour,


Alors sur le parent #contenu il faut mettre un text-align:center; qui aura pour effet de centrer le texte (et les images par la même occasion).
Tu peux enlever la classe imageDroite (tu ne l'utilise pas de toute facon)

Pour qu'il y en ai que 3 dans ton HTML tu peux rajouter une balise <br> (changement de ligne) entre la 3eme et la 4eme image. Sinon elle se mettront à la suite tant qu'il y aura de la place.

Bonne journée
Modifié par _laurent (23 Apr 2017 - 13:25)
Bonjour.

#contenu
  {
  text-align : center;
  }


Mais ça va aussi centrer votre titre h1 et tout le contenu de votre contenu...

Vous pouvez faire un contenant rien que pour vos images et rebelote...

J'ai pas compris cette histoire de float et de clear...

Smiley smile

Edit : en fait, pour être plus précis, 'aligner' et 'centrer' ne sont pas similaires, là avec 5 éléments, il est impossible d''aligner' verticalement...
Modifié par Zelena (23 Apr 2017 - 13:35)
Merci pour vos réponses _laurent et Zelena !

Alors la classe imageDroite je la garde car je l'utilise pour mon logo, plus haut.
J'ai rajouté le text-align:center; par contre ça m'a centré le tout d'une façon étrange, je pense qu'il y a un problème quelque part dans le CSS.

Voici un screen, de la page entière cette fois-ci :
upload/1492948149-65323-screen1.png

Merci !
C'est curieux que ça aille à la ligne entre la deuxième et la troisième image... Smiley confus

Je soupçonne un effet de bord dû à la présence du logo juste au-dessus.

Peut-être avec le HTML et le CSS du logo...?

Smiley smile
Modifié par Zelena (23 Apr 2017 - 14:49)
C'est ce que je n'arrive pas à comprendre Smiley ohwell

Le code du logo est là:

<div id="global">
<div id="bandeau">

	<img src="images/logo3.png" class="imageDroite" alt="logo" />
	<span class="titreSite">ifList</span>
	<br />
	<span class="slogan">Site de castings</span>
</div>


Dans le CSS c'est justement imageDroite... C'est assez étrange Smiley rolleyes
A priori, ce n'est que l'encombrement des images qui pose problème...

Votre "image de droite" prend plus de place qu'elle n'en a l'air puisqu'il y a une légère ombre dessous et vos images "normales" ont un margin-top de 20px.

L'image en float en haut ne laisse pas la place aux images qui sont situés en-dessous d'elle.

Une solution est de neutraliser l'effet du float pour le div #contenu :
#contenu
  {
  clear : both;
  ...
  }


Et de supprimer le margin-top de 20px pour les images 'normales' et de mettre plutôt un margin-bottom de 20px.

Smiley smile
Modifié par Zelena (24 Apr 2017 - 07:58)
Ah bah je suis impressionnée, ça a très très bien fonctionné ! Smiley eek

Voici ce que ça donne:
upload/1492965848-65323-sanstitre.png
Les 3 images du bas sont là seulement pour avoir un aperçu de l'alignement ahah. C'est parfait, merci beaucoup !

Si je ne dérange pas trop, j'aurais encore un petit problème d'alignement à régler, cette fois-ci avec du texte... Smiley sweatdrop

upload/1492966319-65323-ali.png

Après avoir réglé l'alignement des images, c'est ici que ça a bougé Smiley ohwell
Merci beaucoup en tout cas
Bonjour.

Ah, c'est probablement le fait de centrer les éléments de #contenu qui vous trouble...

À nouveau, il faut le HTML et le CSS concerné... Même si j'ai une idée vague, je ne peux pas être précise.

Et surtout, il faut dire à quel résultat vous voulez arriver...

Smiley smile

Edit : cela dit, si c'est surtout text-align : center qui vous embête, vous pouvez l'enlever...
Modifié par Zelena (24 Apr 2017 - 08:09)
Sujet clos
Aller à