Jump to content

problem with rows

googlit

By googlit
in PHP Coding Help

 Share

Recommended Posts

googlit Member

googlit

Posted
Posted

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 horizontally aswell as vertically?

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 '<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>';
        
        
        
        }
    
    ?>    </div>
    
    </body>
</html>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

I would suggest using a table - displaying tabular data is what they are for. Here is one possible solution:

 

<?php
    
//Set maximum columns for the output
$max_columns = 3;
    
include_once("include/globals.php");
    
//Get database Results
$query = "SELECT * FROM Products WHERE is_active = 1";
$result = mysql_query($query) or die(mysql_error());
    
if(mysql_num_rows($result)===0)
{
    $output = "No records found.\n";
}
else
{
    $output = "<table>\n";
    //keeps getting the next row until no more records
    $recNo = 0;
    while($row = mysql_fetch_array($result))
    {
        $recNo++;
        //Start new row when needed
        if($recNo%$max_columns==1)
        {
            $output .= "<tr>\n";
        }
        //Create TD for record
        $output .= "<td>";
        $output .= "<div class=\"title\">{$row['Name']}</div>";
        $output .= "<div class=\"image\">";
        $output .= "<a href=\"product_detail.php?id=\"><img src=\"{$row['image']}\" width=\"100\" alt=\"\" border=\"0\"></a>";
        $output .= "</div>";
        $output .= "<div class=\"tag_line\">{$row['Tag_Line']}</div>";
        $output .= "<div class=\"price\">Now Only: £{$row['Website_Price']}</div>";
        $output .= "<div class=\"prod-footer\"><a href=\"product_detail.php?id={$row['ID']}\">more info</a></div>";
        $output .= "</td>\n";
        //Close row when needed
        if($recNo%$max_columns==0)
        {
            $output .= "</tr>\n";
        }
    }
    //Close final row if needed
    if($recNo%$max_columns!=0)
    {
        $output .= "</tr>\n";
    }
    $output .= "<table>\n";
}
?>
<!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 echo $output; ?>
    </div>

</body>
</html>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

thanks for that,

 

i always looked at tables as 'going back in time' i spent so much time learning css so i would have a better way to disply pages that i now virtually ignore the use of tables as 'div' tags are far more flexible.

 

Tables have a purpose - namely for displaying tabular data. But, it would be easy enough to modify that code to use on CSS and DIVs to get the same effect. Off the top of my head, I would set the default "float" style of each DIV as float:left. Then in the code above, whenever the last record in a row is encountered, set that value to nothing. That should cause a line break after each n record.

Link to comment
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.

×
 Share
Go to topic listing
×
×
  • 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.