[Résolu]Annuler un padding

Bonjour à tous,

Cela faisait un petit moment que tout roulait pour moi avec les CSS, et je suis de nouveau confronté à un problème à mon avis tout bête mais qui me pose pas mal de difficulté.

J'ai un div conteneur dans lequel j'ai tout le contenu de mon site. J'ai mis un padding de 10px à ce conteneur pour que mon contenu ne soit jamais collé à celui-ci.

Ce padding à besoin de s'appliquer à tous les éléments de mon site sauf un : les <h1>.

Au lieu de mettre des margin à tout mon contenu, j'ai préféré mettre un padding à mon conteneur, mais je ne trouve pas de solutions (autre qu'une position:absolute;) pour que mes <h1> ne prennent pas le padding de mon contenu.

Comment faire ?

code html

<div class="container">
  <h1>Mon tite</h1>
  <p>Mon texte</p>
</div>

code CSS

.container {
  padding:10px;
}
h1 {
  border:1px solid #D6D6D6;
  background:#e5e7ce;
}

d'avance merci !
Modifié par zmove (13 Apr 2007 - 11:22)

h1 {position: relative; left: -10px;}

ou

h1 {margin-left: -10px;}

Sinon, il ne faut pas donner de padding au conteneur, mais travailler avec des marges latérales pour les blocs enfants.

Merci pour la réponse !

En fait j'avais déjà essayé ces deux solutions, j'aurais du préciser dans mon post.

Cela ne marche pas,Le résultat est le même avec les deux solutions que tu proposes, à savoir sur mon <h1> est coupé à gauche.

Une image sera plus explicite :

http://img294.imageshack.us/img294/6417/paddingdj0.png

Voyez comme le "N" est mangé et comme le <h1> passe "sous" le padding.

J'espere qu'il y a une solution possible, car j'avoue que l'idée d'enlever ce padding et de m'amuser à mettre des margin partout pour compenser ne me plait pas trop...

zmove a écrit :
Voyez comme le "N" est mangé et comme le <h1> passe "sous" le padding.

Voilà un comportement bien anormal... on pourrait voir la page complète ? Parce qu'avec juste un conteneur avec un padding et un h1 décalé, ça ne devrait pas donner ce genre de chose.

Je viens de tester avec IE6 et Firefox 2, et ça passe sans problème.

No problem !

Donc voila le screen quand j'ai rien précisé au <h1>, on voit bien le padding du conteneur qui s'applique.

http://img248.imageshack.us/img248/3782/paddingnormalbh9.png

Et voila le screen avec un margin-left:-10px ou un position:relative; left:-10px; (le résultat est le même).

http://img297.imageshack.us/img297/6375/paddingmarginer0.png

Voici enfin les extraits du code html et css qui concernent cet affichage.

html (je sais qu'il y a beaucoup de div dont beaucoup d'inutiles, mais j'utilise un CMS (drupal) qui génèrent beaucoup de div, dont beaucoup sont dans le code du CMS, je ne préfers donc pas les enlever.

<div id="container"> 		                        
  <div class="node page" id="node-27">
    <div class="content">
      <div class='view view-vous-souhaitez-commander'>
        <div class='view-content view-content-vous-souhaitez-commander'>
          <div class="item-list">
            <ul>
              <li class="last disc-0">
                <img src="http://monsite.com/sites/monsite.com/files/images/salon.jpg" alt="13" title="13" width="125" height="100" />
                <h2><a class="title" href="/fr/fiches_securite">Comment manipuler nos produits</a></h2>
               <span class="date"></span>
                 <div class="body">                 
                   <p class="first"><span class="first-letter">V</span>ous trouverez ici les fiches de sécurité MSDS des produits que nous vous proposons pour vous</p>   
                  <a class="link" href="/fr/fiches_securite">[...]</a>
              </li>
              <li class="last disc-1">
               <img src="http://monsite.com/sites/monsite.com/files/images/salon.jpg" alt="12" title="12" width="125" height="100" />  <h2>  
    <a class="title" href="/fr/catagogue">Le catalogue *****</a></h2>
    <span class="date"></span>
    <div class="body">
      <p class="first"><span class="first-letter">C</span>eci est un lien vers le catalogue des produits ********</p>  
    </div>
    <a class="link" href="/fr/catagogue">[...]</a>
        </li>
</ul>
</div>
</div>
</div>

<h1>Notre corps de métier</h1>
</div>

Et voila le CSS

/* Layout */
* { margin:0; padding:0; }
body { 
  background:#EEE url(img/BG.jpg) repeat-x left top;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:0.7em;
  color:#000;
}
#global { width:960px; margin:0 auto; margin-top:5px; overflow:hidden;}

#central { width:760px; background:#FFF; border:1px solid #D6D6D6; float:left; position:relative;}

#sidebar-right { float:right; width:190px; margin-top:120px; background:#FFF; }
#sidebar-right h1 { text-align:center; }

#header { background:url(img/H_bg.jpg) no-repeat; height:120px; position:relative;}

a#logo:hover { border:none; }
#logo img { margin:7px 0 0 9px; }

#footer { border-top:1px solid #D6D6D6; background:#e5e7ce; clear:both; }
#footer p { text-align:right; line-height:2em; color:#a5a795; margin-right:1em; } 
#footer p a { color:#a5a795; text-decoration:none;}

#container { padding:10px; }

.view, .view-content, .item-list { overflow:hidden;}
.view ul li { 
	width:369px; 
	float:left; 
	list-style-type:none; 
	position:relative; 
	border-bottom:1px dotted #6C9F66; 
	margin:0;
	padding:0 0 10px 0;

}
.view ul li img { 
	float:left; 
	border:1px solid #b0d09d; 
	margin:0 0.5em 0 0; 
}
.view ul li h2 { 
	font-size:1em;
	color:#6c9f66; 
	text-decoration:none; 
}
.view ul li span.date { font-style:italic; }
.view ul li div.body { margin:1em 0 0 0; }
.view ul li a.link { 
	position:absolute; 
	right:5px; 
	bottom:5px;
	color:#6c9f66; 
	text-decoration:none;
}
.view ul li a:hover { text-decoration:underline; }
.view ul li p span.first-letter { font-size:1em; color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; }

/* Particularités des li */
.view ul li.disc-1 { border-left:1px dotted #6C9F66;}
.view ul li.disc-1 img { margin-left:10px; }
.view ul li.disc-1 p { margin-left:10px; }
.view ul li.last { border-bottom:none; padding:10px 0 0 0;}

/* Pagination */
.pager { margin:1em 0 0 0; }

/* Node Theming */
.article { margin:10px; }
.node { overflow:hidden; }
.node div.meta { float:right; border:1px solid #D6D6D6; padding:0.5em; background:#F8F8F8; text-align:right; max-width:300px; }
.node .content { float:left; }


.node p.submitted { font-style:italic;  margin-bottom:0.5em; }
.node p.archives { margin-bottom:0.5em; }
.node p {}

.node .field-type-image { float:left; margin:0 0.5em 0 0; display:none;}
.node p span.first-letter { font-size:2.5em; color:#6C9F66; }

.node h1 { margin-left:-10px; }

Voila voila, j'espere que cela pourra vous être utile.

ok, j'ai trouvé juste apres avoir posté !!

c'était du aux overflow:hidden; que j'avais. Plus précisément au overflow:hidden; de mon .node {}

Voila

Merci de m'avoir aporté ton aide Florent V.
Modifié par zmove (12 Apr 2007 - 15:59)

Tu considères donc que ton problème est [Résolu]...

oh oui pardon...