Pouvez vous m'aider svp ?
Bonjour , j'essaie de remplir toute la place du corps en largeur , comment faire ? c'est a dire que je veux que toute la topbar en gris remplisse le corps qui est encadrer en rouge, quelqu'un peut m'aider pour mieux comprendre ?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" type="text/css" href="monstyle.css"/>
<title>Document</title>
</head>
<body>
<main id="corps">
<div class="topbar">
<nav>
<a href="homme.html">homme</a>
<a href="femme.html">femme</a>
<a href="enfant.html">enfant</a>
<a href="chaussure.html">chaussure</a>
<a href="accessoire.html">accessoire</a>
</nav>
</div>
<div class="image1">
</div>
<div class="image2">
</div>
</main>
</body>
</html>
body {
display: flex;
align-items center;
justify-content: center;
}
#corps {
border: red 2px solid;
height: 1000px;
width: 1200px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
display: flex;
justify-content: center;
}
.topbar {
background-color: darkgray;
position: fixed;
display: block;
padding: 20px 80px;
text-align: center;
}
.topbar nav a {
color: black;
text-decoration: none;
opacity: .7;
font-weight: 500;
font-size: larger;
padding: 0 50px;
}
.topbar nav a:hover {
color: black;
opacity: 1;
}
.image1 {
background-color: skyblue;
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
top: 100px;
display: inline-block;
margin-left: auto;
margin-right: auto
}
.image2 {
background-color: rgb(39, 176, 8);
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
top: 100px;
display: inline-block;
margin-left: auto;
margin-right: auto
}
**Ce que je veux**
j'aimerais pouvoir centrer et remplir toute la largeur du corps avec la topbar en gris et centrer le reste aussi par rapport au corps
**Ce que j'obtiens**
j'obtiens que la topbar est centrer au corps mais que ça ne rempli pas toute la largeur par rapport au corps.
2 réponses
Bonjour,
- Tu peux utiliser les max-width et widh 100% pour gérer au mieux le responsive.
- Revoir la différence entre "margin" et "padding"
Voici une solution proposé.
#corps {
position: relative;
border: red 2px solid;
height: 1000px;
width: 1200px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 25px;
margin-right: 25px;
display: flex;
justify-content: center;
}
.topbar {
width: 100%;
background-color: darkgray;
position: fixed;
display: block;
padding: 20px 0 20px 0;
text-align: center;
width: inherit;
}