Infobulle incompatible sous IE 7.

Bonjour à tous.

Tout d'abord je vous souhaite de joyeuses fêtes. Ca fait quelque temps que je prend plaisir à lire vos tutos très instructifs dans la confection d'un site ouaib.

Aujourd'hui, je viens à vous, car j'ai un problème persistant et je n'arrive pas à le résoudre.

CSS:

#bulle3  { /* 3eme infobulle */
	display: inline; /* on affiche l'infobulle */
	position: absolute;
	top: -15px;
	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
	background: no;
	left: -19px;	
	z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}

HTML : 


- Bulle 3 

		<a href="#" class="info"><img src="images/pictolang.gif" alt="bidule" /><span class="Style2"><div id="bulle3"><a href="index.html"><img src="images/frn.gif" alt="" onMouseOver="this.src='images/frr.gif'" onMouseOut="this.src='images/frn.gif'" /></a><a href="../Uk/home.html"><img src="images/ukn.gif" alt="" onMouseOver="this.src='images/ukr.gif'" onMouseOut="this.src='images/ukn.gif'" /></a><img src="images/esn.gif" alt="" onMouseOver="this.src='images/esr.gif'" onMouseOut="this.src='images/esn.gif'" /><br />
		  <img src="images/itn.gif" alt="" onMouseOver="this.src='images/itr.gif'" onMouseOut="this.src='images/itn.gif'" /><img src="images/aln.gif" alt="" onMouseOver="this.src='images/alr.gif'" onMouseOut="this.src='images/aln.gif'" /><img src="images/nln.gif" alt="" onMouseOver="this.src='images/nlr.gif'" onMouseOut="this.src='images/nln.gif'" /><br /><img src="images/chn.gif" alt="" onMouseOver="this.src='images/chr.gif'" onMouseOut="this.src='images/chn.gif'" /><img src="images/pon.gif" alt="" onMouseOver="this.src='images/por.gif'" onMouseOut="this.src='images/pon.gif'" /><img src="images/fln.gif" alt=""  onMouseOver="this.src='images/flr.gif'" onMouseOut="this.src='images/fln.gif'" /></a></div></span></p>

- Bulle 3

Quand je passe sous IE, elle se déclenche sans arret, impossible de pouvoir cliquer dessus.

Sous FF :

http://images2.hiboox.com/images/5208/6e28b826acf08ac762775c02cca1df9a.jpg

Le screen que vous voyez dans cette côte est ce que FireFox affiche quand on passe la souris sur la planète en haut de l'image. Vous l'aurez compris, la multitude d'icône se déroulant permette de changer la langue du site.
Le problème étant que sous ie, j'ai remarqué qu'en utilisant top afin de positionner l'image en hauteur, les valeurs varient entre FireFox et IE. Avez vous une solution qui me permettrait de retrouver une même hauteur d'un navigateur à l'autre ?

Sinon autre problème, cette infobulle ne fonctionne qu'a moitié. Quand on passe la souris sur la planète, l'infobulle s'affiche, mais "beug". Elle ne va pas rester en place. Si après on essaye d'aller sur une des icônes (fr, uk, etc...) l'infobulle se ferme directement alors que sous Firefox, on peut très largement cliqué sur une des icônes. :rolleyes:

Si vous avez des solutions à mon problème je suis preneur.

Bonjour,

Ça n'a peut-être aucun rapport, mais la valeur no n'existe pas pour la propriété background.

Un problème qui est un peu plus en rapport: ton code HTML est ultra-faux. Complètement invalide. Par ailleurs mal organisé et illisible. Donc: à refaire complètement.

Joyeuses fêtes malgré tout et bon courage.

Salut, que de bonnes nouvelles lol.

Tu pourrais me donner un exemple valide ? Non parce que je vois pas...

<a href="#" class="info">
        	<img src="images/pictolang.gif" alt="Langues disponibles" />
            	<span class="Style2">
                	<div id="bulle3">
                    	<a href="index.html"><img src="images/frn.gif" alt="" onMouseOver="this.src='images/frr.gif'" onMouseOut="this.src='images/frn.gif'" /></a>
                        <a href="../Uk/home.html"><img src="images/ukn.gif" alt="" onMouseOver="this.src='images/ukr.gif'" onMouseOut="this.src='images/ukn.gif'" /></a>
                        <img src="images/esn.gif" alt="" onMouseOver="this.src='images/esr.gif'" onMouseOut="this.src='images/esn.gif'" /><br />
          				<img src="images/itn.gif" alt="" onMouseOver="this.src='images/itr.gif'" onMouseOut="this.src='images/itn.gif'" />
                        <img src="images/aln.gif" alt="" onMouseOver="this.src='images/alr.gif'" onMouseOut="this.src='images/aln.gif'" />
                        <img src="images/nln.gif" alt="" onMouseOver="this.src='images/nlr.gif'" onMouseOut="this.src='images/nln.gif'" /><br />
                        <img src="images/chn.gif" alt="" onMouseOver="this.src='images/chr.gif'" onMouseOut="this.src='images/chn.gif'" />
                        <img src="images/pon.gif" alt="" onMouseOver="this.src='images/por.gif'" onMouseOut="this.src='images/pon.gif'" />
                        <img src="images/fln.gif" alt="" onMouseOver="this.src='images/flr.gif'" onMouseOut="this.src='images/fln.gif'" />
         			</div>  
                 </span>
         </a>                     

