Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Decalage bandeau/image

14 réponses
Avatar
romer
Hi,

Petit pb simple que je n'arrive cependant pas à résoudre.
J'ai une image de 820px de large et 400px de haut.
Je veux coller un tout petit liseré gris de 2 px qui la touche par
dessous.
On observe alors un décalage de 2 px entre l'image et le bandeau.

<div><img src="img.jpg"></div>

#bande {
height: 2px;
background-color:#ccc;
}

J'obtiens ce que je souhaite en ajoutant à la règle css :
margin-top: -2px;
}

Pouvez-vous me dire pourquoi ?

De plus, ça marche sous le Mac mais est-ce que IE6 et 7 vont apprécier
ça ?

--
A+

Romer

10 réponses

1 2
Avatar
viza
Hi

On Thu, 03 Jul 2008 13:46:18 +0200, Bernd wrote:

<div><img src="img.jpg"></div>

#bande {
height: 2px;
background-color:#ccc;
}



C'est ou l'element qui a id="bande"? Ce regle CSS ne fait rien sans ca.

viza
Avatar
romer
viza wrote:

C'est ou l'element qui a id="bande"? Ce regle CSS ne fait rien sans ca.



Il se trouvait sous la ligne qui comporte la photo.
Mais je n'avais pas trop le temps de tergiverser avec cette fine bande.

J'ai adopté une aute solution évidemment universellement reconnue même
par la bouse IE, c'est dire... j'ai placé un cadre autour de la photo
avec un logiciel de retouche et ainsi évidemment aucun souci de
placement avec IE.
--
A+

Romer
Avatar
SAM
Bernd a écrit :
Hi,

Petit pb simple que je n'arrive cependant pas à résoudre.
J'ai une image de 820px de large et 400px de haut.
Je veux coller un tout petit liseré gris de 2 px qui la touche par
dessous.
On observe alors un décalage de 2 px entre l'image et le bandeau.

<div><img src="img.jpg"></div>

#bande {
height: 2px;
background-color:#ccc;
}

J'obtiens ce que je souhaite en ajoutant à la règle css :
margin-top: -2px;
}

Pouvez-vous me dire pourquoi ?



Outre qu'on ne voit pas d'élément qui ait un id nommé "bande",
n'est-il pas normal que ça décale apparemment *dessous* si on ajoute
qque chose *dessous* ?

Alors, oui bien sûr, on peut "tricher" en margeant négativement
l'élément qui a l'additionnel.

De plus, ça marche sous le Mac mais est-ce que IE6 et 7 vont apprécier
ça ?



On s'en moque :
- nous on a nos Macs
- eux n'ont qu'à supporter leur(s) bouze(s)
à chacun sa façon de voir.

Néanmoins tenter de ne pas mélanger torchons et serviettes comme Mac et
IE ... ou on parle de Mac OS (et lequel) et de Windows (et lequel) ou on
parle de navigateurs, donc comparer ce qui est comparable.

Si tu n'as pas envie d'installer Windows et ses extravagances ni Linux
et ses excentricités tu peux tester tes pages ici :
<http://browsershots.org/>
pour toute une flopée de navigateurs dont on se demande quand est-ce
qu'ils vont s'arrêter d'en inventer.

patience oblige ... du monde attend au portillon ... !

--
sm
Avatar
romer
SAM wrote:

Si tu n'as pas envie d'installer Windows et ses extravagances ni Linux
et ses excentricités tu peux tester tes pages ici :
<http://browsershots.org/>
pour toute une flopée de navigateurs dont on se demande quand est-ce
qu'ils vont s'arrêter d'en inventer.

patience oblige ... du monde attend au portillon ... !



J'ai testé avec ce site : 42 navigaeurs donnent les mêmes résultats
probants et unitaires et deux se distinguent et proposent leur merde
innomable : IE5.5 et 6. Et ce sont les plus rrépandus. Comme quoi la
médiocrité, l'inutilité, la sous-quaulité,et l'incompétence dominent le
marchés grand public et peronne n'ose moufter au plus haut niveau.
Sauf Roberto Di Cosmo qui a eu sont heure d'écoute mais qu'ont s'est
évertuer à rendre slencieux.
--
A+

Romer
Avatar
Olivier Miakinen
Le 03/07/2008 13:46, Bernd a écrit :

Petit pb simple que je n'arrive cependant pas à résoudre.
J'ai une image de 820px de large et 400px de haut.
Je veux coller un tout petit liseré gris de 2 px qui la touche par
dessous.
On observe alors un décalage de 2 px entre l'image et le bandeau.



Désolé de ne pas avoir répondu plus tôt, mais j'avais perdu ce lien, et
puis j'espérais que les gourous répondraient avant moi.

Voir la page suivante :
http://developer.mozilla.org/fr/docs/Images,_tableaux_et_d%C3%A9calages_myst%C3%A9rieux

Même s'il y est surtout question de tableaux, je crois que le problème
existe à partir du moment où tu mets une image de type inline dans un
élément de type block.

Essaye donc un truc de ce genre :

<div class='imgblock'><img src="img.jpg"></div>

div.imgblock img { display: block; }
Avatar
romer
Olivier Miakinen <om+ wrote:

> Petit pb simple que je n'arrive cependant pas à résoudre.
> J'ai une image de 820px de large et 400px de haut.
> Je veux coller un tout petit liseré gris de 2 px qui la touche par
> dessous. On observe alors un décalage de 2 px entre l'image et le
> liseré.

Voir la page suivante :
http://developer.mozilla.org/fr/docs/Images,_tableaux_et_d%C3%A9calages_my
st%C3%A9rieux



