Alignement plusieurs images et espacement

[Nullette]

Bonjour et bon dimanche,

Je veux afficher six images, trois par ligne, avec un texte au dessous.

J'ai à peu près réussi. En vérifiant sur IE6, Chrome, Mozilla.

Je ne sais d'ailleurs pas par quel miracle les images 4, 5 et 6 s'affichent bien sur la deuxième ligne !

MAIS, je n'arrive pas à positionner le paragraphe qui suit (il s'agit en fait d'un titre h3).

Celui-ci s'affiche à droite des images et, si je mets clear: both, ou clear: left il y a un grand espace entre la deuxième ligne des images et le titre.

Le code des images :

.vignette{
float: left;
width: 150px;
height: 120px;
background-color:#f7efde;
border: 1px solid #999;margin: 0 15px 15px 0;
text-align:center;
padding: 2px;}

La partie html

<p class="vignette"><img src="1.jpg" alt="3" width="75" height="86" /><br />
Texte image 1</p>
 <p class="vignette"><img src="2.jpg" alt="2" width="75" height="77" /><br />
   Texte image 2</p>
 <p class="vignette"><img src="3.jpg" alt="3" width="75" height="88" /><br />
   Texte image 3</p>
 <p class="vignette"><img src="4.jpg" alt="4" width="75" height="85" /><br />
   Texte image 4</p>
<p class="vignette"><img src="5.jpg" alt="5" width="75" height="96" /><br  />
  Texte image 5</p>
<p class="vignette"><img src="6.jpg" alt="6" width="75" height="98" /><br />
  Texte image 6</p>
  <h3>Titre</h3>
  <p>blabla</p>

[mick38]

Bonjour Nullette,

Je ne sais d'ailleurs pas par quel miracle les images 4, 5 et 6 s'affichent bien sur la deuxième ligne !

Je pense que ça vient de la largeur du bloc parent.

Tu as 3 vignettes par ligne donc 3x150px de large, soit 450px.

A cela tu ajoutes 15px de margin-right à chaque vignette, soit 3x15=45px pour 3 vignettes.

La largeur de ton bloc parent doit être supérieur à 450+45 soit 495px mais doit avoir une largeur ne permettant pas de mettre 4 vignettes en ligne, soit une largeur inférieur à : 4x150 + 4x15 = 660px.

MAIS, je n'arrive pas à positionner le paragraphe qui suit (il s'agit en fait d'un titre h3).

Celui-ci s'affiche à droite des images et, si je mets clear: both, ou clear: left il y a un grand espace entre la deuxième ligne des images et le titre.

Peut-être un margin-top ou un padding-top hérité d'un autre endroit dans ta css, et appliqué au h3.

Sinon, si tu ne trouves pas, tu peux essayer de rajouter une div supplémentaire entre ta dernière vignette et ton titre h3:

HTML:

<p class="vignette"><img src="6.jpg" alt="6" width="75" height="98" /><br />
  Texte image 6</p>

<div class="clear"></div>

  <h3>Titre</h3>
  <p>blabla</p>

CSS:

.clear { clear: both; height: 1px; overflow: hidden; }

Mick

[Nullette]

Merci mick38

Comme tu expliques bien.

Effectivement mes titres h3 ont

padding: 5px 0 5px 0;

Je crois que maintenant c'est bon. (Je dis je crois, car sur les différents navigateurs tout s'affiche bien, mais dans Dreamweaver ça s'affiche bizarre (la div est au milieu derrière les images ).

J'ai augmenté la largeur et la hauteur des vignettes et j'ai mis

<div class="clear"></div>

avant le titre.

La page avec les images

[mick38]

Je crois que maintenant c'est bon. (Je dis je crois, car sur les différents navigateurs tout s'affiche bien, mais dans Dreamweaver ça s'affiche bizarre (la div est au milieu derrière les images ).

Je n'ai jamais utilisé Dreamweaver et ne sais donc pas ce que ça implique. Mais si le résultat obtenu est correct dans la plupart des navigateurs alors je pense aussi que c'est bon.

Mick

[Nullette]

Grâce à tes explications. Merci