Oh yeahhh quelqu'un a résolu mon topic !!!!
C'était un problème d'affichage "relative" et "absolute" des éléments.
Un GRAND MERCI pour votre aide !
@Ryle, Or et Spols ! BIG thanks !!!!

à partir d'une image difficile de t'aider sans y passer beaucoup de temps.
fais un fiddle ou partage la page web online et on trouvera ce qui cloche

a vue d'oeil mais sans garantie, je dirais que ton image et la div qui la contient est encore dans le flux et décale tout, applique un position: absolute sur l'image et ne met pas de div autour

Salut @Spols !

Ah mais c'est cool c'est presque bon ! :D
J'ai mis les éléments dans l'ordre mais il y a un grand décalage et il ne prend pas en compte le background.
Comme si tout avait bougé de la hauteur d'une vignette vers le bas :
- [url]https://drive.google.com/file/d/1ftsgmXxlxNdRFWwRqoRkMUWMoTLju3Lf/view?usp=sharing[/url]
- [url]https://drive.google.com/file/d/1mhsGmPh98acUmAnbyVCvhG-MVuA2whBX/view?usp=sharing[/url]

Tu sais comment régler ca ?
Grand merci !!! :)

Code html
[code]<?php while ($donnees = $reponse->fetch()) { ?>

<div class="vignette">
<div><img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu" class="imglieu"/></div>
<div class="overlay"></div>
<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>
<?php } ?>[/code]

Code CSS
[code]/* Vignette */

.vignette
{
font-family: Montserrat;
max-width: 270px;
max-height: 302px;
border-radius: 6px;
display: inline-flexbox;
float: left;
margin: 2px;
position: static;
}

.overlay
{
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
width: 270px;
height: 302px;
position: absolute;
top: 0;
}

.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;
}[/code]

je pense que le plus simple est de mettre les élément dans l'ordre que tu veux afficher, image, un overlay avec le gradient , les textes et drapeau
il est possible de jouer sur l'ordre d'affichage en css avec z-index, mais si tu as accés au code html, c'est mieux.

ce qui veux dire aussi que ton gradient est mieux avec une div dédié que sur le container.

concernant l'attribut position, le mieux est de mettre le contenant en relative. on peut alors s'aligner sur lui pour les alignement des éléments enfants. Eléments enfants qu'on positionne alors en absolute

https://jsfiddle.net/sw23bqgo/1/#&togetherjs=ipHI1H2tzG


Un autre solution serait de mettre l'image de fond en background-image mais l'alignement est plus compliqué

Hello @Spols,

Il faudrait que les vignettes soient alignées avec le background gris en haut.
Le background gris a été créé en CSS avec .vignette.
Et les images sont uploadés automatiquement depuis SQL dans la bouche php dans un fichier image.

L'image originale devrait ressembler à cela: [url]https://drive.google.com/file/d/1GdvujvXrwKsb5uaeEe3ch3EpJpenrNLk/view?usp=sharing[/url]

Deuxième problème : le background est un sorte de transparent qui devrait venir DEVANT l'image mais ce n'est pas pris en compte. je ne sais pas comment mettre le background DEVANT l'image en affichant les infos.

Merci de ton aide !

j'ai pas compris ton problème, dans quelle sesn est le décallage ? quelle est le rendu final recherché ?

Hello, personne pour répondre à ce topic ? :roll:

Hello tout le monde,

J'ai un bug d'affichage qui vient du CSS je pense mais je ne sais pas comment le résoudre.
1. Il y a un décalage entre l'image et le background.
2. Le background qui doit jouer un filtre transparent ne s'applique pas. Comment le faire passer au dessus de l'image ?

Une idée pour résoudre ca ? |*()
Merci !

Résultat visuel actuel: [url]https://drive.google.com/file/d/1PFhVf2GpgOTt31NOHWMgrPdgFHYc32kN/view?usp=sharing[/url]

code html:

[code]**** 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');
?>
<?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>
[/code]

Code CSS:

[code]/* Vignette */
.vignette
{
background: 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;
}
[/code]