html Faire un bloc dans le body plus large que le body

Jean-Pierre · 6 Janv. 2021

Bonsoir ou bonjour,

Mon body a une largeur de 72% de l'écran sur lequel il est affiché.
Jusqu'à un certain point cependant, il prend toute la largeur de l'écran quand il est affiché sur des écrans de type téléphone ou tablette.

Quand il est en mode écran ordinateur j'aimerais qu'un bloc qui se situe au milieu (verticalement) de la page prenne toute la largeur de l'écran.
Je ne sais pas trop comment faire, j'ai pensé couper le body en deux et intercaler entre le bloc mais ça me semble pas très académique d'avoir 2 body.

Donc comment forcer le bloc à s'élargir à 100% malgré les marges du body ?
Ah oui j'ai essayé des marges négatives mais comme ce sont des pixels et pas des % cela ne s'adapte pas à toutes les résolutions.

Merci pour votre aide et je vous souhaite une bonne nouvelle année à tout le monde.
Jean-Pierre

Hamza · 6 Janv. 2021

Je ne pense pas qu'il soit recommandé d'appliquer des marges importantes ou bien de réduire la largeur du <body> Jean-Pierre.
Il est préférable de créer un ou plusieurs conteneur principaux avec marges ou largeur réduite et pourquoi pas dans ton cas d'intégrer entre eux une section pleine largeur.

Un exemple serait

HTML

<html>
    <body>
        <div class="container">
            contenu principal #1
        </div>
        <div class="bloc-fullwidth">
            bloc pleine largeur
        </div>
        <div class="container">
            contenu principal #2
        </div>       
    </body>
</html>

CSS

.container {
    width: 80%;
    margin: 0 auto; /* pour centrer le container */
}

.bloc-fullwidth {
    /* le bloc prend toute la largeur si on lui dit pas le contraire */
}

c-cadeau · 6 Janv. 2021

Merci pour l'info.
Je cherchais aussi mais pour la barre de navigation en haut du site.

Naruto · 7 Janv. 2021

Mais la barre de navigation de base tu la mets pas dans le body mais plutôt dans le header non ?
Je comprends pas bien quel était ton pb c-cadeau ??

Victorinox · 7 Janv. 2021

Naruto_Z à dit:
Mais la barre de navigation de base tu la mets pas dans le body mais plutôt dans le header non ?

Dans mon idée, un site basique c'est cette structure.

HTML

<html>
    <head></head>
    <header>
        code header
    </header>
    <nav>
        code nav
    </nav>
    <body>
        code body
    </body>
    <footer>
        code footer
    </footer>
</html>

Eleven Up · 7 Janv. 2021

Selon certaines normes ce serait plus ceci, les balises <body> englobent tout !

HTML

<body>
<header>
<div id="logo">HTML</div>
<nav> 
    <ul>
        <li><a href="/">Home</a>
        <li><a href="/link">Page</a>
    </ul>
</nav>
</header>
<main role="main">
    <article>
        <h2>Title 1</h2>
        <p>Content 1</p>
    </article>
    <article>
        <h2>Title 2</h2>
        <p>Content 2</p>
    </article>
</main>
    <section>
    A group of related content
    </section>
    <aside>
        Sidebar
    </aside>
<footer>
    <p>&copy; HTML CheatSheet</p>
    <address>
        Contact <a href="mailto:me@htmlg.com">me</a>
    </address>
</footer>
</body>

c-cadeau · 7 Janv. 2021

7UP à dit:
Selon certaines normes ce serait plus ceci, les balises <body> englobent tout !

Oui mais justement si les balises englobent toutes les autres, comment répondre à l'interrogation de cette discussion ??
Le code de base de Victorinox le permet mais pas le tien.

Jean-Pierre à dit:
Donc comment forcer le bloc à s'élargir à 100% malgré les marges du body ?

Anthony · 8 Janv. 2021

Puisque chacun y va de son code de base... Voici celui de Emmet dans VSCode

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

<body> englobe bien l'ensemble du site web.
Donc la chose à faire ou plutôt ne pas faire c'est appliquer des marges ou un width au body et organiser ses différentes sections à l'intérieur.
Cela permettra de faire ce qu'on veut notamment des conteneurs pleine largeur et des conteneurs avec des marges.

Donc pour moi, la première réponse d'Hamza est la bonne.

html Faire un bloc dans le body plus large que le body

Jean-Pierre

Membre

Hamza

Hamza

Membre

c-cadeau

Membre

Naruto

Membre

Victorinox

Membre

Eleven Up

Membre

c-cadeau

Membre

Anthony

Membre

Ces discussions pourraient vous intéresser...