Peut être un peu plus claire comme ça ? xD

#bulle3  { /* 3eme infobulle */
	display: block; /* on affiche l'infobulle */
	position: absolute;
	top: -15px;
	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
	background-color: transparent; 
	left: -23px;	
}

Modifié par JeanJean75 (23 Dec 2008 - 13:06)

Alors pour l'invalidité du code HTML:

1. Tu ne peux pas mettre de DIV dans un SPAN.
2. Tu ne peux pas mettre de A comme enfant ou descendant d'un A.

Un code valide (et accessible tant qu'à faire, parce que là c'est pas le cas)?

<div id="languages">
	<h2><img src="pictolang.png" alt="Langues disponibles" /></h2>
	<ul>
		<li><a href="..." lang="fr" hreflang="fr"><img src="fr.png" alt="français" /></a></li>
		<li><a href="..." lang="en" hreflang="en"><img src="en.png" alt="English" /></a></li>
		<li><a href="..." lang="es" hreflang="es"><img src="es.png" alt="español" /></a></li>
		<li><a href="..." lang="it" hreflang="it"><img src="it.png" alt="italiano" /></a></li>
	</ul>
</div><!-- #languages -->

Les effets de survol, le masquage puis l'affichage du UL, se gèrent en JavaScript, avec un script externe tant qu'à faire.
La mise en forme CSS peut être fait au préalable (avec UL affiché, pas masqué).
Modifié par Florent V. (23 Dec 2008 - 14:15)

J'ai fais comme tu as dit, c'est à dire un code html comme ceci.

	<div id="bulle3">

		<h2><img src="images/pictolang.gif" alt="Langues disponibles" /></h2>
		<ul>
		<li><a href="index.html" lang="fr" hreflang="fr"><img src="images/frn.gif" alt="Francais" onMouseOver="this.src='images/frr.gif'" onMouseOut="this.src='images/frn.gif'" /></a>
        <a href="../Uk/home.html" lang="en" hreflang="en"><img src="images/ukn.gif" alt="English" onMouseOver="this.src='images/ukr.gif'" onMouseOut="this.src='images/ukn.gif'" /></a>
        <a href="..."><img src="images/esn.gif" alt="" onMouseOver="this.src='images/esr.gif'" onMouseOut="this.src='images/esn.gif'" /></a></li>
		
        <li><a href="..."><img src="images/itn.gif" alt="" onMouseOver="this.src='images/itr.gif'" onMouseOut="this.src='images/itn.gif'" /></a>
        <a href="..."><img src="images/aln.gif" alt="" onMouseOver="this.src='images/alr.gif'" onMouseOut="this.src='images/aln.gif'" /></a>
        <a href="..."><img src="images/nln.gif" alt="" onMouseOver="this.src='images/nlr.gif'" onMouseOut="this.src='images/nln.gif'" /></a></li>
        <li><a href="..."><img src="images/chn.gif" alt="" onMouseOver="this.src='images/chr.gif'" onMouseOut="this.src='images/chn.gif'" /></a>
        <a href="..."><img src="images/pon.gif" alt="" onMouseOver="this.src='images/por.gif'" onMouseOut="this.src='images/pon.gif'" /></a>
        <a href="..."><img src="images/fln.gif" alt=""  onMouseOver="this.src='images/flr.gif'" onMouseOut="this.src='images/fln.gif'" /></a></li>
        
		</ul>
	</div>

Par contre en CSS, j'ai mis ça, mais rien ne change.

.bulle3  { /* 3eme infobulle */
	display: block; /* on affiche l'infobulle */
	position: absolute;
	top: -20px;
	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
	background-color: transparent; 
	left: -23px;	
}

J'aimerais aussi enlever les points noir à chaque <li>.

Merci :d

Hello

Pour enlever les puces de la liste, utilise la propriété CSS list-style-type
Exemple :

ul {
list-style-type: none;
}

JeanJean75 a écrit :
J'ai fais comme tu as dit

Heu non, moi j'ai dit «gérer le survol en JavaScript, dans un script externe»...

