Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1207 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1303882
analfabete
Posté le 12-02-2006 à 20:46:05  profilanswer
 

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>

mood
Publicité
Posté le 12-02-2006 à 20:46:05  profilanswer
 

n°1303936
gatsu35
Blablaté par Harko
Posté le 12-02-2006 à 23:08:13  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[PHP] Problème bizarre avecla banniereProblème avec la fonction fopen()
[HTML]Probleme avec mon siteIntégrer du HTML dans du flash ???
probleme connexion sqlserver 2000 ?Espace fixe en CSS
Module news HTMLprobleme de syntaxe php avec apache
[HTML/CSS]Problème pour faire des contours 
Plus de sujets relatifs à : [Css Html] Problème avec les marges internes "padding


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR