[Résolu] Problème de marge ou padding dans un DIV image

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by gdhia on

Bonjour,

j'ai crée des définition de classes pour les images style:

.bimageright {
float: right;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
border: thin solid #C60;
margin-left: 10px;

ensuite dans ma page j'integre des images dans des div:

<div class="bimageright">
    <img alt="" src="/sites/default/files/images/exple.jpg" style="width: 150px; height: 174px; border-width: 2px; title="" />
</div>

cependant le div s'affiche contenant l'image entourée de la bordure voulue mais avec un petit espace blanc en dessous entre l'image et la bordure inférieure.

http://drupalfr.org/sites/default/files/exple.jpg

est ce que quelqu'un sait comment je peux remédier à ce problème ?

Merci.

Forum : 
Développement
Version de Drupal : 
7.x
Tags : 
css
couleur, changer
border

Soumis par Marina_Kha le 18 Septembre, 2011 - 12:41

Bonjour,

Vérifiez que l'élément image dans votre css n'est pas affecté par une marge ou un padding bottom qui prendrait le dessus.

Vérifiez aussi, via Firebug que votre image n'est pas encapsulée dans une classe intermédiaire de type bloc ou bloc-inner qui seraient elles-mêmes porteuses de ces caractéristiques.

Soumis par gdhia le 18 Septembre, 2011 - 14:40

En fait, je me rends compte que cette marge se laisse voir uniquement sous firefox. sous IE7 cette marge disparait. Par ailleurs je n'arrive pas à retrouver la classe image pour vérifier ces bordures.

Soumis par gdhia le 18 Septembre, 2011 - 14:56

Vous verrez bien que mes images sont contenues dans des classes bimageright ou bimageleft sous des colonnes de subcolumns que j'ai crée.
Mais que j'utilise ces subcolumns et c50x ou pas, le simple div class=bimageright ou imageleft me donnent cette marge sous Firefox, et pas sous Internet explorer

<div class="block block-system first odd" id="block-system-main">

  <div class="content">
    <div typeof="foaf:Document" about="/node/1" class="node node-page clearfix" id="node-1">
  <div class="content">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div property="content:encoded" class="field-item even"><p>&nbsp;</p>
<div class="subcolumns">
<div class="c50l">
</div>
<div class="c50r">
<div class="bimageleft">
         <img title="" style="width: 150px; height: 174px;" src="/sites/default/files/images/exple.jpg" alt=""></div>
</div>
</div>
<div class="subcolumns">
<div class="c50r">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><</p>
</div>
<div class="c50l">
<div class="bimagecenter">
          <img title="" style="width: 200px; height: 121px;" src="/sites/default/files/images/exple2.jpg" alt=""></div>
</div></div></div></div>  </div></div></div>
</div>

Soumis par Marina_Kha le 18 Septembre, 2011 - 14:58

Quelles sont les caractéristiques de style de la classe c50r ?

L'affichage du title de l'image est-il prévu dans le CSS ? Étant ici à vide, il peut être interprété comme une ligne (ce qui correspondrait à votre blanc).

Soumis par gdhia le 18 Septembre, 2011 - 15:07

Voici toutes les classes que j'ai crée:

.imageright {
    float: right;
  margin-top: 10px;
  margin-bottom: 10px;
   margin-left: 10px;
}
.imageleft {
  float: left;
   margin-top: 10px;
  margin-bottom: 10px;
   margin-right: 10px;
}
.bimageright {
   float: right;
  margin-top: 10px;
  margin-right: 50px;
    margin-bottom: 10px;
   border: thin solid #C60;
   margin-left: 10px;
}
.bimageleft {
float: left;
   margin-top: 10px;
  margin-left: 50px;
margin-bottom: 10px;
   border: thin solid #C60;
   margin-right: 10px;
}

.bimagecenter {
text-align: center;
    margin-top: 10px;
  margin-left: 10px;
margin-bottom: 10px;
   border: thin solid #C60;
   margin-right: 10px;
}

.imagecenter
{
text-align: center;
    margin: 15px
}

.subcolumns { display:table; width:100%; table-layout:fixed; margin: 20px;}
.subcolumns_oldgecko { width: 100%; float:left; margin: 20px;}
.c20l, .c25l, .c33l, .c40l, .c38l, .c50l,
.c60l, .c62l, .c66l, .c75l, .c80l {float: left; }

.c20r, .c25r, .c33r, .c40r, .c38r, .c50r,
.c60r, .c66r, .c62r, .c75r, .c80r {float: right; margin-left: -5px; }

.c20l, .c20r { width: 20%; }
.c40l, .c40r { width: 40%; }
.c60l, .c60r { width: 60%; }
.c80l, .c80r { width: 80%; }
.c25l, .c25r { width: 25%; }
.c33l, .c33r { width: 33.333%; }
.c50l, .c50r { width: 50%; }
.c66l, .c66r { width: 66.666%; }
.c75l, .c75r { width: 75%; }
.c38l, .c38r { width: 38.2%; }
.c62l, .c62r { width: 61.8%; }

.c20l, .c25l, .c33l, .c38l, .c40l, .c50l, .c60l,
.c62l, .c66l, .c75l, .c80l, .c20r, .c25r, .c33r,
.c38r, .c40r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r {
   display:inline;
}

/* avoid growing widths /
 html .subc,
* html .subcl,
* html .subcr { word-wrap:break-word; o\verflow:hidden; }

subc { padding: 0 0.5em 0 0.5em; overflow: hidden; }
.subcl { padding: 0 1em 0 0; overflow: hidden; }
.subcr { padding: 0 0 0 1em; overflow: hidden; }

Soumis par Marina_Kha le 18 Septembre, 2011 - 15:43

Merci. Rien n'explique dans ce que vous venez d'afficher cette bordure blanche supplémentaire en bas de votre image. Donc, le problème se situe sans doute autre part dans vos css, là cela devient impossible à dire. Je suppose que cet essai n'est pas accessible en ligne ?

Soumis par Marina_Kha le 20 Septembre, 2011 - 16:51

bonjour,

Je viens juste de récupérer le fichier, pardonnez le retard. Dans votre style.css, une classe est mal définie, à la ligne 79 : il manque le point de définition de classe pour subc mais je ne sais pas trop si cette classe intervient ou non dans votre style. Corrigez la de toute façon. L'erreur ayant lieu sur un navigateur et pas sur l'autre pourrait signifier qu'il s'agit d'un problème de ce type (ils n'ont pas tous la même tolérance aux fautes d'encodage).

Le style des images est défini dans le structure.css, depuis la ligne 248. Il existe un

img.image-space-bottom{
  margin-bottom:20px;
}

mais je ne suis pas certaine que cela soit la raison de notre problème (20 px). Rien d'autre de particulier, désolée.

Soumis par visechelle le 10 Juin, 2012 - 03:26

Bonsoir,

Le problème n'est pas récent et j'espère résolu d'une façon où d'une autre mais voilà la solution que j'ai utilisée personellement:

img{
...
vertical-align:bottom;
}

Il suffit donc d'ajouter la ligne "vertical-align:bottom" à la class img dans le fichier template.css de votre thème. Ca permettra de supprimer le padding en dessous des images par défaut.

Source: http://www.sitepoint.com/forums/showthread.php?851622-Unknown-padding-ma...

En espérant que ca aidera d'autres personnes :)