Gérer les position absolue et les responsive

Question

wede12

17 Apr 2022 à 03:39

je suis entrain de faire le p2 et j'ai terminer la création du p2 mais le problème c'est au niveau du responsive et des icone placé en position absolu quand je veut changer la taille de la page les icone se déplace et j'ai beau mettre les responsive et la balise viewport le code ne prends pas en compte les responsive et les icone se déplace quand je change la taille de la fenêtre.
j'aimerai savoir si vous auriez une solution.
je suis désoler de mettre tous mon code en entier mais je pense que c'est le mieux que je puisse faire pour que vous comprenez la situation au maximum .

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Booki</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,400;1,200&display=swap"
        rel="stylesheet">
    <script src="https://kit.fontawesome.com/c76603cb51.js" crossorigin="anonymous"></script>
</head>

<body>

    <header>
        <img src="images/Booki.png" alt="logo" width="130" height="60" />
        <nav id="hdr">
            <a href="#hebert">Hébergements</a>
            <a href="#vite">activités</a>
        </nav>
    </header>
    <section id="premier">
        <h1>Trouvez votre Hébergement pour des vacanes de rêve</h1>
        <p>En plein centre ville ou en pleine nature</p>
        <form method="post" action="traitement">
            <input type="search" class="seamap" size="12px" placeholder="Marseille,France" />
        </form>
        <div id="map">
            <a href="#"><i class="fa-solid fa-location-dot"></i></a>
        </div>
        <div id="rech">
            <a href="#">Rechercher</a>
        </div>
        <div id="filtres">
            <P>filtres</P>
            <div id="monay">
                <a href="#"><i class="fa-solid fa-money-bill-wave"></i></a>
            </div>
            <div class="money">
                <a href="#">Économie</a>
            </div>
            <div id="fml">
                <a href="#"><i class="fa-solid fa-child-reaching"></i></a>
            </div>
            <div class="famille">
                <a href="#">familial</a>
            </div>
            <div id="coeur">
                <a href="#"><i class="fa-solid fa-heart"></i></a>
            </div>
            <div class="romantique">
                <a href="#">Romantique</a>
            </div>
            <div id="dog">
                <a href="#"><i class="fa-solid fa-dog"></i></a>
            </div>
            <div class="animaux">
                <a href="#">Animaux autorisé</a>
            </div>
        </div>
        <div id="I">
            <div id="i">
                <i class="fa-solid fa-info"></i>
            </div>
            <div id="text_i">
                <p>Plus de 500 logements sont disponibles dans cette ville</p>
            </div>
        </div>
    </section>
    <section id="second">
        <div id="hebergement">
            <article>
                <h2 id="hebert">hébergements à Marseille</h2>
                <div id="premier_heber">
                    <div class="canne">
                        <a href="#"><img src="images/canne.jpg" alt="canne" width="235" height="110" /></a>
                        <div id="text_canne">
                            <a href="#">
                                <h3>Auberge la cannebiére</h3>
                            </a>
                            <a href="#">Nuit a partir de 25€</a>
                        </div>
                        <div class="star">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <div class="star_1">
                                <i class="fa-solid fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <div class="port">
                        <a href="#"><img src="images/port.jpg" alt="port" width="235" height="110" /></a>
                        <div id="text_port">
                            <a href="#">
                                <h3>Hôtel du port</h3>
                            </a>
                            <a href="#">Nuit a partir de 52€</a>
                        </div>
                        <div class="star">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                        </div>
                    </div>
                    <div class="mouette">
                        <a href="#"><img src="images/mouette.jpg" alt="mouette" width="235" height="110" /></a>
                        <div id="text_mouette">
                            <a href="#">
                                <h3>Hôtel Les mouette</h3>
                            </a>
                            <a href="#">Nuit a partir de 76€</a>
                        </div>
                        <div class="star">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <div class="star_1">
                                <i class="fa-solid fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="second_heber">
                    <div class="mer">
                        <a href="#"><img src="images/mer.jpg" alt="mer" width="235" height="110" /></a>
                        <div id="text_mer">
                            <a href="#">
                                <h3>Hôtel de la mer</h3>
                            </a>
                            <a href="#">Nuit a partir de 76€</a>
                        </div>
                        <div class="star">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <div class="star_1">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <div class="panier">
                        <a href="#"><img src="images/panier.jpg" alt="canne" width="235" height="110" /></a>
                        <div id="text_panier">
                            <a href="#">
                                <h3>Auberge le Panier</h3>
                            </a>
                            <a href="#">Nuit a partir de 46€</a>
                        </div>
                        <div class="star">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <div class="star_1">
                                <i class="fa-solid fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <div class="Amina">
                        <a href="#"><img src="images/amina.jpg" alt="amina" width="235" height="110" /></a>
                        <div id="text_amina">
                            <a href="#">
                                <h3>hôtel chez Amina</h3>
                            </a>
                            <a href="#">Nuit a partir de 96€</a>
                        </div>
                        <div class="star">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                        </div>
                    </div>
                </div>
                <a href="#">
                    <h4>Afficher plus</h4>
                </a>
            </article>
        </div>
        <aside>
            <div id="titr">
                <div id="titr_22">
                    <h2>Les plus populaires</h2>
                </div>
                <div id="icon_22">
                    <i class="fa-solid fa-chart-line"></i>
                </div>
            </div>
            <div id="asi_heber">
                <div class="soleil">
                    <a href="#"><img src="images/soleil.jpg" alt="hôt_soleil" width="165" height="117" /></a>
                    <div id="pos">
                        <div id="pos_1">
                            <div id="text_soleil">
                                <a href="#">
                                    <h3>Hôtel le soleil du<br />
                                        matin</h3>
                                </a>
                                <a href="#">Nuit a partir de 128€</a>
                            </div>
                        </div>
                        <div id="pos_2">
                            <div class="star_2">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="eau">
                    <a href="#"><img src="images/eau.jpg" alt="hôt_eau" width="165" height="117" /></a>
                    <div id="pos">
                        <div id="pos_1">
                            <div id="text_eau">
                                <a href="#">
                                    <h3>Au coeur de l'eau<br />
                                        chambres d'hôtes</h3>
                                </a>
                                <a href="#">Nuit a partir de 71€</a>
                            </div>
                        </div>
                        <div id="pos_2">
                            <div class="star_2">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <div class="star_1">
                                    <i class="fa-solid fa-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bleu">
                    <a href="#"><img src="images/bleu.jpg" alt="hôt_bleu" width="165" height="117" /></a>
                    <div id="pos">
                        <div id="pos_1">
                            <div id="text_bleu">
                                <a href="#">
                                    <h3>Hôtel tout bleu et<br />
                                        blanc</h3>
                                </a>
                                <a href="#">Nuit a partir de 71€</a>
                            </div>
                        </div>
                        <div id="pos_2">
                            <div class="star_2">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <div class="star_1">
                                    <i class="fa-solid fa-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </section>
    <section id="trois">
        <h2 id="vite">Activitér a Marseille </h2>
        <div id="act">
            <div id="act_1er">
                <div id="Vieu_port">
                    <div id="V_P">
                        <a href="#"><img src="images/vieu_port.jpg" alt="vieux_port" width="298" height="443"></a>
                    </div>
                    <div id="text_act">
                        <a href="#">Vieux Port</a>
                    </div>
                </div>
                <div id="act_11">
                    <div id="pomegue">
                        <div id="p_g">
                            <a href="#"><img src="images/pomegue.jpg" alt="fort_pomegues" width="298" height="183"></a>
                        </div>
                        <div id="text_act">
                            <a href="#">fort de pomègues</a>
                        </div>
                    </div>
                    <div id="frioul">
                        <div id="f_l">
                            <a href="#"><img src="images/frioul.jpg" alt="ile_frioul" width="298" height="153"></a>
                        </div>
                        <div id="text_act">
                            <a href="#">Îles du frioul</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="act_2eme">
                <div id="calanques">
                    <div id="c_q">
                        <a href="#"><img src="images/calanques.jpg" alt="calanques" width="298" height="443"></a>
                    </div>
                    <div id="text_act">
                        <a href="#">Parcs nationnal des calanques</a>
                    </div>
                </div>
                <div id="act_12">
                    <div id="garde">
                        <div id="d_g">
                            <a href="#"><img src="images/dame.jpg" alt="DAme_garde" width="298" height="177"></a>
                        </div>
                        <div id="text_act">
                            <a href="#">Notre-Dame-de-la-garde</a>
                        </div>
                    </div>
                    <div id="longchamp">
                        <div id="l_c">
                            <a href="#"><img src="images/longchamps.jpg" alt="longchamp" width="298" height="183"></a>
                        </div>
                        <div id="text_act">
                            <a href="#">parcs longchamp</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div id="a_propos">
            <div id="titre_footer">
                <h3>A propos</h3>
            </div>
            <div class="apropos">
                <a href="#">Fonctionnement du site</a>
            </div>
            <div class="apropos">
                <a href="#">Condition général de vente</a>
            </div>
            <div class="apropos">
                <a href="#">Données de confidentialiés</a>
            </div>
        </div>
        <div id="nos_hebergement">
            <div id="titre_footer">
                <h3>Nos hébergements</h3>
            </div>
            <div class="nos_heber">
                <a href="#">charte qualités</a>
            </div>
            <div class="nos_heber">
                <a href="#">Soumettre votre hôtel</a>
            </div>
        </div>
        <div id="assistence">
            <div id="titre_footer">
                <h3>assistence</h3>
            </div>
            <div class="assis">
                <a href="#">Centre d'aide</a>
            </div>
            <div class="assis">
                <a href="#">Nous contacter</a>
            </div>
        </div>
    </footer>
