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.
Bonjour, Vérifiez que
Permalien 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.
En fait, je me rends compte
Permalien 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.
Regardez via firebug, vous
Permalien Soumis par Marina_Kha le 18 Septembre, 2011 - 14:43
Regardez via firebug, vous saurez tout de suite quelle classe s'applique à vos images et surtout, dans quelle enchevêtrement de structures (div ou classe) elles se trouvent.
Vous verrez bien que mes
Permalien 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> </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> </p>
<p> </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>
Quelles sont les
Permalien 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).
le titre de l’image est bien
Permalien Soumis par gdhia le 18 Septembre, 2011 - 15:03
le titre de l'image est bien remplit dans mon code, je l'ai juste enlevé avant de poster le code.
Et la classe C50r ?
Permalien Soumis par Marina_Kha le 18 Septembre, 2011 - 15:04
Et la classe C50r ?
Voici toutes les classes que
Permalien 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; }
Merci. Rien n’explique dans
Permalien 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 ?
en ligne, non ! mais si tu
Permalien Soumis par gdhia le 18 Septembre, 2011 - 17:54
en ligne, non! mais si tu veux et si celà ne te dérange pas, je pourrait t'envoyer le dossier de mon site, dans une archive de 12 Mo
Non, c’est un peu too much.
Permalien Soumis par Marina_Kha le 18 Septembre, 2011 - 19:36
Non, c'est un peu too much. Pouvez-vous simplement me zipper le dossier CSS dont nous parlions dans l'autre sujet et me le mettre à disposition ?
voici joint le fichier zip
Permalien Soumis par gdhia le 18 Septembre, 2011 - 23:46
voici joint le fichier zip dont l'extension a été changée en tgz juste pour pouvoir l'uploader.
http://drupalfr.org/sites/default/files/andromeda.tgz
Bonjour, Je charge un fichier
Permalien Soumis par Marina_Kha le 19 Septembre, 2011 - 09:12
Bonjour,
Je charge un fichier de 5 Ko qui n'est pas une archive valide. Pouvez vous revoir ?
bonsoir, vous m’excuserez
Permalien Soumis par gdhia le 20 Septembre, 2011 - 01:01
bonsoir, vous m'excuserez pour le retard j'espère.
j'ai re-uploadé le fichier, j'espère que cette fois il sera complet au téléchargement.
http://drupalfr.org/sites/default/files/andromeda.tgz
Cordialement
bonjour, Je viens juste de
Permalien 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.
Bonsoir, Le problème n’est
Permalien 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 :)