tonygot
11-22-2012, 01:34 PM
Hello everyone.
I have been creating a website (http://gotminifigures.com) over the last month, learning along the way using coding forums and various other resources on the net.
I am stumped at this current point where I have coded 4 of the latest products to appear on my main page. If I adjust my php/mysql code, I can get one product to show in my div, but the remaining products jump outside the div. For example when I set it to 6 products, 1 product will stay in the div and the remaining 5 products will line up below the div.
If I adjust the CSS, I can get the products to appear inline, inside the required area, but then the background div vanishes. If I adjust the height to auto, max-height and it seems adjusting the css is the only way that I can get the items to display and move around.
The link above is a temporary solution so visitors have something mildly decent to look at. Here is the link (http://www.gotminifigures.com/delete2.phphttp://) of what I am actually working on, along with the appropriate code below.
PHP Code.
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 4"); // You can change the limit to the number you wish to
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$product_name = $row["product_name"];
$subpartnumber = $row["subpartnumber"];
$price = $row["price"];
echo '<div class="productDisplay">';
echo '<div class="smallprodgap"></div>';
echo "<div class=\"smallprodtitleb\">{$row['product_name']}</div>";
echo '<div class="smallprodphoto">';
echo '<div class="smallphotoHolder"><img src="../store/inventory_images/' . $id . '.jpg" width="116" height="118" alt="Series 1"> </div>';
echo '</div>';
echo '<div class="smallprodyearb">Year: <strong>2012</strong></div>';
echo '<div class="smallprodpartnum">Part # <strong>' . $subpartnumber . '</strong></div>';
echo '<div class="smallprodprice">$<strong>' . $price . '</strong></div>';
echo '</div>';
echo'</div>';
}
?>
CSS Seperate Style Sheet.
.lastItemsAdded {
background-image:url(images/542x250.jpg);
background-repeat:no-repeat;
padding-top: 15px;
width: 542px;
height: auto;
min-height: 250px;
}
.productDisplay {
background-image:url(images/smallprodbacks.jpg);
background-repeat:no-repeat;
background-position:center;
width: 135px;
height: 199px;
float: left;
}
Thank you in advance for helping me out and pointing me in right direction. I am clearly a noob!!
I have been creating a website (http://gotminifigures.com) over the last month, learning along the way using coding forums and various other resources on the net.
I am stumped at this current point where I have coded 4 of the latest products to appear on my main page. If I adjust my php/mysql code, I can get one product to show in my div, but the remaining products jump outside the div. For example when I set it to 6 products, 1 product will stay in the div and the remaining 5 products will line up below the div.
If I adjust the CSS, I can get the products to appear inline, inside the required area, but then the background div vanishes. If I adjust the height to auto, max-height and it seems adjusting the css is the only way that I can get the items to display and move around.
The link above is a temporary solution so visitors have something mildly decent to look at. Here is the link (http://www.gotminifigures.com/delete2.phphttp://) of what I am actually working on, along with the appropriate code below.
PHP Code.
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 4"); // You can change the limit to the number you wish to
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$product_name = $row["product_name"];
$subpartnumber = $row["subpartnumber"];
$price = $row["price"];
echo '<div class="productDisplay">';
echo '<div class="smallprodgap"></div>';
echo "<div class=\"smallprodtitleb\">{$row['product_name']}</div>";
echo '<div class="smallprodphoto">';
echo '<div class="smallphotoHolder"><img src="../store/inventory_images/' . $id . '.jpg" width="116" height="118" alt="Series 1"> </div>';
echo '</div>';
echo '<div class="smallprodyearb">Year: <strong>2012</strong></div>';
echo '<div class="smallprodpartnum">Part # <strong>' . $subpartnumber . '</strong></div>';
echo '<div class="smallprodprice">$<strong>' . $price . '</strong></div>';
echo '</div>';
echo'</div>';
}
?>
CSS Seperate Style Sheet.
.lastItemsAdded {
background-image:url(images/542x250.jpg);
background-repeat:no-repeat;
padding-top: 15px;
width: 542px;
height: auto;
min-height: 250px;
}
.productDisplay {
background-image:url(images/smallprodbacks.jpg);
background-repeat:no-repeat;
background-position:center;
width: 135px;
height: 199px;
float: left;
}
Thank you in advance for helping me out and pointing me in right direction. I am clearly a noob!!