[Résolu]

Bonjour,
ju suis en train de m'occuper de faire le contenu du texte sur mon site, et cela m'entêterai que le texte soit directement collé aux bordures de la page, j'ai donc naturellement utilisé la propriétés padding: padding-left... ça marche ok, padding-right... Heu... padding-right est sensé me faire une marge intérieure non ? Bah oui, il le fait, en quelques sortes:
Il ne rétrécit pas la largeur du texte, il fait comme ci le texte était solide et il commence ça marge à partir de la fin de la largeur du texte et du coup il agrandi et dé-centre ma div !

Voilà mon code:
[CSS]#Content {
background:url('Content.png');
background-repeat:repeat-y;
height:auto;
width:1034px;
margin-right:auto;
padding-right:20px;
margin-left:auto;
padding-left:20px;
text-align:left;
text-align:justify;
}[/CSS]

Et voilà la page de test en question: http://web.graphiz.free.fr/Test_zone/Content/Content.html

J'ai d'abord penser que c'était à cause de text-align:justify; qui dérangeait le padding-right, mais non, je suis complètement désemparé
.
.
.
.....................................................................HELP !
............................................................ merci à vous
Modifié par xXjujo002Xx (28 Feb 2012 - 18:37)

Salut,
Tu te bases sur ton image de fond pour ta width, d'après ce que je vois (elle fait 1034px, tu mets 1034px...).
Il faut savoir que la propriété width ne compte pas les paddings, borders et margins. (Sauf avec le mode Quirks ou bien avec en utilisant box-sizing:padding-box)
Du coup, tu te retrouves avec ton texte au milieu, 20px à sa gauche, 20px à sa droite et ton background collé à gauche de ta boîte...
Donc, ta boîte fait 1074px au lieu de tes 1034px de fond =°

Pour ça, tu peux donc réduire la propriété width de 2*padding (vu qu'il est à gauche et à droite) donc de 40px, soit utiliser la propriété box-sizing:border-box ou box-sizing:padding-box (cela revient au même ici vu que tu n'as pas de bord, la différence est dans le fait que avec border-box, width comprend les paddings et les borders alors que padding-box ne comprend que les paddings).

Je te conseille de réduire ta width de 40px, car box-sizing est une propriété css 3 donc pas comprise par tout les navigateurs (pour mozilla c'est -moz-border-sizing par exemple).

Youpiiiiiii ! merci pour ta réponse rapide et ton information qui me servira à présent, le résultat est parfait http://web.graphiz.free.fr/Test_zone/Content/Content.html

Encore merci, je profite de ce message pour vous demander comment on mais des topic en résolu ??

Tu cliques sur le bouton Editer à droite de ton premier message et tu édites le titre du sujet en y insérant [Résolu].

Attention ! IE 6 (et 7?) est en mode Quirks et IE 8 (et 9 ? ^^') balance en mode Quirks si un quelconque caractère se trouve avec le Doctype (que tu n'as pas mis)

Pas de quoi !
Modifié par Gothor (28 Feb 2012 - 19:01)

Comment ?? Pour le doctype c'est normal, c'est juste une page de test et après j'insère sur mon site.
Modifié par xXjujo002Xx (28 Feb 2012 - 22:14)