Bonjour,

Je viens ici aujourd'hui à la recherche d'assistance sur un problème que je ne comprend pas concernant d'une part un retour à la ligne qui ne fonctionne pas et un espacement incompréhensible..

Voici le code Html

<section id="activite"><!-- images + populaire-->

            <div class="background2">
                <h2 class="title-herbergements"> Les plus populaires</h2> <i class="fas fa-chart-line"></i>

                    <div class="lateral_card">
                    <div class="img-lateral_card"> <img class="img-lateral_card" src="../projet_booki/images/hebergements/4_small/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg" alt="img_sunrise">
                    </div>
                      <a href="#"><h4 class="h4-title_2">Hôtel Le soleil du matin</h4> </a> 
                            <p class="p-placements">nuit à partir de <span class="bold-price">128€</span></p>
                                <div class="card-likes">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                   </div>
                <div class="lateral_card">
                    <div class="img-lateral_card"> <img class="img-lateral_card" src="../projet_booki/images/hebergements/4_small/aw-creative-VGs8z60yT2c-unsplash.jpg" alt="img_splo">
                    </div>
                        <div id="text-box">
                       <a href="#"><h4 class="h4-title_2">Au coeur de l'eau Chambre D'hôtes</h4></a>
                            <p class="p-placements">nuit à partir de <span class="bold-price">71€</span></p>
                                <div class="card-likes">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                        </div>        
               </div>
               <div class="lateral_card">
                <div class="img-lateral_card"> <img class="img-lateral_card" src="../projet_booki/images/hebergements/4_small/febrian-zakaria-sjvU0THccQA-unsplash.jpg" alt="img_blue&white">
                </div>
                  <a href="#"><h4 class="h4-title_2">Hôtel Tout bleu et blanc </h4> </a> 
                        <p class="p-placements">nuit à partir de <span class="bold-price">68€</span></p>
                            <div class="card-likes">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
               </div>
           </div>
           </div>
        </section> 
    </div>

et voici le code CSS :

.fa-chart-line
{
    position: relative;
    left: 350px;
    bottom: 40px;
}
#activite {
    width: 40%;
    padding: 2rem 10%;
    margin-left: auto;
}
.background2
{
    display: flex;
    flex-direction: column;
    background-color: #F2F2F2;
    width: 400px;
    height: 700px;
    border-radius: 25px 25px 25px 25px;
}

.lateral_card
{
    display: flex;
    justify-content: end;
    flex-direction: column;
    width: 350px;
    height: 170px;
    background-color: white;
    box-shadow: 0px 5px 20px #999;
    border-radius: 15px 15px 15px 15px;
    border: 6px solid white;
    margin-top: 3%;
    margin-left: 5%;
    margin-bottom: 3%;
    object-fit: contain;
}

.img-lateral_card
{
    display: flex;
    justify-content: flex-start;
    object-fit: cover;
    width: 150px;
    height: 160px;
    border-radius: 15px 0px 0px 15px;
    position: relative;
    top: 65.5px;
}
.p-placements
{
    position: relative;
    top: -25%;
    left: 50%;
}

.card-likes
{
    position: relative;
    top: 20%;
    left: 50%;
}

.h4-title_2
{
    position: relative;
    top: -20%;
    left: 45%;
}

.h4-title:hover
{
    color:#0065FC;
}
.h4-title_2:hover
{
    color: #0065FC;
}

voici deux screens (sous forme de queries pour le deuxième) vous allez pouvoir voir rapidement mes problèmes :/

es problèmes sont lui suivants :

- Problème de titre sur la deuxieme card

- Problème de marge sur les sous-titres (nuit a partir de..)

Cependant je ne sais pas comment faire retourner à la ligne (white-space ne fonctionne pas :/ )

et je ne comprend pas l'équart de marge entre les sous titres des cards sachant que c'est du copier coller de la première card template..

-
Edité par Xaryos 29 novembre 2021 à 18:09:28