Jump to content
Larry Ullman's Book Forums

Getting Database Info To Display Inline


Recommended Posts

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">
<?php
if ($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

    // 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

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

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

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

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

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

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

 Share

×
×
  • Create New...