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

Jean-Pierre

Membre
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
 
Solution
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 {
    /*...

Hamza

Membre
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 */
}
 

Eleven Up

Membre
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>
 

Anthony

Membre
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.
 

Ces discussions pourraient vous intéresser...

Hello, Je voulais tester un peu node.JS et je l'ai donc installé sur mon Win 10, l'installation s'est bien passé. Par contre quand j'essaie de faire tourner un petit code simple qui permet de créer un serveur, je l'ai enregistré sous serveur.js var http = require('http')...
J'ai un petit souci avec l'examen Page speed de Google qui obtient un mauvais résultat à cause de ressources JavaScript qui bloquent le rendu. Donc dans mon cas, il y a bien un script JS qui est appelé dans le header de mon fichier HTML. J'ai tenté de faire un defer puis un async mais...
Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Haut