[Css Html] Problème avec les marges internes "padding

Problème avec les marges internes "padding [Css Html] - HTML/CSS - Programmation

Marsh Posté le 12-02-2006 à 20:46:05    

Bonsoir a tous j'ai un problème avec les padding je veux que le texte et les futurs blocs enfants soit a 17px des bordures du bloc parent appeler "main" que ce soit a gauche oudroite  
Voilà ma page http://analfabete.free.fr/
Et mon code :

Code :
  1. body  {
  2. background-color: #28353D;
  3. margin-top: 65px;
  4.  }
  5. #main {
  6. background-image: url(../img/design/bg_main.png);
  7. background-repeat: repeat-y ;
  8. margin-left: auto; /* pour que #main soit centrer */
  9. margin-right: auto;
  10. width: 759px;
  11. padding: 17px 17px ;
  12.  }


 
Et le code html :

Code :
  1. <body>
  2. <div id="main"> … qui avait tué sa
  3. </div>

Reply

Marsh Posté le 12-02-2006 à 20:46:05   

Reply

Marsh Posté le 12-02-2006 à 23:08:13    

ben ou est ton problème qu'est ce qui ne va pas ?
 
Les éléments sont bien à 17px du bord, même si pour toi ca ne se voit pas.
 
 
donc on la refait simple, il existe le modele de boite microsoft, ou le modele de boite W3C.
Avec le doctype utilise tu ne verras jamais le modele de boite MS
donc on a a faire au modele de boite W3C (box model W3C) ce qui est mieux pour nous. Alors qu'est ce que c'est que ce truc.
 
Imagine que chaque élément est représenté par une boite.
Cette boite est délimitée par 4 parties, listées ci dessous de la plus extérieure à la plus intérieure :  
-Margin (marges exterieures)
-Border (bordures)
-Padding (marges interieures)
-Contenu (contenu de l'élément)
 
Lorsque tu fixe une largeur sur une boite, la largeur va s'appliquer qu'au contenu de l'élément.
 
Donc si dans un élément tu fais :  
width:200px;
padding-left:20px;
padding-right:20px;
 
ton élément ne fera pas 200px de large au total, mais : 200+20+20 = 240px;
idem si tu fais :  
width:200px;
padding-left:20px;
padding-right:20px;
border:3px;
le bloc fera alors 200+2*20+2+3=246px de large.
 
donc il faut que tu fixes la largeur de ton bloc à : 759-17*2 = 725px.
 
 
Ensuite au sujet de l'application des valeurs sur le padding (aussi valable pour border, margin...)
on applique les règles suivantes :  
padding : haut droite bas gauche => (4 valeurs) ex:  padding : 1px 2px 3px 4px
padding : haut (droite+gauche) bas => (3 valeurs) ex : padding : 1px 2px 3px
padding : (haut+bas) (droite+gauche) => (2 valeurs) ex: padding : 1px 2px
padding : tout => (1 seule valeur) ex: padding : 1px;


Message édité par gatsu35 le 12-02-2006 à 23:16:30
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed