Padding: 0 auto ?

mowh
Les bases HTML/CSS

Bonjour,

Je suis en train de developper un site et je rencontre un problème. J'utilise régulièrement le margin: 0 auto pour centrer mon contenu en lui autorisant une largeur maximale. Mais aujourd'hui j'aimerais faire de même en ayant un background d'une largeur de 100%(vw).

J'ai essayé "padding: 0 auto" mais ça n'a pas fonctionné.
J'ai tenté de contourner le problème avec box-shadow, mais ça je n'arrive pas a mettre deux box-shadow... :

body {
   width: 1024px;
   margin: 0 auto;
   overflow: hidden;
}
div {
   background-color: #f00;
   padding: 20px 0;
   box-shadow: #f00 50vw 0 0 0;
   box-shadow: #f00 -50vw 0 0 0;
}

Est-ce que vous auriez d'autres solutions ?
Merci d'avance !

Malo

10 réponses

mowh
Auteur

Tout va bien j'ai compris, et merci !
J'aimerais, en fait, savoir comment donner une largeur fixe au contenu de la page (comme avec "width: 1024px; margin: 0 auto;") mais en ayant un fond de toute la largeur de l'ecran.

Semeen

Salut.

background-image:url(ton_img);background-size:100% 100%

Ne pas oublier les -webkit-, -o-, -moz-...

SLK

Salut,

je ne suis pas sur d'avoir bien compris.
Est-ce que c'est ce genre de chose que tu demandes ?

HTML

<body>
    <div class="background">
        <div class="container">
            <p>Du contenu</p>
        </div>
    </div>
</body>

CSS

body {
    height: 100vh;
}

.background {
    width: 100vw;
    height: 100%;
    background-color: yellow;
}

.container {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    background-color: orange;
}

Ce qu'il faut bien comprendre entre % et vw
c'est que % est relatif à la dimension de "l'élément parent",
alors que vw est relatif à la dimension de "l'écran".

BlackDev

Hello,
Pourquoi s'embêter ?

Donne ton background à body, qui prend de base tout ton écran et entoure le contenu de ton site dans une div pour lui donner une largeur et le centrer.

Pense aussi à supprimer les marges par défaut des navigateurs.

body,html{margin: 0; padding: 0}
body{background: #f00;}
#container{width: 1024px; margin: 0 auto;}
BlackDev

Donner une largeur fixe à body n'est certainement pas une chose à faire et d'ailleurs ça ne ce fait pas, tu empêches tout autres éléments d'avoir une largeur supérieure au body.

BlackDev

C'est pas une question de problèmes, c'est simplement faire "dans les règles de l'art" qui va permettre entre autre de rendre évolutif le site web.

Vu la simplicité de la question de l'auteur, il ne comprend déjà pas le fonctionnement de la structure html. Autant lui apprendre tout de suite les bonnes pratiques.

Va faire le tour du web et regarde comment sont construites les structures html.

mowh
Auteur

En fait je ne veux pas un background pour toute la page mais seulement pour une div, comme mon header ou mon footer. Et j'aimerais avoir un code clean, je préfère éviter de créer une div class="background" pour si peu...

BlackDev

Dans ce cas :

<div class="ta_div">
    <div class="int">
        <!--Content de ta div-->
    </div>
</div>

En Css

.ta_div{background: #f00;}
.ta_div .int{width: 1024px; margin: 0 auto; padding: 20px 0;}
mowh
Auteur

SLK, j'ai bien compri cette difference, le problème c'est qu'avec le margin ma div de largeur 100vw est décalée de (largeurdemafenetre-1024px)/2 à droite...

Voilà un lien codepen pour ue vous y voyiez plus clair...

BlackDev

Attend c'est ça que tu veux ? http://codepen.io/blackdev/pen/yJAmyd
ou ça http://codepen.io/blackdev/pen/pbBrJm