L'auteur traite si j'ai bien compris le cas d'une image dans un tableau
et les dysfonctionnements qui s'en suivent. J'ai un cas un peu différent
mais qui existe aussi.

Même s'il y est surtout question de tableaux, je crois que le problème
existe à partir du moment où tu mets une image de type inline dans un
élément de type block.

<div class='imgblock'><img src="img.jpg"></div>

div.imgblock img { display: block; }



J'ai trouvé la solution d'un coup ce matin après 2 jours d'errance !

Les lignes de départ étaient ainsi :

<div id="logo"> a href="http://page.paris.fr/"><img
<src="images/logo.gif" alt="Logo de la page" /></a> /div>

Il a suffit de tout écrire sur UNE SEULE ligne et le dysfonctionnement
observable uniquement sur IE 5.5 et 6 a disparu.

<div id="logo"><a href="http://page.paris.fr/"><img
src="images/logo.gif" alt="Logo de la page" /></a></div>

Donc 47 navigateurs qui acceptent cela et deux non (toujours les mêmes).
Ils font plus perdre de temps à les rendre opérationnels que la
confection d'un site selon les normes ! Et ils sont toujours utilisés !

Merci de ta réponse

--
A+

Romer
Avatar
Olivier Miakinen
Le 06/07/2008 11:00, Bernd a écrit :

Les lignes de départ étaient ainsi :

<div id="logo"> a href="http://page.paris.fr/"><img
<src="images/logo.gif" alt="Logo de la page" /></a> /div>



Hein ??? C'est quoi cette soupe de caractères qui ne passe même pas la
plus basique lecture syntaxique ? Et tu as des navigateurs qui affichent
une image avec une balise <src> ???
Avatar
romer
Olivier Miakinen <om+ wrote:

> <div id="logo"> a href="http://page.paris.fr/"><img
> <src="images/logo.gif" alt="Logo de la page" /></a> /div>

Hein ??? C'est quoi cette soupe de caractères qui ne passe même pas la
plus basique lecture syntaxique ? Et tu as des navigateurs qui affichent
une image avec une balise <src> ???



Ne convulse pas ;-)
Des chevrons se sont ajoutés et retranchés je m'empresse de modifier (je
pense que c'est en réglant automatiquement la page à80 caractères comme
me le demandait le newsreader que c'est arrivé)

<div id="logo"><a href="http://page.paris.fr/"><img
src="images/logo.gif" alt="Logo de la page" /></a> </div>

--
A+

Romer
Avatar
Olivier Miakinen
Le 06/07/2008 18:12, Bernd a écrit :

> <div id="logo"> a href="http://page.paris.fr/"><img
> <src="images/logo.gif" alt="Logo de la page" /></a> /div>

Hein ??? C'est quoi cette soupe de caractères qui ne passe même pas la
plus basique lecture syntaxique ? Et tu as des navigateurs qui affichent
une image avec une balise <src> ???



Ne convulse pas ;-)
Des chevrons se sont ajoutés et retranchés je m'empresse de modifier



Ouf ! ;-)

(je pense que c'est en réglant automatiquement la page à 80 caractères
comme me le demandait le newsreader que c'est arrivé)



Un nouvelleur qui ajoute ou supprime des caractères sans te demander ton
avis, et surtout sans que tu aies le moyen de le corriger avant envoi,
je n'ose pas écrire crûment tout le mal que j'en pense.

<div id="logo"><a href="http://page.paris.fr/"><img
src="images/logo.gif" alt="Logo de la page" /></a> </div>


^
Ok. Donc, la seule différence est cette espace en trop dans le DIV, à
côté du lien qui contient l'image. Avec cette espace, ton DIV contient
donc deux choses, d'une part une image, et d'autre part un texte (d'où
le problème dû à la distance entre la « ligne de base » et le bas du
caractère, ce qui te rajoute quelques pixels). Sans cette espace, le
DIV ne contient qu'une image.

Or le traitement de ces espaces en trop au début et à la fin des balises
est différent en SGML et en XML : SGML les retire, XML les laisse. Donc,
pour IE 5.5 et IE 6 qui ne connaissent pas du tout XML et traitent le
XHTML comme du HTML un peu bugué, il est normal qu'il n'y ait pas de
pixels supplémentaires ; réciproquement, pour les navigateurs qui savent
lire du XML, il est normal que cela se décale.

Note que ton premier article était (involontairement) mensonger car tu
prétendais que le bug arrivait avec le code suivant :
<div><img src="img.jpg"></div>
et je suis bien persuadé qu'il n'en était rien en réalité.

---------------------------------------------------------------------

En conclusion : en XHTML, tu dois bien faire la chasse aux espaces
inutiles, surtout si c'est un vieux code HTML que tu es en train de
traduire en XHTML.

Cordialement,
--
Olivier
Avatar
romer
Olivier Miakinen <om+ wrote:

Or le traitement de ces espaces en trop au début et à la fin des balises
est différent en SGML et en XML : SGML les retire, XML les laisse. Donc,
pour IE 5.5 et IE 6 qui ne connaissent pas du tout XML et traitent le
XHTML comme du HTML un peu bugué, il est normal qu'il n'y ait pas de
pixels supplémentaires ; réciproquement, pour les navigateurs qui savent
lire du XML, il est normal que cela se décale.



Merci de cette mise au point - c'est en effet bien clair à présent.

Note que ton premier article était (involontairement) mensonger car tu
prétendais que le bug arrivait avec le code suivant :
<div><img src="img.jpg"></div>
et je suis bien persuadé qu'il n'en était rien en réalité.



En effet, écrit ainsi, il ne peut rien arriver de non orthodoxe.
--
A+

Romer
1 2