CSS/xHTML - image dans div, marge en bas impossible à réduire ?
Nikita Calvus-Mons
Une image est dans un div flottant, avec une bordure.
Malgr� padding � 0 dans la classe CSS du div, celui-ci est l�g�rement
plus haut que l'image, et il en r�sulte une marge de 3 ou 4 pixels en
bas, tr�s laide.
J'avais d�j� remarqu� �a ailleurs sans y pr�ter attention.
Code CSS :
.image_droite {
float: right;
margin-left: 15px;
margin-bottom: 5px;
padding: 0;
border: 1px solid;
width: auto;
}
Code xHTML :
<div class="image_droite">
<img width="234" height="289"
src="http://grossagouin.viabloga.com/images/mcenroe.jpg" alt="McEnroe" />
</div>
Si vous avez une id�e...
N.
Olivier Miakinen
>
> Une image est dans un div flottant, avec une bordure.
>
> plus haut que l'image, et il en rï¿œsulte une marge de 3 ou 4 pixels en
> bas, trï¿œs laide.
C'est au dessus de l'image que tu as une marge ? En dessous, j'aurais
pariￜ pour le positionnement de l'image par rapport au ￜ baseline ￜ du
texte, mais lￜ je ne sais pas.
Enfin, ￜ tout hasard, essaye ceci :
img { display: block; }
Tu peux bien sï¿œr spï¿œcialiser :
.image_droite img { display: block; }
Nikita Calvus-Mons
> Le 01/12/2009 12:26, Nikita Calvus-Mons a ï¿œcrit :
>> Une image est dans un div flottant, avec une bordure.
>>
>> Malgrￜ padding ￜ 0 dans la classe CSS du div, celui-ci est lￜgￜrement
>> plus haut que l'image, et il en rï¿œsulte une marge de 3 ou 4 pixels en
>> bas, trï¿œs laide.
>
> C'est au dessus de l'image que tu as une marge ? En dessous, j'aurais
> pariￜ pour le positionnement de l'image par rapport au ￜ baseline ￜ du
> texte, mais lￜ je ne sais pas.
Non, en dessous en effet.
En fait, j'ai sorti le "border: 1px;" de la dï¿œclaration du div, et ne
l'ai mis que pour les img de ce div, avec ".image_droite img {}". It works.
En fait c'est apparemment connu comme truc. Ca le fait dans les cellules
de tableaux et dans les div, en effet c'est liￜ ￜ la baseline. Le truc
consiste donc ￜ ne pas mettre la border au div, puisque celui-ci se
rï¿œserve quelques pixels en dessous. La border est sur l'img !
Lￜ, je galￜre pour essayer dans la mￜme feuille de style de donner des
directives de largeur diffￜrentes pour IE. J'ai essayￜ un truc avec :
width: 200px !important;
width: 184px; /* IE */
mais ï¿œa ne fonctionne pas. Et ï¿œa n'a pas l'air trï¿œs ï¿œlï¿œgant, surtout
(comme ma page passe avec succï¿œs les deux validations xHTML/CSS,
maintenant, je fais le malin ;-)).
IE doit interprï¿œter le !important, en fait, maintenant ?
Une idￜe, ￜ part faire une autre CSS pour IE (ce que je ferai, si
besoin, of course) ?
Merci ￜ toi,
N.
SAM
D�j�, les navigateurs rajoutent un node-texte pour les espaces entre
balises.
(mais �a n'a pas l'air d'�tre le probl�me)
On n'a pas le ph�nom�ne :
- avec IE 6 et 7 (8... � voir)
- avec Fx.3, Safari.4, Opera.9
si ... on abandonne les doctypes "strict"
Tester en barre de navigateur (copier-remplacer et return)
(avec diff�rents doc-types)
javascript:d=document.getElementById('image_droite'),
e1=d.firstChild,
e2=d.lastChild,
ig=d.getElementsByTagName('img')[0],
H=(d.offsetHeight-2)*1,
h=ig.height*1;
n=H-h;
alert('premier enfant = '+e1+
'\ndernier enfant 2 = '+e2+
'\nimage = '+ig+
'\nmarge basse = '+n
);
Du temps de NC4 on avait ce pb avec les images
qu'on r�solvait alors en supprimant les espaces entre balises.
De nos jours (standards aidant ?) �a ne fonctionne plus, tt au moins
dans mes tests et en strict.
--
sm
Nikita Calvus-Mons
>
> D�j�, les navigateurs rajoutent un node-texte pour les espaces entre
> balises.
> (mais �a n'a pas l'air d'�tre le probl�me)
>
> On n'a pas le ph�nom�ne :
> - avec IE 6 et 7 (8... � voir)
Si, je l'avais aussi sur IE7. Mais c'est r�gl� assez simplement en
mettant le border � img, et non au div contenant l'img.
N.
SAM
> Le truc
> consiste donc ￜ ne pas mettre la border au div, puisque celui-ci se
> rï¿œserve quelques pixels en dessous. La border est sur l'img !
.image_droite {
float: right;
margin: 0;
padding: 0;
margin-left: 15px;
margin-bottom: 5px;
}
.image_droite img {
margin: 0;
padding: 5px;
background: white;
border: 1px solid black;
}
Indï¿œpendamment de cet effet de prï¿œsentation, j'ai toujours les 4px
supplï¿œmentaires en strict.
Nï¿œanmoins l'avantage de cette sï¿œparation fait que le div s'auto-marge
nï¿œgativement de ces 4px.
ￜa se voit si on a installￜ l'extension Web Developper dans Fx
et qu'on lui demande d'entourer les blocks.
Mï¿œme combat avec :
.image_droite {
float: right;
margin: 0;
padding: 0;
}
.image_droite img {
margin: 0;
margin-left: 15px;
margin-bottom: 5px;
padding: 5px; /* padding ￜ 0 ne rￜsoud rien */
background: white;
border: 1px solid black;
}
L'important est de ne pas mettre de bordure au div.
> Lￜ, je galￜre pour essayer dans la mￜme feuille de style de donner des
> directives de largeur diffￜrentes pour IE. J'ai essayￜ un truc avec :
ￜ propos de quoi ces largeurs ?
> width: 200px !important;
> width: 184px; /* IE */
Le hack pour IE ( <7 ?)
_width: 184px;
ou :
width: 184px; /* pour IE */
/* hack IE \*/
width: 200px; /* navigateurs "normaux" */
/* fin hack */
> mais ï¿œa ne fonctionne pas. Et ï¿œa n'a pas l'air trï¿œs ï¿œlï¿œgant, surtout
> (comme ma page passe avec succï¿œs les deux validations xHTML/CSS,
> maintenant, je fais le malin ;-)).
Le truc : _ + rￜgle ne doit pas ￜtre apprￜciￜ du validateur.
Pour IE, le plus simple ( ? ! ? !) ce sont les commentaires
conditionnels. C'est M$ qui le dit lui-mï¿œme, c'est dire !
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx#UsingCCs>
<http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx>
> Une idￜe, ￜ part faire une autre CSS pour IE (ce que je ferai, si
> besoin, of course) ?
Ha! Bon! Ben ? tu connais alors le coup des commentaires.
--
sm
SAM
> SAM a �crit :
>>
>> On n'a pas le ph�nom�ne :
>> - avec IE 6 et 7 (8... � voir)
>
> Si, je l'avais aussi sur IE7.
Cela viendrait-il de mon Windows (XP SP2) ?
> Mais c'est r�gl� assez simplement en
> mettant le border � img, et non au div contenant l'img.
Oui, vu par ailleurs.
--
sm