Hello developpers !

J

jeremygoldyn

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.
 
Cat_in_the_hat said:
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 :)
Click to expand...
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
HTML: 
$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
CSS: 
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;
}
 
You must log in or register to reply here.
Back
Top