Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» [Résolu]
Auteur
xXjujo002Xx
#
Citer
45 Posts
 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é bawling
.
.
.
.....................................................................HELP !
............................................................ biggrin merci à vous biggrin
Modifié par xXjujo002Xx (28 Feb 2012 - 18:37)
^
Gothor
#
Citer
325 Posts
 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).
Gothor
^
xXjujo002Xx
#
Citer
45 Posts
 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 ??
^
Gothor
#
Citer
325 Posts
 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 cligne (que tu n'as pas mis)

Pas de quoi !
Modifié par Gothor (28 Feb 2012 - 19:01)
Gothor
^
xXjujo002Xx
#
Citer
45 Posts
 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)
^
Prévenir un modérateur
Répondre au sujet
Aller à