</body>

</html>

body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
}

#premier {
    margin: 50px;
}

header {
    display: flex;
    margin: 40px;
}

#hdr {
    margin-left: 900px;
    padding-top: 30px;
}

#hdr a {
    padding: 20px;
    text-decoration: none;
    color: black;
}

#hdr a:hover {
    color: #0065FC;
    border-top: 3px solid #0065FC;
    padding-top: 67px;
}

#premier h1 {
    font-size: 22px;
    font-family: 'Raleway:,wght@0', sans-serif;
    margin-top: 35px;
}


.seamap {
    background-repeat: no-repeat;
    font-size: 30px;
    border: none;
    border: 3px solid #F2F2F2;
    margin-left: 35px;
}

#map a {
    border: 1px solid #F2F2F2;
    border-top-left-radius: 17px;
    border-bottom-left-radius: 17px;
    width: 36px;
    height: 22px;
    text-align: center;
    background-color: #F2F2F2;
    padding-top: 10px;
    padding-bottom: 10px;
    position: absolute;
    bottom: 450px;
    color: black;
}

#rech {
    border: 1px solid white;
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
    width: 175px;
    height: 42px;
    text-align: center;
    position: absolute;
    bottom: 450px;
    right: 1010px;
    background-color: #0065FC;
}

#rech a {
    color: white;
    font-size: 30px;
    text-decoration: none;
    font-weight: bold;
}

