Discussion :

[virgul]

Bonjour,

J'ai un petit problème que je n'arrive pas à résoudre et surtout que je ne comprend pas!

Sur mon site web j'ai une page de photo et je voudrais faire un tableau qui aie
3 ligne et trois colonne mais pour la dernière j'aimerais que il n'y aie que deux colonne mais que la séparation soit centré.

Problème dans IE l'affichage est correct mais pas dans FF c'est décalé au lieu d'être centré.

Vous pouvez voir le résultat ici.

Auriez-cous un idée pour corriger?

Car j'ai essayé de quand même mettre une troisième colonne avec 1% (la première) pour que ma deuxième ligne de colonne soit centré et pas lié avec une des lignes au-dessus mais a voir ca pose problème à FF.

Merci pour votre aide

Thierry

[blueice]

Pourquoi utilises-tu les tableaux pour faire ta présentation ?

Essaye ca :

Code :

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

1
2
3
4
 
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>

Code :

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

1
2
3
4
 
div.float {
 float: left;
 }

[virgul]

Pourquoi utilises-tu les tableaux pour faire ta présentation ?

Parce que je ne voyait pas de meilleur moyen.

Essaye ca :

Code :

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

1
2
3
4
 
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>

Code :

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

1
2
3
4
 
div.float {
 float: left;
 }

Tu suggère si j'ai bien compris que pour la dernière ligne de mon tableau avec mes deux images centré que j'utilise div (et donc pas de tableau) et de cette facon les deux serait centrer?

alors une balise div avec align à gauche et un div avec un align à droite?

C'est bien ca?

[blueice]

Les tableaux ne sont pas fait pour faire du design, le fait d'utiliser les CSS pour le design, te permettra de faire plus facilement des modifs, de même que la solution que j'ai donné te permet de remplir automatiquement l'espace, demain il te suffit de rajouter une ou des photos sans problème.

Maintenant si tu veux vraiment centrer les images du bas, il te suffit de donner une autre classe...
Mettons que les miniatures fassent 100px de large avec un padding de 10px
il y a 5 miniatures par ligne et la dernière ligne n'en a que 3
La classe ".centre" aura un 'padding-right' 100px+10px+10px+10px+(éventuellement les bordures, si ton image à une bordure de 1px, il te faudra rajouter 2 pixels)= 130px

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.float {
float:left;
padding:10px
}
 
.centre {
float:left;
padding:10px 10px 10px 130px
}

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
18
19
20
21
22
23
24
25
 
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>
<div class="centre">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>
<div class="float">
			<a href="#"><img src="toto.jpg" border="1" alt="" /></a>
</div>

Il suffit d'appliquer la classe ".centre" à la première image(div) de la dernière ligne.
Tes trois images sont centrés

A toi de le calculer pour ton cas :-)
C'est une solution, que je viens d'imaginer pour ton cas, il y en a peut être d'autres...