Discussion :

[jason69]

Salut à tous!

Voila j'aimerai afficher une galerie de photos sans utiliser de tableaux... Mais voila j'ai un petit souci que je ne comprends pas trop, peut être certains d'entre vous savent de quoi cela peut venir :

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.blocPhotos
{
  padding-left:20px;
  padding-right:20px;
}
 
.Photo
{
  border-style:solid;
  border-color:#CCCCCC;
  border-width:1px;
 
  display:inline;
  padding:15px;
  margin:5px;
}

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div class="blocPhotos" align="center">
  <div class="Photo">
    <img src="Groupes/1/Photos/Icones/6.jpg" align="absmiddle">
  </div>
  <div class="Photo">
    <img src="Groupes/1/Photos/Icones/5.jpg" align="absmiddle">
  </div>
  <div class="Photo">
    <img src="Groupes/1/Photos/Icones/11.jpg" align="absmiddle">
  </div>
  <div class="Photo">
    <img src="Groupes/1/Photos/Icones/7.jpg" align="absmiddle">
  </div>
  <div class="Photo">
    <img src="Groupes/1/Photos/Icones/12.jpg" align="absmiddle">
  </div>
  <div class="Photo">
    <img src="Groupes/1/Photos/Icones/9.jpg" align="absmiddle">
  </div>
  <div class="Photo">
    <img src="Groupes/1/Photos/Icones/10.gif" align="absmiddle">
  </div>
</div>

Pour que vous compreniez mieux le résultat que cela donne, j'ai mis en PJ une capture d'écran du résultat.

Moi ce que je voudrais c'est afficher une bordure autour de chaque image mais j'ai surement du oublier un petit quelque chose non?

Merci d'avance!

[Dan_A]

Et avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.Photo img
{
  border:1px solid #CCCCCC;
}

[Mahefasoa]

Je crois que ce que Jason attend c'est d'afficher les bordure autour de chaque image avec le div autour (défini par les bordures).
Avec ta méthode, la bordure seront "collées" aux images!
Le problème Jason c'est que tu as utilisé inline pour display donc la solution serait l'utilisation de "block" et non d'"inline pour display; puis d'utiliser left pour float.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
.Photo
{
  border-style:solid;
  border-color:#CCCCCC;
  border-width:1px;
 
  display:block;
  padding:15px;
  margin:5px;
  float: left;
}

Le seul hic est que les images ne seront plus centrées car elles sont retirées du flot naturel. Une solution peut se trouver sur ce lien. Je note en passant que c'est sur ce forum que j'ai trouvé ce lien. La méthode est basée sur l'utilisation de Javascript en utilisant un autre div conteneur qui sera centré et en essayant de mettre en pratique la formule suivante pour centrer les divs:

Code formule :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
taille = nombre de boîtes * ( width + padding + margin-left ) + margin-right

Bon courage et @+