28221 sujets

CSS et mise en forme, CSS3

Info-bulles - presque résolu

Bonjour,

je viens de réaliser des pages http://www.sahara-nature.com/traces.php?page=2 avec une pseudo utilisation des menus horizontaux pour pouvoir afficher du texte (info-bulle en fait à afficher en dessous) quand on est sur une barre du pseudo-menu

exemple de pseudo-menu sous une image : indice indice solution

Après avoir tout réalisé en CSS, cela marchait super sous FireFox, mais rien ne s'affichait sous IE.

J'ai trouvé sur un site http://mguessan.free.fr/html/menu.html des explications à ce problème et j'ai tout revu en appliquant ce qui était indiqué (un peu de javascript).

Maintenant cela marche sur IE, et sous FireFox j'ai la bizarrerie suivante :
au premier affichage de la page les textes cachés ne s'affichent pas sous le menu mais plus haut ! Si on recharge la page c'est bon.

Autre différence entre FireFox et IE : sur la page 3, j'ai un menu qui s'affiche sur 2 lignes, c'est impec sur FireFox mais sous IE il n'y a pas la même gestion.

Si quelqu'un a des idées, merci d'avance

Nadia

Voici le code du fichier menul.htc qui fait fonctionner IE :


<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseenter" ONEVENT="showSubMenu()" />
   <PUBLIC:ATTACH EVENT="onmouseleave"  ONEVENT="hideSubMenu()"  />

   <SCRIPT LANGUAGE="JScript">
    var menuBackground;
    var menuHighLight = 'rgb(255,234,170)';

    function showSubMenu() {
      // highlight current item
      menuBackground = style.backgroundColor;
      style.backgroundColor = menuHighLight;

      // get sub menu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
       
        // workaround for windowed select object bug
        // that ignores zindex values
        var iframe = getElementsByTagName('iframe')[0];
        if (!iframe) {
          iframe = document.createElement('iframe');
          iframe.frameBorder=0;
          iframe.style.display='block';
          iframe.style.position='absolute';
          iframe.style.top=submenu.offsetTop;
          iframe.style.left=0;
          iframe.style.width=submenu.offsetWidth;
          iframe.style.height=submenu.offsetHeight;
          insertBefore(iframe, submenu);
        }
         
         // show sub menu
        submenu.style.visibility='visible';
        iframe.style.visibility='visible';
      }
    }
    
    function hideSubMenu() {
      // restore background
      style.backgroundColor = menuBackground;

      // hide submenu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
        submenu.style.visibility='hidden';
        getElementsByTagName('iframe')[0].style.visibility='hidden';
      }
    }

   </SCRIPT>
</PUBLIC:COMPONENT>

Modifié le 15 Jan 2005 - 10:00
Bonjour, et bienvenue à toi nadya sur ce forum,

Comme c'est ton deuxième post sur le forum je t'invite à passer lire ce post pour bien vérifier que tu as suivi la bonne démarche :
Méthodologie à lire avant de poster dans ce salon

Il y a également une bonne base avec les tutoriaux d'Alsacréations et beaucoup de liens dans la section ressource. Smiley cligne

Pour les extraits de code, comme le suggère l'Aide du forum, il est chaudement recommandé de systématiquement baliser les codes HTML ou CSS avec le bouton CODE approprié ([ code][ /code] sans les espaces), cela facilite la lecture de tout le monde et augmente les chances qu'un des membres s'interesse au problème.

N'hésite pas à donner un lien vers une page en ligne qui donnera le contexte de ta page.

Si le coeur t'en dit tu peux aussi passer au bar du forum pour les présentations.
Après de nombreuses recherches dans les tutos, je ne trouve rien qui pourrait remplacer l'effet obtenu avec le menu horizontal, souventlle texte reste affiché ou la position doit être fixe, ou il faut utiliser des id différents ce que je ne souhaite pas faire.

Ayant vu des problèmes de compatibilité avec Opéra qui affiche les textes aléatoirement et les laisse ensuite affichés, j'ai revu le code pour revenir à une version sans le fichier menul.htc, je teste le navigateur et j'ai employé la méthode alternative qui consiste à l'affichage du title sous IE (même si le temps de réaction est plus long).

Le title s'affichant mal sous Fifefox (texte trop long) j'ai laissé le menu pour Firefox et Netscape.

Si quelqu'un sait comment on peut agir sur l'affichage du title dans une balise <a>

Je pense que l'affichage avec une position aléatoirement en dessous ou au dessus provenait du fait que je n'avais pas donné la dimension de mes images au navigateur.

La Version actuelle et l'ancienne version

Merci d'avance à ceux qui m'aideront.

Nadia
Modifié le 08 Jan 2005 - 14:38
J'avance...

J'ai tout changé pour passer en <span>, seulement comme le span ne marche que s'il y a un lien j'ai du mettre <a href="#"> pour que cela fonctionne, puis modifier le curseur pour qu'il affiche ? au lieu de la main quand il n'y a pas de vraie URI.

Je n'obtiens pas le même alignement de l'info-bulle sous IE et sous Firefox, ce qui n'a pas trop d'importance au fond.

Si quelqu'un a des suggestions à m'apporter, merci d'avance.

Nadia

Info-bulles
Sujet clos
Aller à