Padding

Nicosmos · Message par **Nicosmos** » 23 juin 2006, 12:32

Je suis en train de faire le design d'un site pou un ami.
Dans la zone de contenu, qui a une image du fond, j'ai mis une marge intèrieure de 30px. C'est la première fois que je me sert de padding. Le CSS ressemble à ça :

Code : Tout sélectionner

#contenu {
     background-image: url(skin/fond.png);
     width: 850px;
     padding: 30px;
     }

La marge marche bien en haut, à gauche, et en bas, mais l'effet est bizzarre à droite :

Comment arrager ça ?
Je n'ai rien trouvé sur Alsacreation et sur MediaBox ...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

calimo · Message par **calimo** » 23 juin 2006, 12:35

Avec un extrait de code aussi succint que ça, j'aime mieux te dire tout de suite que ça ne va pas être facile de répondre

C'est quoi ce bloc à droite ? Un autre bloc ? Ou c'est juste que quelque chose passe devant qui a un fond bleu ?

Si tu pouvais nous donner tout le code, ou mieux, un lien vers la page, ce serait plus facile

Nicosmos · Message par **Nicosmos** » 23 juin 2006, 12:41

La page n'est pas sur le net et le FTP de Free n'a pas l'air de marcher aujourd'hui ...

En gros voici le contenu de la page :

Code : Tout sélectionner

<body>
<div id="ensemble">
<div id="header">Contenu du header</div>
<div id="menu">Contenu du menu</div>
<div id="contenu">La zone de contenu où il y a le padding</div>
<div id="pied">Le pied de page</div>
</div>
</body>

Et une partie du CSS (j'ai enlevé ce qui est le contenu du header et du menu) :

Code : Tout sélectionner

body {
     background: #1f4288;
     font-family: verdana, arial, sans-serif;

     font-size: 16px;
     text-align: center;
     }

#ensemble {
     top: 50px;
     width: 850px;
     margin-left: auto;

     margin-right: auto;
     }
     
#header {
     background-image: url(skin/header.png);
     width: 850px;
     height: 170px;
     }
     
#menu {
     background-image: url(skin/menu-fond.png);
     width: 850px;
     height: 50px;
     }
     
#contenu {
     background-image: url(skin/fond.png);
     width: 850px;
     padding: 30px;
     }
     
#pied {
     background-image: url(skin/pied.png);
     width: 850px;
     height: 50px;
     }

Le truc que l'on voit à droite dans l'image, c'est le fond de la zone de contenu qui se répète ...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Geckozone

Padding

Padding

Qui est en ligne ?