Question

Currently I am able to achieve the desired affect showing products based on their category. However I feel the way I have gone about it isn’t the best way. On the product page there are gaps between the products top and bottoms as HERE . I am presuming the gap is due to a error in my php code rather than the way I am laying out the html. Any help would be greatly appreciated.

So to clarify I am wondering if the code used is the correct way to achieve this and if anyone can spot why the gap is there that would be perfect.

Just to clarify it is defiantly not a problem with css. No margin is applied and I want the black line completely gone. It should be all white.

Thank you and have a great new year.

PHP code

<?php
function get_posts($id = null, $cat_id = null) {
    $posts = array();

    $query ="SELECT  `products`.`id` AS  `name` ,  `products_cat`.`id` AS  `category_id` , `products`.`name` AS `title` ,  `description` ,  `price` ,  `sale` ,  `picture` 
FROM  `products` 
INNER JOIN  `products_cat` ON  `products`.`prod_id` =  `products_cat`.`id` ";

    if ( isset($id) ) {
    $id = (int) $id;
    $query .= " WHERE `products`.`id` = {$id}";
    }

    if ( isset($cat_id) ) {
        $cat_id = (int) $cat_id;
        $query .= " WHERE `products_cat`.`id` = {$cat_id}";
}

    $query .= " ORDER BY `products`.`price` DESC";

    $query = mysql_query($query);
    echo mysql_error();
    while ( $row = mysql_fetch_assoc($query) ) {
        $posts[] = $row;
        }

    return $posts;
}

function category_exists($field, $value) {
    $field = mysql_real_escape_string($field);
    $value = mysql_real_escape_string($value);

    $query = mysql_query("SELECT COUNT(1) FROM `products_cat` WHERE `{$field}` = '{$value}'");

    echo mysql_error();

    return ( mysql_result($query, 0) == '0' ) ? false : true; 
}

?>

HTML CODE

<?php
include("../script/dbconnect.php");
include("../script/get_product.php");

$posts = get_posts(null, $_GET['id']);

?>

<div style="width:100%; height:150px; background-color:white;"><span style="font-family:saxMonoRegular; letter-spacing:2px; display:block; font-size:4.5em; text-align:center; padding-top:15px;"> Blog </span></div>

<div class="link" style="width:100%; background-color: white">
<?php
foreach ( $posts as $post ) {
    if ( ! category_exists('name', $post['name']) ) {
        $post['name'] = 'Uncategorised';
    }
    ?>      
    <ul class='featured'>

            <li class='headhighlight'><?php echo $post['title']; ?></li>  
            <li class='pricehigh'><?php echo $post['price']; ?></li>
            <li class='imagefeat'><img class='imagelink' src='<?php echo $post['picture']; ?>' alt='$name'></li>                
            </ul>   

    <?php
    }
?>
</div>

Answer 1

Iam not shure if iam understand right, but i would say its more a problem of CSS.

Try:

div.link {
  padding: 0px;

}

ul.featured {
  display: block;
  width: 200px;
  margin: 0px;
}