28172 sujets

CSS et mise en forme, CSS3

Problème de compatibilité avec mon menu (hover)

Bonjour à tous, tout d'abord pour mon premier message sur ce forum, une petite présentation s'impose.
Je réside en Belgique et je débute depuis peu dans la création web. ( il y a à peine 6 mois je ne connaissais rien au langage css/html/javascript...). J'ai débuté une formation de webmaster en cours du soir depuis septembre 2009. Mon premier gros travail est la création d'un site.

J'ai mis le site en ligne ce matin (toujours en développement, pas encore de contenu) afin de pouvoir mieux exposer mon problème: www.mfmlt.com

Mon souci actuel se passe au niveau des menus et des différents :hover qui lui sont appliqués.

-Sous Firefox tout se déroule comme prévu.
-Sous IE8 les menu sont carré et non arrondi (normal la propriété border-radius est spécifique à mozilla) mais cela ne gène en rien l'ergonomie/navigation donc ça me va.

Voilà ou cela se gâte Smiley ohwell

Sous IE6 pas de développement de sous-menu....
J'ai appris au cours de mes moultes recherches que sous IE6 le hover ne se gérait que sur les ancres (merci à un de vos tuto d'ailleurs Smiley lol ). Qu'à cela ne tienne j'ai appliqué un fix css3hover.htc que j'ai appelé dans la balise <body> par behavior. Mais là, malheur!...toujours rien, j'ai bien appliqué toute la procédure, mon prof de développement l'a refait au cas ou je me serait planté, mais rien....
Aurais-je oublié quelque chose en chemin, ou bien y'a t'il un quelconque conflit au niveau de mes selecteurs?
Je n'ai pas touvé de problème semblable au niveau de la compatibilité "css3hover.htc"....
Alors avant de faire un css dédié à IE6 je me penche donc vers votre savoir

Chose encore plus étrange (enfin étrange pour mon faible niveau de connaissance) le menu ne s'affiche également pas dans google chrome et la je sèche totalement....
Bonjour,

Un bon menu déroulant se développe en JavaScript (non intrusif) mais cela demande de solides compétences en HTML, CSS et JS.

Tu trouveras un tuto pour créer un menu déroulant avec JQuery dans la section "Apprendre" du site.
Modifié par Laurie-Anne (06 May 2010 - 08:17)
Re bonjour!
J'ai modifier un peu mon site, et mes menus fonctionne que ce soit sur les navigateur ou IE6, j'y ai inclus un peu de JS uniquement pour IE6.

Maintenant j'aurais une autre question quand à améliorer l'ergonomie:

une fois qu'on survole les liens, si on va trop loin, le hover disparait instantanément. J'aurais voulu savoir si vous ne connaissiez pas un script jquery ou autre qui permettrait de mettre un genre de temporisateur qui demanderait un temps minimum avant de faire disparaître le hover du premier bloc ul (code que vous pouvez trouver à l'adresse www.mfmlt.com ). Merci pour votre aide! 

<ul id="nav" class="dropdown">
      <li id="convocation"><span class="dir">convocations</span>
        <ul>
          <li><a href="../convocation_a.html">équipe a</a></li>
          <li><a href="../convocation_b.html">équipe b</a></li>
          <li><a href="../convocation_c.html">équipe c</a></li>
        </ul>
      </li>
      <li  id="competition"><span class="dir">compétitions</span>
        <ul>
          <li><span class="dir">résultats</span>
            <ul>
              <li><a href="../competition_resultat_a.html">équipe a</a></li>
              <li><a href="../competition_resultat_b.html">équipe b</a></li>
              <li><a href="../competition_resultat_c.html">équipe c</a></li>
            </ul>
          </li>
          <li><span class="dir">classements</span>
            <ul id="ie6" >
              <li><a href="../competition_classement_a.html">équipe a</a></li>
              <li><a href="../competition_classement_b.html">équipe b</a></li>
              <li><a href="../competition_classement_c.html">équipe c</a></li>
            </ul>
          </li>
hmalaud a écrit :
Tu auras besoin de setTimeout() (expliqué un peu ici : http://forum.alsacreations.com/topic-5-21113-1-resolu-Methode-setTimeout.html) pour créer le décalage souhaité.

Pour en revenir au menu, je suis plutôt partisan d'un menu en css pur avec une surcouche JS spécifique pour IE6 (tout besoin d'animation mis à part). En effet, IE6 ne comprend le :hover que sur les liens, pas sur les <li> que tu utilises pour ton menu.


c'est ce que j'ai essayé de faire: j'ai inclus le code JS suivant:
<!--[if IE 6]>
<script type="text/javascript">sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("Li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);</script>
<![endif]-->


Et j'ai appelé le sfhover dans le css à a place du hover, par exemple:
.IE6 ul.dropdown li.sfhover {
	visibility: visible;
	display:block;
	left:0px;
	padding:0px;
	line-height:normal;
	vertical-align:middle;
	background-color:#C00;
	cursor:default;
}
[/i][/i]
Salut à tous, j'ai un peu avancé dans la réalisation de mon site www.mfmlt.com . J'ai acquis un peu d'expérience au niveau technique (je dis bien un peu).
Je n'ai pas de problème en particulier, mais j'aurais voulu quelques avis que ce soit au niveau ergonomique et clarté. Si le site est suffisamment clair pour y avoir une navigation aisée.
Sujet clos
Aller à