Comment mettre un élement sur deux élements en HTML/CSS
bh_france
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet -
Pitet -
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:
- Comment mettre un élement sur deux élements en HTML/CSS
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Comment faire deux colonnes sur word - Guide
- Deux whatsapp sur un téléphone - Guide
- Editeur html - Télécharger - HTML
- Deux ecran pc - Guide
