aligner des images sur ie

Version imprimable

11/06/2012, 21h41
arckaniann

aligner des images sur ie
Bonsoir,

j'ai un problèmes d'alignement avec Ie,mes images sont on va dire générés par php,(dossier image et numéro de l'image en bdd) sur firefox j'utilise ceci
Code:

1 2 3 4 5 6 tr{ display:table-cell; }
mais avec IE cela ne fonctionne pas

merci pour l'aide
11/06/2012, 22h59
NoSmoking

Bonsoir,
je ne saisie pas le pourquoi mettre un display:table-cell sur une balise TR.

Un peu plus de code HTML/CSS nous permettrait sûrement de t'aider, en nous expliquant mieux le problème constaté et le résultat à atteindre.

bin en le mettant sur cette balise sa me met mes images a l'horizontal,je vois pas pourquoi mais bon

je vais mettre le code php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<table>
	<tr>
<?php
 
          $query=$db->prepare('SELECT zoom
	                                 FROM articles
					 INNER JOIN types ON id_articles = id_types
				      WHERE machine="jeu ps3 neuf"LIMIT 0,4');
	$query->execute()or die(print_r($db->errorinfo()));
        while($data=$query->fetch())
	{
echo '<td><img src="../image/image/'.$data['zoom'].'" alt="imagedejeu"/</a</td>';?>
	</tr>
<?php
	}
$query->CloseCursor();
?>
</table>

sa génération via le code source

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<table>
    <tr>
        <td><img src="../image/image/571862.jpg" alt="image de jeu" /></a></td>		
 
 
 
	</tr>
<td><img src="../image/image/872666.jpg" alt="image de jeu" /></a></td>		
 
 
 
	</tr>
<td><img src="../image/image/771873.jpg" alt="image de jeu" /></a></td>		
 
 
 
	</tr>
<td><img src="../image/image/473404.jpg" alt="image de jeu" /></a></td>		
 
 
 
	</tr>
</table>

et le code css

Code:

1
2
3
4
5
6
7
8
9
10
11
 
table{
 
  margin-left:50%;
 
}
tr{
 
   display:table-cell;
 
}

12/06/2012, 00h13
Muchos

IE8 et inférieures ne supportent pas toutes les propriétés display, notamment table-cell.
Néanmoins, comme le fait remarquer NoSmoking, un display: table-cell; sur une <tr> est aberrant puisqu'il s'agit déjà d'une cellule de tableau :aie:

Pour aligner horizontalement des images (éléments inline), text-align suffit.
12/06/2012, 00h37
arckaniann

mes images sont en vertical,si je met le table-cell sur le tr les images sont horizontal mais que je mettes text-align sur le td ou le tr,elle reste vertical
12/06/2012, 00h55
Muchos
Clarifions un peu la situation :
- Vos images gardent la même forme tout le temps. C'est leur alignement (horizontal ou vertical) qui change.
- On utilise pas <table> pour faire une mise en page. Ça sert à faire des tableaux de données. Utilisez des <div> et display: table, table-cell… pour ça, même si ça n'est pas nécessaire.
- Pour aligner une image dans une boite, text-align suffit :)

Citation:

Envoyé par Muchos

Néanmoins, comme le fait remarquer NoSmoking, un display: table-cell; sur une <tr> est aberrant puisqu'il s'agit déjà d'une cellule de tableau :aie:

Oui mais non ;) le TD n'est pas une cellule de tableau mais une rangée de tableau, soit, logiquement avec un display:table-row par défaut. Mais oui, c'est aberrant puisqu'il n'y a pas de tr sans td à l'intérieur qui, lui, est en display:table-cell.
Citation:
Envoyé par arckaniann
mes images sont en vertical,si je met le table-cell sur le tr les images sont horizontal mais que je mettes text-align sur le td ou le tr,elle reste vertical
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <table> <tr> <td><img src="../image/image/571862.jpg" alt="image de jeu" /></a></td> </tr> <td><img src="../image/image/872666.jpg" alt="image de jeu" /></a></td> </tr> <td><img src="../image/image/771873.jpg" alt="image de jeu" /></a></td>
C'est parce que tu n'as qu'une seule cellule par ligne. Qui plus est tu as une erreur de structure avec un td en dehors des tr. Forcément, chaque ligne vient l'une en dessous de l'autre et donc tes images avec. Pour qu'elles soient côtes à côtes dans un tableau, tu dois avoir plusieurs cellules dans une seule ligne(ce qui implique une boucle dans ton php pour fixer le nombre de colonnes et donc le nombre de td dans chaque tr):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <table> <tr> <td><a><img src="../image/image/571862.jpg" alt="image de jeu" /></a></td> <td><img src="../image/image/872666.jpg" alt="image de jeu" /></a></td> <td><img src="../image/image/872666.jpg" alt="image de jeu" /></a></td> </tr> <tr> <td><a><img src="../image/image/571862.jpg" alt="image de jeu" /></a></td> <td><img src="../image/image/872666.jpg" alt="image de jeu" /></a></td> <td><img src="../image/image/872666.jpg" alt="image de jeu" /></a></td> </tr> </table>
(au passage il manque des ouvertures <a>)

Le choix d'un tableau n'est effectivement peut-être pas la meilleure option, niveau sémantique, pour présenter les images; à voir selon le contexte.

12/06/2012, 11h11
arckaniann

bon affaire résolu,j'ai mis un tr dans ma feuille de style et le text-align passe sur firefox et IE

j'ai du faire un copier coller de la ligne venant d'un lien et j'ai oublié d'enlever le

Code:

</a>
12/06/2012, 23h57
Muchos

Citation:

Envoyé par arckaniann

j'ai mis un tr dans ma feuille de style

:aie:

je ne comprend pas se que tu veux dire,dans ma feuille de style css j'avais
Code:

1 2 3 4 5 6 7 8 9 10 11 table{ margin-left:50%; } tr{ display:table-cell; }
maintenant j'ai
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #table{ margin-left:50%; } tr{ } td{ text-align:center; }
sans le tr sa ne marche pas,la oui