Alignement horizontal de photos

[djodjo64]

Bonsoir à tous,

Je souhaite aligner horizontalement 3 photos, qui auront chacune un titre centré juste en dessous.

Mon HTML :

<div class="vignettes">
<a href="#"><img class="images" src="images/photos1.jpg" /></a>
<a href="#"><img class="images" src="images/photos2.jpg" /></a>
<a href="#"><img class="images" src="images/photos3.jpg" /></a>
</div>

CSS :

.vignettes 
{ 
	text-align:center; 
} 

Les photos sont bien centrées et alignées, mais je n'arrive pas à y placer mes titres pour chaque photos.

Auriez-vous un tuyau ?

Par avance, merci.

[yuston]

Il faut englober tes photos dans un autre div encore, et essayer de placer ces div en display: inline-block.

Si c'est pour faire des légendes, tu as d'autres méthodes pour obtenir des effets bien sympa, en HTML5/CSS3 par exemple: http://www.elated.com/articles/smooth-fading-image-captions-with-pure-css3/

[Aenoa]

Sinon, tu a l'utilisation de "tableaux" qui peut être utile, et un simple attribut alig="center" dans la balise <table> te centre le tout

[Dadou]

Surtout pas des tableaux pour de la mise en page, c'est certes une solution de facilité, mais à ne pas utiliser

[Aenoa]

pas pour la mise en page en elle même, non, pour ça les DIVS + CSS reste le mieux. Mais dans une div, un tableau ayant une photo, un retour chariot et une courte description, ça rends très bien.

[Dadou]

Et ce que tu présente c'est de la présentation avec des tableaux, et ce n'est pas fait pour. Utilisons les balises HTML pour leur VRAI usage

[yuston]

On peut toujours utiliser les tableaux pour classer les photos (je n'ai jamais réellement compris ce que sont les données tabulaires) mais par la suite, la mise en page de ces photos doivent se faire en CSS (donc pas d'attributs valign ou align ou de border etc.)

[djodjo64]

Au debut, j'avais mis les 3 photos dans un tableau, avec les legendes (=3 colonnes + 2 lignes).

Mais les legendes etaient trop decalées vers le bas par rapport aux photos et je n'avais pas trouver de solution pour les remonter.

C'est pour cela que j'ai opté pour une mise en place sans tableau.

Je vais essayer des les placer selon les indication de yuston ; je vous tiens au courant.

Merci encore.

[captain_torche]

(je n'ai jamais réellement compris ce que sont les données tabulaires)

Des données tabulaires, ce sont des données de même nature, que l'on peut donc comparer.

Par exemple, un résultat de recherche de boutique, qui liste différents produits avec leurs caractéristiques aurait tout à gagner en utilisant un tableau : un produit par ligne, une caractéristique par cellule.

Pour en revenir à la mise en page, c'est en effet à proscrire : c'est un détournement de la sémantique des balises, et c'est aussi intelligent que d'utiliser la balise <p> pour tout le site.

[Aenoa]

Il faut englober tes photos dans un autre div encore, et essayer de placer ces div en display: inline-block.

Si c'est pour faire des légendes, tu as d'autres méthodes pour obtenir des effets bien sympa, en HTML5/CSS3 par exemple: http://www.elated.com/articles/smooth-fading-image-captions-with-pure-css3/

Cela reste, je pense, l'une des meilleures solutions envisageable. C'est simple, joli, plaisant à voir et non encombrant suite au :hover.

[djodjo64]

J'ai du mal à trouver le bon code ; pouvez-vous me donner un petit coup de main ?

merci.

[Ciseur]

J'ai du mal à trouver le bon code ; pouvez-vous me donner un petit coup de main ?

merci.

Comme la dit yuston, englobe les photo dans une div (j'ai rajouter les légendes mais je suis pas sur que tu voulais les mettre en dessous) :

<div class="vignettes">
	<div>
		<img src="image.jpg" alt="titre photo" />
		<h3>titre photo</h3>
	</div>
	<div>
		<img src="image.jpg" alt="titre photo" />
		<h3>titre photo</h3>
	</div>
	<div>
		<img src="image.jpg" alt="titre photo" />
		<h3>titre photo</h3>
	</div>
</div>

Note que l'usage de H3 n'est pas obligatoire tout dépend du reste de ton code.

Ensuite dans les styles, tu met tes DIV en display inline-block (j'ai de plus centré les légendes) :

.vignettes {
	text-align: center;
}
.vignettes div {
	display: inline-block;
}

[captain_torche]

Tant de divs, c'est un peu écoeurant.

Puisqu'on parle ici d'une liste de photos, pourquoi ne pas utiliser les balises appropriées ?

<ul class="vignettes">
        <li>
                <img src="image.jpg" alt="titre photo" />
                <h3>titre photo</h3>
        </li>
        <li>
                <img src="image.jpg" alt="titre photo" />
                <h3>titre photo</h3>
        </li>
        <li>
                <img src="image.jpg" alt="titre photo" />
                <h3>titre photo</h3>
        </li>
</ul>

[Dadou]

Tout a fait d'accord avec Captain

[Ciseur]

Oui tout à fait !

Je m'en veux de ne pas y avoir pensé. Un peu fatigué en ce moment :/

[djodjo64]

Merci beaucoup pour vos conseils, mais avec ce code, les vignettes sont alignées verticalement, alors que je souhaiterais que celles ci soient alignées horizontalement.

[Ernestine]

Ce code marche très bien et les vignettes sont bien à l'horizontal Si tu as pris la version du Captain Torche (avec le ul et les li), il faut évidemment remplacer .vignettes div par .vignettes li dans les styles CSS donnés par Ciseur.

Si tu as fait tout ça et que ça reste à la verticale, c'est sûrement parce que tu utilises IE6 ou IE7. En effet, ces deux navigateurs ne connaissent pas la propriété inline-block. Pour ces deux-là, il faut procéder autrement, voir : Inline-block dans tous les navigateurs modernes.

[Nullette]

Je vais sûrement dire une bêtise, mais j'ai une page qui date de longtemps avec deux lignes de 3 images horizontales :

<p class="vignette"><img src="bibi.jpg" alt="Elle" width="75" height="86" /><br />
Yeux bleus</p>

 <p class="vignette"><img src="toto.jpg" alt="Lui" width="75" height="77" /><br />
   Brun</p>
 <p class="vignette"><img src="titi.jpg" alt="Autre" width="75" height="88" /><br />
   Blond</p>
 <p class="vignette"><img src="babou.jpg" alt="Babou" width="75" height="85" /><br />
   Jeune</p>
<p class="vignette"><img src="fafa.jpg" alt="Fafa" width="75" height="96" /><br  />
  Moins jeune</p>

<p class="vignette"><img src="dani.jpg" alt="Dani" width="75" height="98" /><br />
  Le plus grand</p>

CSS

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

[djodjo64]

Effectivement, je n'avais pas remplacer les div par li... encore merci.

Les photos sont bien horizontale, néamoins, 2 soucis se posent pour moi :

- les légendes sont trop décalées vers le bas par rapport aux photos

- les photos sont trop collées les unes aux autres

Si vous pouvez m'aider une derniere fois sur ce coup là, ce serait tres sympas ; après, promis, je ne vous embette plus !

Merci beaucoup.

[Dadou]

Joue un peu sur les CSS, les marges tu peux les régler.