28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je souhaite mettre dans une page une sorte de galerie photo.

Je souhaite qu'il y ait 3 photos sur une ligne. Je souhaite que les photos soit centré dans desc blocs (horizontalement et verticalement.

Je rencontre 2 problèmes :
- je ne sais pas comment dire à mon block qu'il fasse la même hauteur que la longeur
- je n'arrive pas à aligner ma photo verticalement.

Voila ce que j'ai réussi à faire :

<table>
					<tr>
						<td><div style="width:100%;height:300px;"><div style="text-align:center;vertical-align:center;"><img style="width:70%;" src="../photos/photo1.jpg"></div></div></td>
						<td align="center"><img style="width:70%;" src="../photos/photo1.jpg"></td>
						<td align="center"><img style="width:70%;" src="../photos/photo1.jpg"></td>
					</tr>
					<tr>
						<td align="center"><img style="width:70%;" src="../photos/photo1.jpg"></td>
						<td align="center"><img style="width:70%;" src="../photos/photo1.jpg"></td>
						<td align="center"><img style="width:70%;" src="../photos/photo1.jpg"></td>
					</tr>
				</table>


Merci pour vos conseils.
Bonjour franfr57,

Pour aligner ta photo verticalement essayes :
vertical-align: middle;

Pour ton autre problème, si j'ai bien compris tu souhaites que ton div contenu dans une cellule du tableau aie la même hauteur que sa largeur qui est 100% de la largeur de son parent ? Smiley nut Il va me falloir encore un café...

Par ailleurs je te conseils d'utiliser une feuille de style pour tes propriétés CSS, ça simplifiera ton code et tu t'y retrouveras mieux.
Merci,

m'ai le vertical-align ne fait rien si la cellule du tableau n'a pas de hauteur défini (elle prend la hauteur de l'image pas plus).
Je ne sais pas si c'est possible de faire que la hauteur soit égale à la longeur... Cela est très embêtant car en fonction de la résolution, je souhaite que l'utilisateur puisse voir bien le site. C'est pour cela que je met en %.

J'utilise une feuille de style, mais une fois que j'ai réussi à faire ce que je souhaite...