Discussion :

[arckaniann]

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 css :

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

1
2
3
4
5
6
 
tr{
 
   display:table-cell;
 
}

mais avec IE cela ne fonctionne pas

merci pour l'aide

[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.

[arckaniann]

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 php :

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
 
<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 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
 
<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 css :

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

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

[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

Pour aligner horizontalement des images (éléments inline), text-align suffit.

[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

[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

[Candygirl]

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

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.

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 :

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

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 :

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

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.

[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 css :

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

</a>

[Muchos]

j'ai mis un tr dans ma feuille de style

[arckaniann]

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

Code css :

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

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

maintenant j'ai

Code css :

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
 
 
#table{
 
margin-left:50%;
 
 
}
 
tr{
 
 
}
 
 
td{
 
 
 text-align:center;
 
 
 }

sans le tr sa ne marche pas,la oui