Forum Marketing Le forum de référence en matière de web marketing :
  • Améliorez votre site web
  • Apprenez comment le référencer
  • Découvrez quelles sont les autres méthodes de promotion
  • Boostez votre trafic, vos ventes, vos revenus en ligne

... le tout...
Gratuitement !

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
07 Juillet 2008 17:22:53
95790 Messages dans 15935 Fils de Discussion par 27854 Membres
Dernier membre: sqwi
Accueil Aide Chercher Calendrier Carte des membres Identifiez-vous Inscrivez-vous

 

Forum Marketing  >  Créer et développer un site  >  Conception et Hébergement  >  Fil de Discussion: Casse-tête : positionnement dans IE vs FF 0 Membres et 0 Invités sur ce Fil de Discussion. « sujet précédent | | sujet suivant »
Pages: [1] Imprimer
Auteur Fil de Discussion: Casse-tête : positionnement dans IE vs FF  (Lu 1820 fois)
Med_51
Cadet
***
Hors ligne Hors ligne

Messages: 43


WWW
« le: 08 Mars 2008 02:29:08 »

Bonjour,

Une petite image dans un <a> ouvrant une grande image dans un <span> positionné lors d'un a:hover.
Les deux images devraient s'afficher côte à côte, horizontalement.
IE 6 et 7 affichent correctement ce que je veux mais pas FF (dans lequel la grande image s'affiche trop bas).
Voici le code (sans les images, j'espère que cela ne gênera pas) :
Code:
<style type="text/css">
.zoom {position: relative;}
a:hover.zoom  {background: none;}
a.zoom span {display: none; z-index:100;}
a:hover.zoom span {display:inline;position:absolute; top:0px; left:200px;border:4px solid #000; z-index:100;}
</style>

</head>

<body>
<a class="zoom" href="#nogo"><img src="file:///K|/zoom/images/photo_mini.jpg" width="185" height="167" />
<span>
    <img src="file:///K|/zoom/images/photo_big.jpg" width="350" height="316" /> </span></a>
</body>


Merci de m'aider à leur faire faire la même chose.
Med
Journalisée

Y'a un trou, dans la couche d'ozone...
lesneven
Habitué
****
Hors ligne Hors ligne

Messages: 75



« Réponse #1 le: 17 Mars 2008 14:29:34 »

Bonjour,

Je ne comprends pas bien la notion de z-index dans ce cas, il me semble qu'elle gère plutôt la profondeur, pour avoir les images côte-à-côte  la fonction "float"  me semble plus indiquée.
Journalisée
Med_51
Cadet
***
Hors ligne Hors ligne

Messages: 43


WWW
« Réponse #2 le: 17 Mars 2008 15:59:49 »

Bonjour,

En fait, z-index a été tout simplement utilisé à cause d'autres éléments non présents ici et qui se placaient au-dessus des photos.
Si tu veux, on peut les ignorer.
J'ai régler le problème d'une autre manière mais j'aimerais bien comprendre qu'est-ce qui fait la différence d'interprétation entre IE et FF.

Cordialement
Med
Journalisée

Y'a un trou, dans la couche d'ozone...
Ptibuc
Nico
Modérateur Global
Sénior
*****
Hors ligne Hors ligne

Messages: 2344


Modérateur à votre service


WWW
« Réponse #3 le: 17 Mars 2008 16:18:12 »

Bonjour,

mais j'aimerais bien comprendre qu'est-ce qui fait la différence d'interprétation entre IE et FF.

C'est simple, IE ne respecte pas les standards...

Bonne journée,

Nico
Journalisée

Suivi de colis : économisez sur vos affranchissements.
Actualités marketing
Utilisez des liens courts !
Testez votre positionnement Google
Med_51
Cadet
***
Hors ligne Hors ligne

Messages: 43


WWW
« Réponse #4 le: 17 Mars 2008 16:34:31 »

OK Ptibuc, mais c'est trop facile.
Dans ce cas, IE6 et IE7 afiichent la même chose (qui semble correspondre au code : position: absolute; display: inline; top:0;...) alors que FF affiche l'image à droite certes mais au bas de la vignette.
La question reste posée donc.

Qui trouvera ?

Merci
Med
Journalisée

Y'a un trou, dans la couche d'ozone...
starty
Sénior
*****
Hors ligne Hors ligne

Messages: 176


WWW
« Réponse #5 le: 17 Mars 2008 16:49:28 »

bonjour

Peux tu donner le lien de ta page ?

essaye ca

<img src="file:///K|/zoom/images/photo_mini.jpg"
style="width:185px;  height:167px; float:left; margin-left:20px; display=block;"/>


Pour la deuxieme
<img src="file:///K|/zoom/images/photo_mini.jpg"
style="width:185px;  height:167px; float:left; margin-left:0px; display=block;"/>

 
Code en xhtml et sur un logiciel de type ultra edit ou notepad (pas dreamweaver)
« Dernière édition: 17 Mars 2008 16:56:41 par starty » Journalisée

Conseiller en projet internet
http://www.coaching-netmarketing.com/
Ptibuc
Nico
Modérateur Global
Sénior
*****
Hors ligne Hors ligne

Messages: 2344


Modérateur à votre service


WWW
« Réponse #6 le: 17 Mars 2008 17:01:14 »

Dans ce cas, IE6 et IE7 afiichent la même chose (qui semble correspondre au code : position: absolute; display: inline; top:0;...) alors que FF affiche l'image à droite certes mais au bas de la vignette.
La question reste posée donc.

Trop facile mais ça explique tout Clin d'oeil

Les marges sont calculées différemment, les positionnements aussi, certaines balises CSS ne sont pas interprétées par IE (toutes versions confondues d'ailleurs), bref généralement il faut 2 feuilles de styles pour qu'une site soit compatible avec ces deux navigateurs (la seconde étant l'adaptation de la première spécialement pour IE...)

Bon courage,

Nico
Journalisée

Suivi de colis : économisez sur vos affranchissements.
Actualités marketing
Utilisez des liens courts !
Testez votre positionnement Google
Med_51
Cadet
***
Hors ligne Hors ligne

Messages: 43


WWW
« Réponse #7 le: 18 Mars 2008 22:36:58 »

Bonsoir,

Au-delà de toutes les autres considérations, d'un point de vue purement technique, quel est le problème qui fait que le positionnement n'est pas le même sur les 2 navigateurs ?

Personne ne trouve ?

Bon courage

Med
Journalisée

Y'a un trou, dans la couche d'ozone...
Ptibuc
Nico
Modérateur Global
Sénior
*****
Hors ligne Hors ligne

Messages: 2344


Modérateur à votre service


WWW
« Réponse #8 le: 18 Mars 2008 23:08:13 »

Bonsoir,

Au-delà de toutes les autres considérations, d'un point de vue purement technique, quel est le problème qui fait que le positionnement n'est pas le même sur les 2 navigateurs ?

Je répète : d'un point de vue purement technique, c'est l'interprétation qui est différente. Il faut donc 2 feuilles de styles différentes.

Bonne soirée,

Nico
Journalisée

Suivi de colis : économisez sur vos affranchissements.
Actualités marketing
Utilisez des liens courts !
Testez votre positionnement Google
TEMCA.net
Artiste dans l'âme, sportif par nature
Sénior
*****
Hors ligne Hors ligne

Messages: 278


"Une idée sans exécution est un songe."


WWW
« Réponse #9 le: 24 Mars 2008 11:48:18 »

Si tu ne definis pas précisément les margin et padding, ie et FF mettent les leur et ce ne sont pas les mêmes à la base. Donc tu vas avoir des décalages selon les navigateurs puisqu'ils appliquent leur propre marges... Aussi, pour pas se manger le crâne des heures, il vaut mieux penser mettre toutes ses marges à 0 dès le départ dans la .css

Code:
* {
margin:0;
padding:0
}

Puis ensuite dans ta feuille les régler comme tu veux. Si jamais il subsiste une différence, tu peux utiliser !important pour détourner ie qui ne comprend pas cette "commande". Par exemple :

Code:
#photos {
margin:0;
margin: 5px !important;
padding:0;
}
Journalisée

Pages: [1] Imprimer 
Forum Marketing  >  Créer et développer un site  >  Conception et Hébergement  >  Fil de Discussion: Casse-tête : positionnement dans IE vs FF « sujet précédent | | sujet suivant »
Aller à:  

 
 Inscrivez-vous !

Cher visiteur, inscrivez-vous au forum et :

  • Boostez le trafic de votre site
  • Améliorez son référencement
  • Augmentez vos ventes en ligne
  • Apprenez grâce à nos Membres
  • Améliorez votre site
S'inscrire gratuitement !


 Site d'un Membre

i-discount
Membre de Forum Marketing : i-discount
Voir son site


 On remercie...

Membre : jeanguy
Messages : 177
Bons points : -17
Voir son profil
Voir ses messages
Voir ses stats
Lui envoyer un PM
Visiter son site


 Partenaire

 Les experts disent

 Soutenez le forum

Mettez nos boutons et bandeaux sur votre site et gagnez de l'argent !

-> Lire les détails