28220 sujets

CSS et mise en forme, CSS3

[résolu]Padding : influences sur la haute et la largeur

Bonjour,

En travaillant sur un site je me suis retrouvé dans une position un peu délicate. Voici le code :



  <div id="lpy-menu">
    Rubrique 1 | Rubrique 2 | Rubrique 3
  </div>


Et pour le css :



                  #lpy-menu {
                  
                  
                  width: 250px;
                  height: 40px;
                  
                  
                  background-color: green;
                  
                  }


Il s'agit juste d'un test, et d'un code très simple. La largeur et la hauteur ne sont pas innocentes, car dans le résultat final il doit y'avoir une image en background de ce calque avec ces mesures. Comme le texte se place en haut à droite du calque, je veux le placer d'une autre façon.

C'est à ce moment-là que je veux utiliser des marges intérieurs pour placer ce texte comme voulu. J'utilise un padding-top et un padding-left.

Manque de chance, mon calque change de taille avec ce padding et c'est bien là que situe mon incompréhension. Le calque grandit en hauteur et en largeur de la taille du padding.

Mais comment se comporte ce padding ?

Dans un deuxième exemple celui-ci marche nickel :





<div id="news_top">
      
      
<div id="news_bottom">
      
<h4>Ouverture du site !</h4>

       
<p class="news_contenu">blablabla blalbla blla bllla alalalal blalbla blsllala blal al dsd sds dsdséld sédls él sdlés él dlésldéséd désl désld séldséd sdlséfldkgldkjgl glk  kd klklékékd ék édél kédk</p>

       
<p class="news_date">17.07.2005 02:34 - umbreon</p>

   
      </div>


    </div>


css :




 
       #news_top {   
       
                 background: url(webdesign/news_top.gif) no-repeat #e6a764;
    
              
                 width: 304px;
                 

     
    
                 }
                 
        #news_bottom { 
                
                 background: url(webdesign/news_bottom.gif) bottom no-repeat;
                 
                 padding: 10px;




Merci d'avance pour votre aide
Modifié par umbreon (22 Jul 2005 - 10:01)
umbreon a écrit :


Manque de chance, mon calque change de taille avec ce padding et c'est bien là que situe mon incompréhension. Le calque grandit en hauteur et en largeur de la taille du padding.


Oui, c'est le comportement normal d'une boîte CSS : la hauteur affichée est la somme de la hauteur spécifiée (height:) et des paddings verticaux. Idem pour la largeur. Voir http://www.openweb.eu.org/articles/dimensions_boites_css/

<edit>lol - réponse croisée avec Raphael</>
Modifié par Laurent Denis (21 Jul 2005 - 19:37)
Hello,

Effectivement, j'utilisais dans ma logique le modèle Microsoft et non celui du W3C, normal que cela ne marche pas.

Bref apparemment je suis pas le premier à avoir eu ce problème, tant mieux Smiley lol C'est comme ça qu'on apprend.

Un grand merci pour la rapidité et la précision (avec lien direct sur les tutos) de vos réponses !

/umbi

P.S on peut considérer le problème comme résolu.
Modifié par umbreon (22 Jul 2005 - 07:41)
Sujet clos
Aller à