0

Olá

Estou a tentar distribuir os resultados provenientes da BD em linhas com 3 resultados de cada vez, tal como vemos em diversas lojas online, mas a formatação sai bastante desorganizada.

Ainda tentei fazer uma abertura de 3 resultados através de uma clausula If,mas tal como disse acima sai mal formatado. Por exemplo, os 3 primeiros resultados tem os paragrafos quase em cima das imagens. No 4º resultado é que o div "is-inside" fica bem formatado.

Já estou há bastantes horas de volta disto e já não faço nada de jeito.

Eis o meu codigo na página country.php:

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

E o CSS (country.css) desta página é o seguinte (Coloquei os estilos a partir da section "featured", o restante pertence a outros elementos na página):

.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%;
}

P.S: Quando fiz este codigo, ainda não tinha aprendido a usar Prepared Statements. Irei mudar o código depois de resolver este problema. Obrigado

1 Resposta 1

1

Esta faltando você fechar a div .is-inside, tente desta forma:

    $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>
4
  • Caro Roberto. Não indentei correctamente as 3 ultimas linhas do meu codigo quando escrevi a pergunta. Se verificar, tanto a section como os divs já estão a fechar. Pode verificar outra vez por favor?
    – Fabio
    Commented 26/07/2017 às 23:58
  • Posta o HTML que é gerado nessa página, e posta também o seu código CSS Commented 27/07/2017 às 2:56
  • Já editei. Fiz o mesmo codigo para a navegação da página para gerar listas de 7 links de cada vez dispostas em várias colunas, mas desta vez não tou a conseguir gerar linhas com 3 resultados de cada vez.
    – Fabio
    Commented 27/07/2017 às 10:44
  • Caro Roberto. Não estava a ter em conta o CSS e era aqui que deveria ter jogado primeiro. Mudei alguns estilos do container "is-featured" e ficou resolvido. Obrigado
    – Fabio
    Commented 27/07/2017 às 14:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .