googlit Posted September 8, 2010 Share Posted September 8, 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 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 Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted September 8, 2010 Share Posted September 8, 2010 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 Quote Link to comment Share on other sites More sharing options...
googlit Posted September 8, 2010 Author Share Posted September 8, 2010 hi, thanks for that, i will give it a go..... still getting to grips with loops etc if possiable could you supply an example based on my code? if not no worries i will crack it eventually thanks for your help Quote Link to comment Share on other sites More sharing options...
googlit Posted September 8, 2010 Author Share Posted September 8, 2010 getting there...... got the content now just got to apply the CSS styles to it....... :-\ Quote Link to comment Share on other sites More sharing options...
googlit Posted September 8, 2010 Author Share Posted September 8, 2010 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>';?> Quote Link to comment Share on other sites More sharing options...
googlit Posted September 8, 2010 Author Share Posted September 8, 2010 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>'; } ?> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.