googlit Posted September 16, 2010 Share Posted September 16, 2010 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 https://forums.phpfreaks.com/topic/213569-problem-with-rows/ Share on other sites More sharing options...
Psycho Posted September 16, 2010 Share Posted September 16, 2010 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 https://forums.phpfreaks.com/topic/213569-problem-with-rows/#findComment-1111652 Share on other sites More sharing options...
googlit Posted September 16, 2010 Author Share Posted September 16, 2010 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. Link to comment https://forums.phpfreaks.com/topic/213569-problem-with-rows/#findComment-1111779 Share on other sites More sharing options...
Psycho Posted September 16, 2010 Share Posted September 16, 2010 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 https://forums.phpfreaks.com/topic/213569-problem-with-rows/#findComment-1111784 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.