Ian Hunt Posted June 21, 2017 Share Posted June 21, 2017 Hi, Firstly thank you Larry for sorting my last problem. I can get my database to display the information ok but I have a small problem where my database information seems to display on a new line. It is a div consisting of images of kittens for sale and some text about the kitten. I want them display inline. Here is my php/mysql script and also the stylesheet. I am using bootstrap grid. PHP script: <section class="row"><?php/* This script retrieves all available kittens from the database. */// Connect and select:$dbc = mysqli_connect('localhost', 'root', '', 'new_era_bengals');// Define the query:$query = 'SELECT * FROM tbl_kittens_for_sale';?><div class="col-md-4"><div class="gallery"><?phpif ($r = mysqli_query($dbc, $query)); // Run the query. // Retrieve and print every record: while ($row = mysqli_fetch_array($r)) { print " <img src={$row['Image']} > <p>{$row['Name']} {$row['Sex']}</p> "; } ?></div></div></section> CSS: .gallery { margin-bottom: 1em; padding: 1em; background: #663300; display: inline-block; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }.gallery img { width: 100%; height: auto; }.gallery p { margin-top: 1em; padding-left: 1em; color: #F5F2E8; text-transform: uppercase; } Hope anyone can help. Many thanks. Link to comment Share on other sites More sharing options...
abigail Posted June 22, 2017 Share Posted June 22, 2017 // Retrieve and print every record: while ($row = mysqli_fetch_array($r)) { print " <img src={$row['Image']} > <p>{$row['Name']} {$row['Sex']}</p> "; } I think the <p> is creating a new line. Link to comment Share on other sites More sharing options...
Ian Hunt Posted June 24, 2017 Author Share Posted June 24, 2017 Thanks Abigail. However it did n't seem to sort the problem. Link to comment Share on other sites More sharing options...
Larry Posted June 26, 2017 Share Posted June 26, 2017 Presumably this is a CSS issue, which unfortunately is one I'm not able to help much with. Maybe try creating a static page that does what you want in a good WYSIWYG editor and then exporting that to find the right combination of HTML and CSS to use? Link to comment Share on other sites More sharing options...
Ian Hunt Posted June 27, 2017 Author Share Posted June 27, 2017 Thanks Larry, I think I know the problem but unsure of the syntax. At the moment it is printing and repeating all the database info in one big div. I possibly think the div needs a loop on the outside but unsure how to go about it. Here is how my divs are set up. <section class="row"><div class="col-md-4"><div class="gallery"> <?php My php info as above ?> </div></div></section> Hope someone can help. Thanks. Link to comment Share on other sites More sharing options...
Ian Hunt Posted June 29, 2017 Author Share Posted June 29, 2017 Hi, I have been looking into this and it seems a do while statement would possibly do the trick. Does anyone have any ideas how I would write the syntax for this? All the best Ian Link to comment Share on other sites More sharing options...
abigail Posted June 29, 2017 Share Posted June 29, 2017 Just looking at the code, without trying to actually test it, it seems you already have a while loop. If your problem is an extra line between the image and the text, then that <p> would be the reason. Otherwise, try assigning the values to variables then printing it out on a separate line of code (after retrieving from the database). Maybe that will give you more information. It is the HTML that is giving lines, not the CSS. Link to comment Share on other sites More sharing options...
Ian Hunt Posted June 30, 2017 Author Share Posted June 30, 2017 Hi Abigail, Thanks for looking. I want to print and repeat 3 separate divs/columns on the same line and so on, so it loops and goes onto the next line if more than 3. Bit hard to explain I guess if can't see what I am trying to achieve. At the moment it is printing everything in one long column and I am sure I need a do while loop or similar on the outside of the div. Unsure of what the code would be. Any ideas gratefully appreciated. Ian Link to comment Share on other sites More sharing options...
abigail Posted June 30, 2017 Share Posted June 30, 2017 I thought your problem was an additional new line. Every HTML DIV and <P> will start a new line. So you will need a counter to print a <p> and </p>, every 3 items instead of every item. Otherwise post some code. The CSS won't matter. Link to comment Share on other sites More sharing options...
Ian Hunt Posted June 30, 2017 Author Share Posted June 30, 2017 PS. I guess what I am trying to achieve is not unlike the old Dreamweaver Repeat Region. Link to comment Share on other sites More sharing options...
Ian Hunt Posted June 30, 2017 Author Share Posted June 30, 2017 No, it's the whole div that needs to be repeated 3 times across one line. Link to comment Share on other sites More sharing options...
Larry Posted July 1, 2017 Share Posted July 1, 2017 I thought I had written about this somewhere, or put it in these forums, but it sounds like what you need to do is a counter as Abigail said. Within the loop you increment a counter and when that counter equals three, you start a new row and reset the counter. After the loop you just need to make sure you complete the row (in case, for example, the loop made an incomplete row). Link to comment Share on other sites More sharing options...
Recommended Posts