Page 1 sur 1

Grid display

Posté : 28 juil. 2011, 22:42
par Ben2pop
Bonjour j'ai ecrit un script a parir d'un tutorial que j ai vu sur le Net, pour un site de e-commerce afin de creer un display sous forme de tableau,
Cependant le script ne marche pas .. les photos ne s alignant pas ..

voila le script si quelqu'un pourrait y jeter un coup d oeuil...

<?php
//Run a select query
include"storescripts/connect_to_mysql.php";
$dynamicList = "";
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC");
$i = 0;
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$product_name = $row["product_name"];
$price = $row["price"];
$date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
if ($i % 4 == 0) {

$dynamicList .= '<table width="18%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td><div align="center"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" width="160" height="160" /></a></div></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="73%">Prix: $' . $price . ' </td>
<td width="27%">Details</td>
</tr>
</table></td>
</tr>
</table></td>';
} else {
$dynamicList .= '<td><table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td><div align="center"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" width="160" height="160" /></a></div></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="73%">Prix: $' . $price . ' </td>
<td width="27%">Details</td>
</tr>
</table></td>';
}
$i++;
}
$dynamicList .= ' </tr></table>';
}
else {
$dynamicList = "You have no products listed in our store yet";
}
mysql_close();
?>


Merci bcp les amis !

Re: Grid display

Posté : 29 juil. 2011, 09:41
par jojolapine
Bonjour,

Déjà quel résultat html (sans php) souhaiterais tu obtenir ?
Je ne comprend pas pourquoi tu sembles essayer de construire plusieurs <table> alors que multiplier les <tr> serait beaucoup plus simple, moins lourd et plus juste sémantiquement parlant...

Et met tes codes entre les balises
 c'est mieux ;)

Re: Grid display

Posté : 29 juil. 2011, 11:47
par Ben2pop
@jojolapine

Merci pour ton attention
Le resultat attendu serait un tableau de 5 colonnes avec dans chaque cellule la photo avec en dessous son prix et un lien details
Donc g creer un grand tableau avec une cellule pour la photo et en dessous deux petit tableaux pour le prix et le lien detail

Now le problème c ke avec le PHP chaque tableau avec son prix et detail , s'aligne verticalement alors ke j amerai que ca s aligne horizontalement sur 5 collonnes
puis que ca aille a la ligne.

Voici le lien de mon site ke tu ai une idee http://www.yarcov.com/ecommerce/index.php ainsi ke le lien du tutorial sur lekel g baser mon script php
tout est en anglais par contre http://www.developphp.com/view_lesson.p ... Array_Data

j espere te lire rapidement et merci encore de ton aide
raphael

Re: Grid display

Posté : 29 juil. 2011, 12:07
par jojolapine
Bonjour, je trouve que tu te compliques vraiment la vie avec ce code html... Il manque un </tr> dans ton code...
Mais avant de programmer en php, part d'un code html qui fonctionne, ensuite automatise tout ça avec php!

Sinon une code html tel que celui ci:
<ul>
	<li>
		<a href="product.php?id=11">
			<img src="inventory_images/11.jpg" />
		</a><br />
		Prix: $560 | Details
	</li>
	<li>
		<a href="product.php?id=12">
			<img src="inventory_images/12.jpg" />
		</a><br />
		Prix: $670 | Details
	</li>
</ul>
AVec le css suivant:

Code : Tout sélectionner

li { list-style-type: none; display:inline-block; padding:10px; } li img { width:160px; height:160px; }
Serait quand même beaucoup plus simple à générer, beaucoup plus léger!
Après certains navigateurs ne supporte pas display:inline-block, du coup tu peux jouer avec la propriété float comme ceci:

Code : Tout sélectionner

li { list-style-type: none; padding:10px; float:left; } li img { width:160px; height:160px; }
Bonne chance ;)

Re: Grid display

Posté : 31 juil. 2011, 14:33
par Ben2pop
Merci bcp de ton aide je v essayer right now ;-)