18073 sujets

Questions générales et questions de débutants

[ Résolu] Probleme affichage des ssmenu sur menu horizontal

Bonjour à tous et bravo pour ce site qui m'a déjà donné plein de réponses à mes questions.

Cependant, il subsite un problème, sur le menu horizontal que vous proposez, et que ne parvient pas à exploiter correctement. Vous pouvez constater le problème sur le lien suivant :
www.houston.fr/test/test.htm

En effet, lorsque l'on veut survoler les sous menus ces derniers disparaissent avant même d'avoir pu survoler la totalité des liens.
En fait le problème est apparu lorsque j'ai ajouté le tableau juste après le menu.

Ci-dessous le code de la page css attaché à la page html :

	body
{
	margin: 1px 0 ;
	padding: 0 ;
	text-align: center ;
}
div#conteneur
{
 position:absolute;
     left: 50%; 
     margin-left: -400px; /* moitié de la largeur */
	width: 800px ;
	text-align: left ;
}
  /* menu principal*/
.menu_principal {
     background:#fff;
     margin:0;
     padding:20px;
     color:#000;
     font:small Verdana;
     _font:x-small;
      }
  
     #header {
      float:left;
      width:100%;
      background:   url(images/design/bg_bleu.jpg) repeat-x bottom;
      font-size:93%;
      line-height:normal;
	  align: center;
      }
    #header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #header li {
      display:inline;
      margin:0;
      padding:0;
      }
    #header a {
      float:left;
      background:  url(images/design/gauche.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #000;
      text-decoration:none;
      }
    #header a span {
      float:left;
      display:block;
      background:  url(images/design/droite.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      font-weight:bold;
      color:#fff;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a span {float:none;}
    /* End IE5-Mac hack */
    #header a:hover span {
      color:#333;
      }
    #header #current a {
      background-position:0 -150px;
      border-width:0;
      }
    #header #current a span {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#333;
      }
    #header a:hover {
      background-position:0% -150px;
      }
    #header a:hover span {
      background-position:100% -150px;
      }
/* fin du menu principal */

/* menu secondaire */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font:small Arial;
     _font:x-small;
}
#menu {
	position: absolute;
	z-index:100;
	top: 221px;
	left: 10%;
	width: 680px;
	height: 297px;

}
#menu dl {
float: left;
width: 133px;
margin: 0 1px;

}
#menu dt {
cursor: pointer; 
text-align: center;
font-weight: bold; 
background:  url(images/design/bg_bleu.jpg) repeat-x bottom;
border: 1px solid grey; 
padding: 5px;
}
#menu dd {
color:#FFFFFF;
text-decoration:none;

}
#menu li {
text-align: left;
background: #00729d;
}
#menu li a, #menu dt a {
color:#FFFFFF;
text-decoration:none;
border-bottom: 1px solid #3399ff; 
display: block;
height: 100%;
/*padding: 1px; */
}
#menu li a:hover, #menu dt a:hover {
background: #5593D7;
color: #fff;
filter: Alpha(Opacity=100, FinishOpacity=20, Style=1, StartX=0, StartY=0, FinishX=140, FinishY=0); 
}

#menu #actif {
border: 0;
background: #;
}
#menu #SMactif {
color: #000;
border-left: 0;
border-right: 0;
border-top: 0;
background: #0099ff;
}

/* fin du menu secondaire */

/* contour page en image */
.contour_gauche {
background:  url(images/design/contour_gauche.jpg) repeat-y left;
}
.contour_bas {
background:  url(images/design/contour_bas.jpg) repeat-x bottom;
}
.CT_t {
border-right: 1px solid #000;
border-top: 1px solid #000;
}
.cadre {
border: 1px solid #000;
}
.CT_c {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}


Voilà, par avance merci de votre aide, à bientôt,

Fabrice
Modifié par fab_77 (30 Jan 2006 - 09:09)
Bonjour et bienvenue fab_77 Smiley smile

