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

14 réponses

Kazou

Pour utiliser deux box-shadow, utilise plutôt : box-shadow: #f00 50vW 0 0 0, #f00 -50vw 0 0 0 car quand tu mets un 2ème box-shadow, il « surpasse » le premier ( effet de cascade )

Désolé, je m'exprime surement mal… ^^

Je n'ai pas trop compris ton message et le résultat que tu attendais… :3

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

Kazou

La technique la plus simple à mon goût ( et ou il n'y a aucun besoin de rajouter une centaine de div inutile ), c'est de mettre ton body en width: bidulepx et margin: 0 auto et de mettre ton background sur le html

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;}
Kazou

Oui, mais ceci fais une div en plus, qui n'avait rien demandé d'autre que d'attendre une véritable utilité… :D

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.

Kazou

Sauf le html, et l'intention de départ était que le contenu soit centrer avec une largeur fixe, donc pas d'avoir des éléments qui dépassent…

Donner une largeur fixe à body n'est certainement pas une chose à faire et d'ailleurs ça ne ce fait pas

Pourquoi ? Il y a des problèmes avec certains navigateurs ? C'est déconseillé par le W3C ? :(

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