Decalage bandeau/image

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
viza
Le #22030601
Hi

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


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



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

viza
romer
Le #22030591
viza
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
SAM
Le #22030581
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.


#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 :
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
romer
Le #22030571
SAM
Si tu n'as pas envie d'installer Windows et ses extravagances ni Linux
et ses excentricités tu peux tester tes pages ici :
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
Olivier Miakinen
Le #22030561
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.imgblock img { display: block; }
romer
Le #22030551
Olivier Miakinen
> 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.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 :


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

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
Olivier Miakinen
Le #22030541
Le 06/07/2008 11:00, Bernd a écrit :

Les lignes de départ étaient ainsi :




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> ???
romer
Le #22030531
Olivier Miakinen
> >
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é)

src="images/logo.gif" alt="Logo de la page" /></a> </div>

--
A+

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

> >
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.

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 :
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
romer
Le #22030501
Olivier Miakinen
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 :
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
Publicité
Poster une réponse
Anonyme