How to divide the results from the DB into different lines as in an online store

Question

How to divide the results from the DB into different lines as in an online store

Navigation

#1 by (1 votes)

0

Hello

I'm trying to distribute the results from the DB into lines with 3 results at a time, as we see in many online stores, but the formatting is quite disorganized.

I've still tried to open 3 results through an If clause, but as I said above it goes badly formatted. For example, the first 3 results have the paragraphs almost on top of the pictures. In the 4th result, the "is-inside" div is well formatted.

I've been back for quite a few hours and I do not do anything right.

Here's my code on the country.php page:

<!DOCTYPE html>
<html>
    <head>
    <title>Great Train Journeys</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/country.css" rel="stylesheet" type="text/css"/> 
    <link href="css/footer.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="js/country.js" type="text/javascript"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" 
rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" 
rel="stylesheet">
</head>
<body>  
    <?php
        include_once 'mod_menu.php';
        include_once 'php/includes/constants.php';
    ?>
<div class="overlay">
    <section id="country_img">
    <?php        
        $sql_img = "SELECT * FROM countries WHERE country_id = ". 
             $_GET['countryPage_id']." ";
        $result_img = mysqli_query($mysqli, $sql_img);
            while($row_img = mysqli_fetch_assoc($result_img)){
    ?>               
   <img src="<?php echo $site_root; ?>/images/country_header_images/<?php 
        echo $row_img['header_img'] ?>" alt=""/>
   <h3><?php echo  $row_img['country_name']; ?></h3>
</section><!-- End of country_img section--> 

<a href="#" id="backgroundButtonUp"><span id="buttonUp"></span></a>
<section id="about">
    <div id="introCountry">
        <?php echo $row_img['intro']; ?>
    </div>

<section class="featured"> 
    <div class="is-featured">
<?php
$abreLista = false;
$contador = 0;

$sql_journeys = "SELECT * FROM country_page_journeys WHERE countryPage_id = 
".$row_img['country_id']." ORDER BY journeys_id";
$result_journeys = mysqli_query($mysqli, $sql_journeys);
      while($row_journeys = mysqli_fetch_assoc($result_journeys)){
          $contador++;
         if($abreLista) {
            $contador = 0;
            $abreLista = false;
?>        
<div class="is-inside">      
     <?php
        }
     ?>
    <a href="" class="is-link">
        <figure class="is-img">
            <img src="<?php echo $site_root; ?>/images/Thumbnails_journey/<?
             php echo  $row_journeys['thumbnail']; ?>"/>
        </figure>
        <h2 class="is-h2"><?php echo $row_journeys['titulo']; ?></h2> 
    </a>
        <p class="is-p"><?php echo $row_journeys['resumo']; ?></p>   
<?php
    if($contador == 3) {
    $abreLista = true;
?>
</div>
<?php 
    } 
       }
          }
?>
</div>   
</section> 
</section>
<?php
require_once 'mod_footer.php';
?>
</div>
</body>
</html>

And the CSS ( country.css ) of this page is the following (I put the styles from the "featured" section, the rest belong to other elements on the page):

.featured {
    display: block;
    margin-bottom: 4%;
}

.is-featured {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2%;
    position: relative;
    width: 100%;
}

.is-inside {
    display: table;
    padding: 0;
    margin: 0;
    width: 30%;
}

.is-link {
    display: block;
    text-decoration: none;
}

.is-link:hover {
    opacity: 0.9;
}

.is-img {
    display: block;
    margin: 5%;
}

.is-inside img {
    display: block;
    height: auto;
    width: 100%;
}

.is-h2 {
    color: black;
    display: inline;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    padding: 1% 0;
}

.is-h2::after {
    border-bottom: 7px black solid;
    content: '';
    display: block;
    margin: 0 auto;
    padding-top: 5%; 
    position: relative;
    width: 45px;
}

.is-p {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight:  400;
    font-style: italic;
    margin-top: 5%;
}

Q: When I made this code, I had not yet learned how to use Prepared Statements. I will change the code after resolving this problem. Thanks

php mysql

asked by anonymous 26.07.2017 / 20:12

1 answer

Setting up xamarin Is it possible to use pyad (module for active directory) in linux?

score 1 · Answer 1

It's missing you closing div .is-inside , try this way:

    $sql_journeys = "SELECT * FROM country_page_journeys WHERE countryPage_id = ".$row_img['country_id']." ORDER BY journeys_id";
    $result_journeys = mysqli_query($mysqli, $sql_journeys);
    while($row_journeys = mysqli_fetch_assoc($result_journeys)) {
        $contador++;
        if($abreLista) {
            $contador = 0;
            $abreLista = false;
            ?>
                <div class="is-inside">
            <?
        }
    ?>
    <a href="" class="is-link">
        <figure class="is-img">
            <img src="<?php echo $site_root; ?>/images/Thumbnails_journey/<?php echo  $row_journeys['thumbnail']; ?>"/>
        </figure>
        <h2 class="is-h2"><?php echo $row_journeys['titulo']; ?></h2> 
    </a>
    <p class="is-p"><? echo $row_journeys['resumo']; ?></p>   
    <?
        if($contador == 3) {
            $abreLista = true;
            ?>
                </div>
            <?
        }
    ?>
    </div>
</div>