What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Hello developpers !


New member
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.
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?
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.
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>
<?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 */

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

    object-fit: cover;
    width: 270px;
    height: 302px;
    object-position: 100% 0;
    border-radius: 6px;

    max-width: 20px;
    max-height: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 100px;

    font-size: 20px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: 200px;

    font-size: 15px;
    color: white;
    position: relative;
    top: 200px;
    text-align: center;