#filtres {
    font-size: 23px;
    font-weight: bold;
    margin-top: 40px;
    display: flex;
}

#monay {
    border: 1px solid white;
    border: none;
    border-radius: 40px;
    background-color: #DEEBFF;
    padding: 12px;
    height: 22px;
    position: absolute;
    bottom: 353px;
    right: 1333px;
}

#monay a {
    color: #0065FC;
}


.money a {
    border: 3px solid #F2F2F2;
    display: flex;
    border-radius: 30px;
    width: 150px;
    height: 30px;
    margin-top: 10px;
    margin-left: 30px;
    text-decoration: none;
    padding-left: 49px;
    padding-top: 10px;
    padding-bottom: 3px;
    color: black;
}

.money a:hover {
    transition: ease 1s;
    background-color: #DEEBFF;

}

#fml {
    border: 1px solid white;
    border: none;
    border-radius: 20px;
    background-color: #DEEBFF;
    padding: 10px;
    height: 24px;
    position: absolute;
    bottom: 353px;
    right: 1109px;
}

#fml a {
    color: #0065FC;
}

.famille a {
    border: 3px solid #F2F2F2;
    display: flex;
    border-radius: 30px;
    width: 120px;
    height: 30px;
    margin-top: 10px;
    margin-left: 30px;
    padding-left: 60px;
    padding-top: 10px;
    padding-bottom: 3px;
    color: black;
    text-decoration: none;
}

.famille a:hover {
    transition: ease 1s;
    background-color: #DEEBFF;
}

#coeur {
    border: 1px solid white;
    border: none;
    border-radius: 40px;
    background-color: #DEEBFF;
    padding: 10px;
    height: 25px;
    position: absolute;
    bottom: 353px;
    right: 887px;
}

#coeur a {
    color: #0065FC;
}

.romantique a {
    border: 3px solid #F2F2F2;
    display: flex;
    border-radius: 30px;
    width: 160px;
    height: 30px;
    margin-top: 10px;
    margin-left: 30px;
    padding-left: 48px;
    padding-top: 10px;
    padding-bottom: 3px;
    text-decoration: none;
    color: black
}

.romantique a:hover {
    transition: ease 1s;
    background-color: #DEEBFF;
}

#dog {
    border: 1px solid white;
    border: none;
    border-radius: 20px;
    background-color: #DEEBFF;
    padding: 11px;
    height: 22px;
    position: absolute;
    bottom: 354px;
    right: 638px;
}

#dog a {
    color: #0065FC;
}

.animaux a {
    border: 3px solid #F2F2F2;
    display: flex;
    border-radius: 30px;
    width: 235px;
    height: 29px;
    margin-top: 10px;
    margin-left: 30px;
    padding-left: 70px;
    padding-top: 10px;
    padding-bottom: 3px;
    text-decoration: none;
    color: black
}

.animaux a:hover {
    transition: ease 1s;
    background-color: #DEEBFF;
}

#I {
    display: flex;
    margin-top: 8px;
}

#i {
    color: #0065FC;
    border: 2px solid #F2F2F2;
    border-radius: 100px;
    width: 10px;
    height: 10px;
    padding: 7px;
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
}


#text_i {
    padding: 15px;
    padding-bottom: 30px;
}

#second {
    display: flex;
    margin: 50px;
}

#hebergement {
    border: 1px solid #F2F2F2;
    border-radius: 20px;
    background-color: #F2F2F2;
    width: 890px;
    padding-left: 20px;
    margin-right: 40px;
}

#hebergement a {
    color: black;
    text-decoration: none;
}

#hebergement H2 {
    padding-left: 24px;
}

#hebergement H4 {
    padding-left: 24px;
    font-size: 20px;
}

#hebergement H4:hover {
    color: #0065FC;
}

#premier_heber {
    display: flex;
}

#second_heber {
    display: flex;
}

.canne {
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    width: 236px;
    padding: 3px;
    padding-right: 5px;
    padding-top: 5px;
    padding-left: 5px;
    margin: 20px;
    background-color: white;
}

.canne img {
    border: 1px solid black;
    border: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.canne a {
    color: black;
}

#text_canne {
    padding: 7px;
}

.port {
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    width: 236px;
    padding: 3px;
    padding-right: 5px;
    padding-top: 5px;
    padding-left: 5px;
    margin: 20px;
    background-color: white;
}

.port img {
    border: 1px solid black;
    border: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.port a {
    color: black;
}

#text_port {
    padding: 7px;
}

.mouette {
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    width: 236px;
    padding: 3px;
    padding-right: 5px;
    padding-top: 5px;
    padding-left: 5px;
    margin: 20px;
    background-color: white;
}

.mouette img {
    border: 1px solid black;
    border: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.mouette a {
    color: black;
}

#text_mouette {
    padding: 7px;
}

.mer {
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    width: 236px;
    padding: 3px;
    padding-right: 5px;
    padding-top: 5px;
    padding-left: 5px;
    margin: 20px;
    background-color: white;
}

.mer img {
    border: 1px solid black;
    border: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.mer a {
    color: black;
}

#text_mer {
    padding: 7px;
}

.panier {
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    width: 236px;
    padding: 3px;
    padding-right: 5px;
    padding-top: 5px;
    padding-left: 5px;
    margin: 20px;
    background-color: white;
}

.panier img {
    border: 1px solid black;
    border: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.panier a {
    color: black;
}

#text_panier {
    padding: 7px;
}

.Amina {
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    width: 236px;
    padding: 3px;
    padding-right: 5px;
    padding-top: 5px;
    padding-left: 5px;
    margin: 20px;
    background-color: white;
}

.Amina img {
    border: 1px solid black;
    border: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.Amina a {
    color: black;
}

#text_amina {
    padding: 7px;
}


.star {
    color: #0065FC;
    font-size: 13px;
    display: flex;
    padding: 7px;
}

.star_1 {
    color: #F2F2F2;
}

#titr {
    display: flex;
}

#icon_22 {
    font-size: 22px;
    padding-left: 105px;
    padding-top: 20px;
}

aside {
    border: 1px solid #F2F2F2;
    border-radius: 20px;
    background-color: #F2F2F2;
    padding: 30px;
    width: 370px;
}

aside a {
    color: black;
    text-decoration: none;
    font-size: 15px;

}

aside h3 {
    font-size: 15px;
    padding-bottom: 1px;
}

.star_2 {
    color: #0065FC;
    font-size: 10px;
    display: flex;
    padding: 7px;
}


#pos {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-bottom: 30px;
}

#pos_1 {
    padding-bottom: 13px;
}

.soleil {
    display: flex;
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px;
    height: 117px;
    width: 338px;
    background-color: white;
}

.soleil img {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.text_soleil {
    padding: 5px;
}

.eau {
    display: flex;
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px;
    height: 117px;
    width: 338px;
    background-color: white;
}

.eau img {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.text_eau {
    padding: 5px;
}

.bleu {
    display: flex;
    border: 3px solid black;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px;
    height: 117px;
    width: 338px;
    background-color: white;
}

.bleu img {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.text_bleu {
    padding: 5px;
}

#trois {
    margin: 50px
}

#act {
    border: 1px solid black;
    display: flex;
    border: none;
}

#act a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

#act_1er {
    display: flex;
}

#act_11 {
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    border: none;
    margin-right: 25px;
    margin-left: 25px;
}

#Vieu_port {
    border: 1px solid #F2F2F2;
    box-shadow: 1px 1px 10px gray;
    border: none;
    border-radius: 30px;
    width: 298px;
    margin-right: 37px;
}

#V_P img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#text_act {
    border: 1px solid black;
    border: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-left: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 298px;
    height: 30px;
}

#pomegue {
    border: 1px solid #F2F2F2;
    border: none;
    box-shadow: 1px 1px 10px gray;
    border-radius: 30px;
    width: 298px;
    align-self: center;
    margin-bottom: 30px;
}

#pomegue img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#frioul {
    border: 1px solid #F2F2F2;
    border: none;
    box-shadow: 1px 1px 10px gray;
    border-radius: 30px;
    width: 298px;
    margin-top: 23px;
}

#frioul img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#calanques {
    border: 1px solid #F2F2F2;
    border: none;
    box-shadow: 1px 1px 10px gray;
    border-radius: 30px;
    width: 298px;
    margin-right: 37px;
    margin-left: 30px;

}

#c_q img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#act_2eme {
    display: flex;
}

#act_12 {
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    border: none;
    margin-left: 25px;
}

#garde {
    border: 1px solid #F2F2F2;
    border: none;
    box-shadow: 1px 1px 10px gray;
    border-radius: 30px;
    width: 298px;
    margin-bottom: 30px;

}

#d_g img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#longchamp {
    border: 1px solid #F2F2F2;
    border: none;
    box-shadow: 1px 1px 10px gray;
    border-radius: 30px;
    width: 298px;
}

#l_c img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

footer {
    margin-top: 70px;
    background-color: #F2F2F2;
    display: flex;
    height: 220px;
}

footer a {
    color: black;
    text-decoration: none;
}

#titre_footer {
    font-size: 15px;
    padding-left: 10px;
}

#a_propos {
    padding-right: 100px;
    padding-left: 100px;
    text-align: justify;
    margin-top: 20px;
}

.apropos {
    padding: 10px;
    font-size: 17px;
}

#nos_hebergement {
    text-align: justify;
    margin-top: 20px;
    padding-left: 120px;
    padding-right: 100px;
}

.nos_heber {
    padding: 10px;
    font-size: 17px;
}

#assistence {
    padding-left: 100px;
    text-align: justify;
    margin-top: 20px;
}

.assis {
    padding: 10px;
    font-size: 17px;
}

Modifié par wede12 (17 Apr 2022 - 03:46)

niuxe

Modérateur

19 Apr 2022 à 06:07

Hello,

mdn a écrit :

absolute
L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de top, right, bottom et left.

Cette valeur crée un nouveau contexte d'empilement lorsque z-index ne vaut pas auto. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.

source : https://developer.mozilla.org/fr/docs/Web/CSS/position

Bien sûr on peut calculer en JS. Mais ce serait du gros n'importe quoi vu ton contexte. Donc, utlise autre chose que position absolute.
Modifié par niuxe (19 Apr 2022 - 06:11)

Sujet clos

Web Mobile et responsive web design

Gérer les position absolue et les responsive