Si tu consultes le forum, tu dois donc avoir déjà lu ce genre de message :
Merci de bien vouloir respecter les règles du forum, peux-tu modifier ton post en plaçant tout ce qui est code dans la blise appropriée "code"... Smiley cligne Merci d'avance.
Bonjour,

Désolé je n'avais pas prété attention à ce détails.

Sinon, j'ai beau chercher, je n'arrive pas à comprendre d'ou viens ce problème, et je m'étonne que personne ne l'ai déjà rencontré. Aucun sujet sur ce problème dans l'historique du forum.

Encore une fois et par avance merci de votre aide.

Fabrice
Bon en fait, il s'agit d'un bug dés qu'on ajoute des bordures pour séparer les liens dans le sous menu, ou encore du padding.
On remarque aussi, pour que le sous menu ne disparaisse pas intempestivement, il faut rester sur le texte du sous menu.

Quelqu'un aurait il réussi à corriger ce bug?

Il faudrait en fait que le onmouseover soit actif sur toute la cellule du menu et non pas sur le texte du menu.

A noter que cela ne se produit qu'à partir du moment ou le sous menu passe par dessus un autre texte. Si on utilise le menu dans une page vide le problème ne se pose pas.

Voilà, à bientôt,
Bonjour,
déja tu nous donnes une URL qui n'aboutie à rien.
fab_77 a écrit :
Bon en fait, il s'agit d'un bug dés qu'on ajoute des bordures pour séparer les liens dans le sous menu, ou encore du padding. 

<li><a href="#">- Halogenes<font color="#00729d">______</font></a></li>

Ce n'est pas la bonne solution.
D'abord il faut bannir les tables et la balise font et mettre la mise en page dans la feuille de style avec par exemple :
#menu a:link{
border-bottom:1px #00729d solid;
}

.
Modifié par chmel (26 Jan 2006 - 17:15)
Bonjour et merci pour ton intérêt.

Désolé j'avais malencontreusement effacé la page du lien.
J'ai remis un exemple de ce qui arrive au survol des sousmenu, tu peux cliquer sur le lien à nouveau.

Moi, on m'avait appris (il y à quelques années) à faire les mises en page justement avec les tableaux.

Mais cela n'explique pas pourquoi ca créé ce problème. par avance merci, à bientôt,

Fabrice
fab_77 a écrit :
Moi, on m'avait appris (il y à quelques années) à faire les mises en page justement avec les tableaux.

Oublies...Tu as quand même corrigé tes liens et tu remarqueras que c'est quand même mieux de respecter les standards en séparant contenu et mise en page. Le jour ou tu voudras modifier la couleur du soulignement de tes liens, tu n'auras qu'un mot à changer dans ta feuille de style.
fab_77 a écrit :
Mais cela n'explique pas pourquoi ca créé ce problème.

En effet Le display:block sur les liens des sous-menus sur IE ne semble pas toujours fonctionner.
C'est le problème de haslayout que tu peut corriger en ajoutant ce code spécial IE à la suite de ta feuille de style
<!--[if lt IE 6]>
<style>
#menu li{width:100%;/*ie6*/}
#menu li a{height:0;/*corrige la hauteur des liens ie5 seulement*/}
</style>
<![endif]-->

Modifié par chmel (30 Jan 2006 - 15:03)
Bonjour,

effectivement ta correction fonctionne parfaitement, et le lien sur les haslayout est très intéressant.

Un grand merci pour ton aide et ton efficacité.

On pourra mettre un [RESOLU] devant le sujet, en souhaitant que ce sujet puisse aider d'autres qui auraient ce problème.

bonne continuation, et à une prochaine fois peut être.

Fabrice
Modifié par fab_77 (27 Jan 2006 - 09:41)
Bonjour,
C'est toi qui doit ajouter [RESOLU] dans le le titre de ton premier message pour cela tu dois cliquer sur le bouton "éditer" de ce post.
Bonne continuation
Michel
Sujet clos
Aller à