Pouvez vous m'aider svp ?

Par fabrice974, il y a 3 ans


Les bases HTML/CSS

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

SiProdZz, il y a 3 ans

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; }
fabrice974, il y a 3 ans

merci beaucoup, ça m'aide à mieux comprendre, merci pour l'aide.