Forum : HTML .CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour à tout le monde
je suis nouveau et debutant. et j'ai besoin d'un coup de pouce svp!

Entourez votre code en utilisant "<div class="hebergements-and-populaires">
                <section class="hebergements">
                    <h2 class="section-title">Hébergements à Marseille </h2>
                <div class="hebergements-and-populaires">
                    <div class="card">
                   <img class="img1" src="images/hebergements/fred-kleber.jpg" alt="photo1">
                    <h3> Hôtel du port</h3>
                    <p>Nuit à partir de 52€</p>
                    <p>
                        <i class="fa-solid fa-star star-blue"></i>
                        <i class="fa-solid fa-star star-blue"></i>
                        <i class="fa-solid fa-star star-blue"></i>
                        <i class="fa-solid fa-star star-blue"></i>
                        <i class="fa-solid fa-star star-grey"></i>
                    </p></div>```" pour bien le mettre en forme. (ne copiez pas trop de code)

Ce que je veux
Je sais que c'est simple mais moi je rame ,
donc voila.
j'ai six photos. Je voudrais mettre trois sur trois en verticals.
je suis arriver a mettre trois photos Mais les trois autres juste en bas des premiers?
pour info j'ai pas encore le code css
Merci d'avance
Décrivez ce que vous cherchez à obtenir.

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

uniuc

Bonjour,

Sur ton code je vois pas mal de balises <div> qui ne sont pas fermées je suppose qu'elles se ferment plus bas.

Pour tes photos ce n'est pas très clair, je vais partir sur le principe que tu veuille deux colonnes de 3 photos

Un exemple rappide :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.container{

    display: flex;
    justify-content: center;

}
.colUne{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: red;
    width: 217px;
    height: 423px;
}
.colDeux{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: blue;
    width: 217px;
    height: 423px;
}
.img1{
    width: 200px;
    height: auto;
}

</style>
</head>
<body>
<header></header>
<div class="card">
<div class="container">
<div class="colUne">
<img class="img1" src="https://cdn.pixabay.com/photo/2023/05/27/18/15/barn-swallows-8022044_1280.jpg" alt="photo1">
<img class="img1" src="https://cdn.pixabay.com/photo/2023/05/27/18/15/barn-swallows-8022044_1280.jpg" alt="photo1">
<img class="img1" src="https://cdn.pixabay.com/photo/2023/05/27/18/15/barn-swallows-8022044_1280.jpg" alt="photo1">
</div>
<div class="colDeux">
<img class="img1" src="https://cdn.pixabay.com/photo/2023/05/27/18/15/barn-swallows-8022044_1280.jpg" alt="photo1">
<img class="img1" src="https://cdn.pixabay.com/photo/2023/05/27/18/15/barn-swallows-8022044_1280.jpg" alt="photo1">
<img class="img1" src="https://cdn.pixabay.com/photo/2023/05/27/18/15/barn-swallows-8022044_1280.jpg" alt="photo1">
</div>
</div>
</div>
</body>
</html>

Mozerprod

Auteur

Bonjour
Merci bcp pour votre reponse et desole pour le retard.
je vais esseye vos conseills je vous tiens au jus

HTML .CSS

2 réponses