jeremygoldyn
New member
Hello everyone,
I am working on a personal travel website displaying all cool places to visit.
Language : HTML, PHP
I have a display bug which is coming from CSS I think but I don't know how to fix it.
1. There is a gap between the image and the background.
2. The background which should display a transparent filter does not apply. How to make it pass above the image?
Any idea to solve this? | * ()
Thank you !
Current visual result: see here
html code:
CSS code:
I am working on a personal travel website displaying all cool places to visit.
Language : HTML, PHP
I have a display bug which is coming from CSS I think but I don't know how to fix it.
1. There is a gap between the image and the background.
2. The background which should display a transparent filter does not apply. How to make it pass above the image?
Any idea to solve this? | * ()
Thank you !
Current visual result: see here
html code:
HTML:
**** 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']; ?></p></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag">
<img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu"/>
</div>
<?php } ?>
</body>
</html>
CSS code:
CSS:
/* Vignette */
.vignette
{
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
font-family: montserrat;
display: inline-block;
width: 270px;
height: 302px;
border-radius: 2px;
}
.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;
}
.vignette img
{
object-fit: cover;
width: 270px;
height: 302px;
object-position: 100% 0;
}