Jump to content

Recommended Posts

Hi, im creating a script for a website that will list products, i have the basic construct which lists the products from the database but it lists then vertically, i have set the width of each 'product' to 200px so i could have around 3 colums and many rows.

 

can anybody advise how i would make them run vertically aswell as horizontally?

 

my code below:

 

<?php
include_once("include/globals.php");

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">

    <?php 
        
        //Get database Results
        $result = mysql_query("SELECT * FROM Products WHERE is_active = 1") or die(mysql_error());
        
        //keeps getting the next row until no more records
        while($row = mysql_fetch_array($result))    {
        
        //echo results ($result)
        echo '<div id="holder">';
        echo '<div class="title">' . $row['Name'] . '</div>';
        //insert image here
        echo '<div class="image">';
        echo '<img src="' . $row['image'] . '" width="100" alt="">';
        echo '</div>';
        
        echo '<div class="tag_line">';
        echo $row['Tag_Line'];
        echo '</div>';
        
        
        echo '<div class="price">Now Only: £';
        echo $row['Website_Price'];
        echo '</div>';
        
        echo '<div class="prod-footer"></div>';
        echo '</div>';
        
        
        
        }
    
    ?>    </div>
    
    </body>
</html>

 

table structure:

 

Field  Type  Null  Default  Comments  MIME

ID int(11) No     

product_code varchar(255) No     

Name varchar(255) Yes  NULL   

Tag_Line varchar(255) Yes  NULL   

Description varchar(255) Yes  NULL   

Specification varchar(255) Yes  NULL   

Technical_Info varchar(255) Yes  NULL   

Cost_Price_USD decimal(10,2) Yes  NULL   

Cost_Price_GBP decimal(10,2) Yes  NULL   

Built_in_delivery decimal(10,2) Yes  NULL   

Trade_Price decimal(10,2) Yes  NULL   

Trade_Plus_Price decimal(10,2) Yes  NULL   

Website_Price decimal(10,2) Yes  NULL   

Is_active int(1) No     

image varchar(255) Yes  NULL

 

 

Link to comment
https://forums.phpfreaks.com/topic/212900-row-problem/
Share on other sites

By vertically do you mean output the results as

1 6 11

2 7 12

3 8 13

4 9 14

5 10 15

 

rather than

1 2 3

4 5 6

7 8 9

10 11 12

13 14 15

 

Have look at my code example I posted in this thread

http://phpfreaks.com/forums/index.php/topic,308888.msg1459408.html#msg1459408

Link to comment
https://forums.phpfreaks.com/topic/212900-row-problem/#findComment-1108880
Share on other sites

ok, got the layout right but my CSS wont repeat/loop and i cant see where im going wrong......

 

<div id="main"><?php

$query = "SELECT * FROM Products WHERE is_active = 1";
$result = mysql_query($query) or die(mysql_error());


// add all the rows into the $results multi-dimensional array
$results = array();
while ($row = mysql_fetch_assoc($result))
    $results[] = $row;

/* Here is how we output the results vertically */

// set the number of columns
$cols = 3;
// work out how many rows will be needed
$rows = ceil(count($results) / $cols); 

echo '<div id="holder">'."\n";

// output the rows
for($j = 0; $j < $rows; $j++)
{
    echo "  <tr>\n";
    
    // output the columns
    for($i = 0; $i < $cols; $i++)
    {
        $x = ($i*$rows)+$j;
        if(isset($results[$x]))
        {
            $row = $results[$x];
            echo '<div class="title">'.$root.''.$row['Name'].'</div><div class="image">'.'<a href="product_detail.php?id="><img src="' . $row['image'] . '" width="100" alt="" border="0"></a></div>'.'<div class="tag_line">'.$row['Tag_Line'].'</div><div class="price">'.$row['Website_Price']. "</div>\n" . '<div class="prod-footer"></div>';
        }
        else
        {
            echo "    \n";
        }
    }
    
    echo " \n";
}

echo '</div>';?>

Link to comment
https://forums.phpfreaks.com/topic/212900-row-problem/#findComment-1108899
Share on other sites

Well persaverance prevailed!! (not sure if i can spell tho!! its late)

the result is below:

 

 

<?php 
        
        //Get database Results
        $result = mysql_query("SELECT * FROM Products WHERE is_active = 1") or die(mysql_error());
        
        //keeps getting the next row until no more records
        while($row = mysql_fetch_array($result))    {
        
        //echo results ($result)
        echo '<div id="holder">';
        echo '<div class="title">' . $row['Name'] . '</div>';
        //insert image here
        echo '<div class="image">';
        echo '<a href="product_detail.php?id="><img src="' . $row['image'] . '" width="100" alt="" border="0"></a>';
        echo '</div>';
        
        echo '<div class="tag_line">';
        echo $row['Tag_Line'];
        echo '</div>';
        
        
        echo '<div class="price">Now Only: £';
        echo $row['Website_Price'];
        echo '</div>';
        
        echo '<div class="prod-footer">';
        echo "<a href=\"product_detail.php?id={$row['ID']}\">
            more info
            </a></li>";    
        echo '</div>';
        echo '</div>';
        
        
        
        }
    
    ?>

Link to comment
https://forums.phpfreaks.com/topic/212900-row-problem/#findComment-1108932
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.