Bug affichage
Posté : 29 déc. 2020, 17:18
Hello,
J'ai un ensemble de vignettes sur une page mais il y un décalage d'une des vignettes car le cette case contient un texte plus long.
Quelqu'un sait comment résoudre ca ?
Je voudrais que le texte reste aligné à la même hauteur que les autre et que le drapeau soit aussi aligné avec les autres.
Les infos viennent de SQL via une boucle "while" php.
visuel du bug: https://drive.google.com/file/d/160MEyi ... sp=sharing
code hmtl
code css
J'ai un ensemble de vignettes sur une page mais il y un décalage d'une des vignettes car le cette case contient un texte plus long.
Quelqu'un sait comment résoudre ca ?
Je voudrais que le texte reste aligné à la même hauteur que les autre et que le drapeau soit aussi aligné avec les autres.
Les infos viennent de SQL via une boucle "while" php.
visuel du bug: https://drive.google.com/file/d/160MEyi ... sp=sharing
code hmtl
Code : Tout sélectionner
**** ENDROITS À DÉCOUVRIR <br><br />
<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom LIMIT 16');
?>
<?php while ($donnees = $reponse->fetch()) { ?>
<div class="vignette">
<div class="lieu"><?php echo $donnees['lieu_nom']; ?></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<div><img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag"/></div>
<div><img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu" class="imglieu"/></div>
</div>
<?php } ?>
</body>
</html>Code : Tout sélectionner
/* Vignette */
.vignette
{
font-family: Montserrat;
max-width: 270px;
max-height: 302px;
border-radius: 6px;
display: inline-flexbox;
float: left;
margin: 2px;
position: static;
}
.imglieu
{
object-fit: cover;
width: 270px;
height: 302px;
object-position: 100% 0;
border-radius: 6px;
}
.flag
{
max-width: 20px;
max-height: 15px;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top: 100px;
}
.lieu
{
font-size: 20px;
color: white;
text-transform: uppercase;
text-align: center;
position: relative;
top: 200px;
}
.pays
{
font-size: 15px;
color: white;
position: relative;
top: 200px;
text-align: center;
}