Partage
  • Partager sur Facebook
  • Partager sur Twitter

Retour à la ligne et espaces incompréhensible

*

Sujet résolu
    29 novembre 2021 à 17:55:49

    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

    • Partager sur Facebook
    • Partager sur Twitter

    Retour à la ligne et espaces incompréhensible

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown