Sujet Précédent Sujet Suivant

Comment mettre un élement sur deux élements en HTML/CSS

Fermé
bh_france Messages postés 8 Date d'inscription vendredi 1 février 2019 Statut Membre Dernière intervention 23 juillet 2023 - 23 juil. 2023 à 18:31
 Pitet - 24 juil. 2023 à 10:06

Bonjour à toute la communauté CCM,

Je fais face à un blocage sur le surpositionnement d'un élément sur deux élements (fond gris et le bas de page).

J'ai tenté divers solutions mais en vain voici mon cas en image : 

Je veux arriver à cette solution : 

PS: Prenez juste en compte le fond.

Voici le code en HTML : 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test Snark Factory</title>
        <link rel="stylesheet" href="test.css">
        <link href="https://fonts.googleapis.com/css2?family=Dosis%3Awght%40500%3B700&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <nav id="nav">
                <img src="Logo-horizontal.png" id="img_snark"/>
                <ul id="tabs">
                    <li>Qui Sommes-nous</li>
                    <li>Blog</li>
                    <li>FAQ</li>
                    <li>Contact</li>
                    <li id="compte">Mon compte</li>
                </ul>
                <img src="united-kingdom.png" id="uk_images">
            </nav>
        </header>
        <img src="Union.png" id="union_images">
        <div class="images_first-plan">
            <div id="sentences">
                <img src="entree.png" id="entree_images">
                <img src="cake.png" id="cake_images">
                <img src="par Nicolas Cooking.png" id="nicook_images">
            </div>
            <div class="images-play">
                <img src="image 3.png" id="video_images">
                <img src="PLAY 1.png" id="play">
            </div>
        </div>
        <div class="grey_font">
        </div>
        <div class="ads">
        </div>
        <footer>
        </footer>
    </body>
</html>

Le code en CSS :

.grey_font {
    background-color: #FAF6EE;
    height: 280px;
    z-index: 1;
}

.ads {
    background-color: #007181;
    height: 160px;
    z-index: 2;
    margin-left: 7%;
    margin-right: 7%;
    border-radius: 30px;
    position: relative;
    display: flex;
}

footer {
    background-color: #00525D;
    height: 369px;
    z-index: 1;
}

Quand je met le bas de page et le fond gris en position absolute ou fixed pour permettre la superposition du fond bleu verdâtre, mais ça les fait disparaître.

Votre aide est plus que jamais le bienvenue.

Je vous remercie.

A voir également:

1 réponse

Réponse 1 / 1
Pitet
24 juil. 2023 à 10:06

Bonjour,

Pas de position absolute nécessaire ici, une marge négative sur le footer semble suffisant :

.ads + footer {
  margin-top: -80px;
}
0

Discussions similaires

Un seul de mes écouteurs marche. Que faire ?
VM_417 -
vali54 -

4 réponses
webcame eton et 838b
raouf74 -
emma -

2 réponses
Comment inspecter l'élément sur mobile ?
Sally -
Sally -

2 réponses
aidez-moi à m'amuser sur mon P.C!
Manola -
Screuscreu -

2 réponses