Productenlijst in 2 kolommen

Door Baris Tur op 11-03-2013 08:37 gewijzigd op 11-03-2013 08:37

1.144 views

Beste PHP'ers,

Ik ben nieuw met PHP en ook op deze forum maar ik zit met het volgende:

Ik heb mijn productenlijst nu in 1 kolom dus alle producten onderelkaar
maar ik wil ze graag in 2 kolommen.

zo heb ik het nu

zo wil ik het hebben

mijn php code:

<?php
//error reporting
error_reporting('e_all');
ini_set('display_errors','1');
?>
<?php
// Run a select query to get my latest 6 items
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
$dynamicList = "";
$sql = mysql_query("select * from products order by date_added desc limit 6");
$productcount = mysql_num_rows($sql);
if ($productcount > 0) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$price = $row["price"];
$product_name = $row["product_name"];
$date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
$dynamicList .= '<table width="280" height="27" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="70"><a href="product.php?id=' . $id . '"><img src="inventory_images/'.$id.'.jpg" alt="' . $product_name . '" width="100" height="70" border="1" /></a></td>
<td width="251" valign="top">' . $product_name . '<br />
€' . $price . '<br />
<a href="product.php?id=' . $id . '"><img src="images/bekijk_product.jpg" width="100" height="30"></a>
</a>
</td>
</tr>
</table>';

}

} else {
$dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

Ward van der Put

11-03-2013 10:50

Ik zou de tabel eruit halen en elk artikel in een div zetten. Met bijvoorbeeld width: 45% (of een ander percentage kleiner dan 50%) en float: left kun je de div'jes vervolgens zwevend langs elkaar weergeven.

Een eleganter alternatief is bijvoorbeeld de div'jes een vaste breedte in pixels geven, zodat het aantal producten dat naast elkaar wordt getoond netjes wordt aangepast aan de beschikbare ruimte in het browservenster.

Baris Tur

11-03-2013 11:19

Maar dan krijg ik toch niet automatisch mijn dynamiclist op volgorde?

Want als ik een product toevoeg dan komt de dynamiclist automatisch op de productenpagina.

Ik wil niet dat ik handmatig elk product erin moet zetten

Ward van der Put

11-03-2013 11:26

Je haalt met deze query toch de zes laatst toegevoegde producten uit de database?

<?php
$sql = mysql_query("select * from products order by date_added desc limit 6");
?>

Baris Tur

11-03-2013 18:45 gewijzigd op 11-03-2013 19:02

Ik heb nu dit:

$dynamicList .= '<a href="product.php?id=' . $id . '"><img src="inventory_images/'.$id.'.jpg" alt="' . $product_name . '" width="100" height="70" border="1" />
		 </a><br/>
          ' . $product_name . '<br/>
            €' . $price . '<br/>
            <a href="product.php?id=' . $id . '"><img src="images/bekijk_product.jpg" width="100" height="30"></a>';
	  
}

<div id="content">
<div id="producten"><?php echo $dynamicList; ?></div>


</div>

#producten{
float:left;
width:150px;
height:150px;
font-size:15px;
color:#CC0000;
font:Arial, Helvetica, sans-serif, bold;
font-size:12px;
text-decoration:none;
}

Ariën

11-03-2013 18:58 gewijzigd op 11-03-2013 18:58

Zet je code even tussen [code]-tags

Erwin H

11-03-2013 19:12

Je propt nu alle producten in 1 div en geeft die div een float. Zo verandert er nog niets. Elk afzonderlijk product moet je in een element zetten en die elementen (die je allemaal dezelfde class geeft) float je.

Baris Tur

11-03-2013 19:17

Ik snap dus niet hoe dat moet.

Erwin H

11-03-2013 19:36


<div id="producten">
  <div class="product">Hier product 1</div>
  <div class="product">Hier product 2</div>
  <div class="product">Hier product 3</div>
  <div class="product">Hier product 4</div>
  <div class="product">Hier product 5</div>
  <div class="product">Hier product 6</div>
</div>

en in je css:


.product{ width: 45%; float: left; }

- SanThe -

11-03-2013 19:59


<div id="content">
<?php
while(...) // of welke loop dan ook
{
	echo '<div id="producten">' . $dynamicList . '</div>';
}
?>
</div>

Baris Tur

11-03-2013 20:47

Ik krijg het helaas nog steeds niet voor elkaar.

@Erwin, wat zou ik bij "Hier product 1" moeten zetten.

Reageren

Inloggen om te reageren