Je crois qu'il y a quelques lacunes en CSS et en JavaScript que tu auras du mal à dépasser pour réaliser ce genre de petite chose «interactive». Si tu sens que c'est trop difficile pour toi, je te conseille de te rabattre sur une solution plus simple et plus explicite (boutons de langue toujours visibles dans la page). Au delà du problème de compatibilité avec IE7, ce que tu avais réalisé pour ces boutons était d'une très mauvaise qualité, il y a beaucoup d'aspects que tu n'avais pas pris en compte. Peut-être faut-il revoir les ambitions à la baisse, ou à l'inverse se pencher sérieusement sur:

1. les règles de la syntaxe HTML;
2. l'accessibilité des sites web;
3. certains points de CSS (voire les bases de CSS, parce que l'erreur de sélecteur ci-dessus et le fait de garder un certain nombre de propriétés devenues inutiles ou néfastes, ça n'est pas rassurant...);
4. JavaScript;
5. le JavaScript dit «non-intrusif», les gestionnaires d'évènements, les bibliothèques JS.

Mon conseil pourrait se résumer ainsi:
- si on est hobbyiste: faire très simple, éviter les difficultés;
- si on est en formation professionnelle, ou professionnel du web déjà en poste: se former sérieusement avec les différentes ressources en ligne;
- si on a des objectifs assez hauts et pas de compétences en interne: engager un professionnel.

Bonne continuation.
Modifié par Florent V. (23 Dec 2008 - 17:43)

@ audrasjb : Merci ça marche.

@ Florent : Oui, mais je vais d'abord apprendre le JS.

Je vais me pencher plus attentivement sur les différentes règles que tu as posté et je te remercie de prendre le temps de me conseiller.

Je débute en html / css, et je dois faire un site pour mon père. Le site touche à sa fin, ce sont les dernières choses à faire et le site sera bouclé et bon à mettre en ligne.
Dois-je ajouter qu'il est parfaitement fonctionnel sur ie et ff.
Ce site a but professionnel est aussi l'occasion pour moi de faire une réel première approche du html / css mieux que créer une page test avec deux trois balises en vrac qui ne décollera jamais de mon disque dur.

Mon père est bien conscient que je ne vaux pas un pro, mais chaque chose en son temps, le site je peux toujours l'améliorer au fil que je m'améliore. Pour info, je ne suis pas webmaster, loin de là, j'ai 15 ans.

Bonjour,

dans ton plus récent code on peut compter 3 items de liste non ordonnée: il en faudrait 9, autant que de langues.
La présentation en lignes, ça c'est l'affaire des CSS, de la forme. Chaque item fait X pixels de large, si tu fixes la largeur du conteneur <ul> à 3 fois X tu es tranquille (à condition d'enlever les espaces et retours de ligne si ça ne passe pas sous IE ...)

Un problème de conception: non en voyant l'image je n'ai pas compris qu'il s'agissait de changements de langue mais peut-être de filiales dans plusieurs pays?
CH c'est pas une langue, c'en est 4 (français, suisse allemand, italien et romanche ... à moins qu'il y en ait 5 avec l'anglais)
UK c'est pas une langue mais un pays. en / english est la langue officielle. Et bonne chance pour faire cliquer un irlandais sur UK sans compter les états-uniens, canadiens anglophones, australiens, néo-zélandais, nigérians, ...
AL ... Allemagne? Ils disent DEutsch pour la langue, Deutschland pour le pays sauf quand ils sont d'Österreich
FL je cherche encore: Florida?
PT et Brasil, ES et le reste de l'Amérique du sud et centrale, FR et les parties francophones de la Belgique, du Canada, de la Suisse plus l'Andorre, Monaco, Comores, Tunisie, ...

La bonne pratique c'est d'indiquer les langues, pas les pays ... et en VO de préférence parce qu'aussi sûr que je connais pas la signification de &#20013;&#25991;, le chinois lui saura pas ce que veut dire 'chinois'.

Salut,

J'en parlerais à mon père, mais dans l'urgence, il faut que le site soit fonctionnel le plus tôt possible.
Bien sure qu'en suite le site va subir un relooking, mais il nous faut par obligation une page qui marche et qui peut être consulté sans soucis.

Là je vais m'attaquer au JS et je vous dit ensuite.

Bonne fête !

En fouinant sur Alsa création, je suis tombé sur ce tuto. http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery Le principe me plait bien mais je dois remplacer les textes par des images. Vous pensez que c'est possible ?

JeanJean75 a écrit :
Vous pensez que c'est possible ?

Oui, mais pas en adaptant le script du tutoriel. Il faut en comprendre le fonctionnement et être capable de reproduire ce fonctionnement avec un script écrit à partir de rien, pas une version charcutée du script du tutoriel.

Donc: se former aux bases de JavaScript, lire les tutoriels jQuery, se servir de la documentation, faire des essais.

Pour la gestion des infobulles, perso j'utilise overlib.js

La dernière version tourne nickel, je n'ai pas rencontré de problème avec pour le moment.

Je n'ai plus le nom de l'auteur sous la main mais google te retrouvera ça facilement. Le site est en anglais.