Hello developpers !

[jeremygoldyn]

Hello everybody,
I am a new developper (html, CSS, PHP).
First, I am specialized in UX Design.
I am from Belgium
I wanted to developed my own digital projects to better understand what was behind the scene.
And it is cool
Now I have challenges so Iam here.

 

[.CSS]

Hi Jermygoldyn,

Welcome to the fourms. I too have an invested interest in PHP but my projects have been on hiatus for a while now. What challenges do you have?

 

[jeremygoldyn]

Hello.CSS, I created a topic in CSS.
I am fighting with an issue regarding positioning and background design.
If I solve that, I will finish the first step of my website !
I f you can help me it should be very cool
Big thanks.

 

[.CSS]

Hi, I will certainly take a look. What is the issue you're having? Feel free to drop me a private message.

 

[jeremygoldyn]

Hi .CSS
I reported the issue here : https://htmlforums.net/threads/css-display-bug.2093/

Thank you very much !

 

[Cat_in_the_hat]

Hi .CSS
I reported the issue here : https://htmlforums.net/threads/css-display-bug.2093/

Thank you very much !

I'll also go and have a peek at this. Can you further explain the issue in any way? I am having trouble understanding the exact issue

 

[jeremygoldyn]

I'll also go and have a peek at this. Can you further explain the issue in any way? I am having trouble understanding the exact issue

Hi Cat ,

I created a list of "vignettes" = a thumbnail with an image, a specific place, a country and a region.
Those information are displayed by a "while" in php / SQL by that code.

Everything works fine.

But in CSS, what I would like to achieve is not ok.

What I want : check here
What I have now: check here

I see 3 issues:

1. There is a shift between the "vignette" and the text for "Grottes de Remouchamps" per example. I don't know how to fix the content and the position of the vignette to align everything.

2. I don't know how to apply the gradient over the image.

3. I don't know how to remove the blank between the title at the top "Endroits à Découvrir" and the first image.
When I put per example a background image in CSS, it displays well at the top just below the title.?
But not the images

I have the feeling that despite all <div> are in the "vignette"'s <div> it doesn't take care about it.

Thank you for your help !

HTML code

$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 } ?>

CSS code

h1 {
    color: #232838;
    font-family: 'montserrat';
    font-size: 28px;
    letter-spacing: 0;
    line-height: 34px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 68px;
    width: 490px;
}

/* 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;
}