[Résolu] Problème étrange de menu css sous firefox/opera

Bonjour, bonjour,

premier post de ma part sur le forum (d'habitude je trouve tout seul ).

voci mon (mes) problème(s).

J'ai créé un menu en liste <ul> très simple, celui fonctionne "au poil" sur tous les navigateurs, mais au moment d'intégrer un sous menu à la rubrique agenda, le sous menu s'avère passer derrière le contenu. D'ou mon scepticisme. J'ai bien essayé de modifier le z-index, sans effet.

Sous Opera le problème est différent, en effet les dernières lettres de chaque mot de ma lsite disparait pour une raison étrange (enfin moi jtrouve ça étrange...)

voila le code xhtml:

<div id="center">
        <div id="colonne">
          <div id="menu">
            <ul>
<li><span class="menu_default"><a href="#"  target="_top"  class="menu_default"> presentation </a></span>
</li>
<li><span class="menu_current"><a href="#"  target="_top"  class="menu_current"> nos produits </a></span>

</li>
<li><span class="menu_default"><a href="#" onmouseover = "document.getElementById('menu_14').style.display='block'"
				onmouseout = "document.getElementById('menu_14').style.display='none'" target="_top"  class="menu_default"> agenda </a></span>
<ul id='menu_14' onmouseover = "this.style.display='block'"
				  onmouseout  = "this.style.display='none'">
<li><span class="menu_default"><a href="#"  target="_top"  class="menu_default"> concerts </a></span>
</li>
<li><span class="menu_default"><a href="#"  target="_top"  class="menu_default"> diner spectacles </a></span>
</li>
</ul>
</li>
<li><span class="menu_default"><a href="#"  target="_top"  class="menu_default"> nous recherchons </a></span>

</li>
<li><span class="menu_default"><a href="#"  target="_top"  class="menu_default"> votre avis </a></span>
</li>
<li><span class="menu_default"><a href="#"  target="_top"  class="menu_default"> contact </a></span>
</li>
<li><span class="menu_default"><a href="#"  target="_top"  class="menu_default"> partenaires </a></span>
</li>
</ul>
          </div> 
        </div>
        <div id="contenu">
          <fieldset>
            <legend><b>
              <!-- titre --> </b>
            </legend>
<!--Contenu-->
            </fieldset>
        </div>   
      </div>

et voici mon code CSS pour le menu:

/*_____Menu___________________________________________________________________*/
#menu{
   z-index:900;
  
}
#menu ul{
  margin: 0;
  padding:0;
  overflow:hidden;
}
#menu li{
  list-style-type:none;
  margin: 0;
  padding:0;
  font-size:0;
  
  border:1px solid #E5E4A1;
}
#menu li a{
  width:120px;
  
  display:block;
  position:relative;
  text-align:left;
  padding:0px 5px; 
  margin-left:7px;
  color:#000;
  font-size:13px;
  font-weight:bold;
  line-height:20px;
  letter-spacing:1px;
  text-decoration:none;
}
#menu li a:first-letter{
  text-transform:uppercase;
  font-size:14px;
}
#menu li a:hover{
  background:#293416;
  color:#fff;
}
#menu li .menu_current{
  background:#DCDB8B;
  color:#D20D17;
}
#menu ul li ul {  
  display:none;
  
  cursor:pointer;
  z-index:1000;
  margin-left:110px;
  margin-top:-20px;
  position:absolute;
}
#menu ul li ul li{
  background:#DCDB8B;
  border:1px solid #E5E4A1;
  color:#fff;
  margin-top:-1px;
  width:140px;
}
#menu ul li ul li span{
 
}
#menu ul li ul li a{
   display: block;
   width:100%;
}
#menu ul li ul li a:hover{
   display: block;
   width:100%;
    
  color:#fff;
}
#menu ul li ul li .menu_current:hover{
  color:#fff;
}

Bon alors là je ne vois pas du tout d'ou viennet ces problèmes. Siseulement qqu'un a une idée.

Je fais suivre l'url :http://crocobar.fr/pages/nos-produits.php[/url]

Un grand merci d'avance
Modifié par pablo77 (26 Apr 2007 - 15:44)

pablo77 a écrit :
au moment d'intégrer un sous menu à la rubrique agenda

Très mauvaise idée que de vouloir intégrer un menu déroulant. Les menus déroulants sont ergonomiquement discutables et posent de sérieux problème d'accessibilité. Lire à ce propos :
http://css.alsacreations.com/Accessibilite-du-Web/accessibilite-des-menus-de-navigation-en-cascade

Si la rubrique «Agenda» n'a que deux items, je les placerais directement dans le menu principal. Surtout que «Concerts» et «Dîner spectacle» donnent une image plus vivante du lieu que «Agenda».

pablo77 a écrit :
le sous menu s'avère passer derrière le contenu. D'ou mon scepticisme. J'ai bien essayé de modifier le z-index, sans effet.

z-index ne s'applique qu'aux éléments positionnés (en absolu, en fixe ou en relatif). Par contre, j'ai beau essayer d'appliquer des correctifs, je n'arrive à rien de probant.

Ah oui, et tu as un overflow: hidden sur ton menu, c'est pas l'idéal pour afficher un bloc descendant en dehors du menu...

a écrit :
Très mauvaise idée que de vouloir intégrer un menu déroulant.

Bon effectivement, on peux trouver ça discutable, mais ça soulève une question annexe, qaund un client veux quelquechose... en l'occurence là regrouper un nombre plus important de sous pages (pour le moment 2 mais plus tard, plus de pages).

a écrit :
z-index ne s'applique qu'aux éléments positionnés (en absolu, en fixe ou en relatif). Par contre, j'ai beau essayer d'appliquer des correctifs, je n'arrive à rien de probant.

Alors oui bon,on en arrive à la même conclusion, le menu déroulant est une lsite <ul> disposé par le biais de ma css en position:absolute; donc il y a bien une réaction étrange.

L'overflow:hidden était destiné à contrer un bug dans opera mais je constate qu'il y a qd même un problème avec ce très très bon navigateur qui ose (oui il ose!!! Ô malheur à lui) me rogner une lettre à la fin de chaque lien.

pablo77 a écrit :
Bon effectivement, on peux trouver ça discutable, mais ça soulève une question annexe, qaund un client veux quelquechose...

C'est effectivement un problème annexe, et souvent difficile à surmonter. Problème que je poserais pour ma part en ces termes :
- le client est-il prêt à faire confiance au prestataire, ou tout simplement à l'écouter ;
- le prestataire est-il prêt à faire valoir son conseil, et à le défendre ?
Bien sûr, au final c'est le client qui décide. Mais entre le souhait du client et la décision finale qu'il prendra, il y a le temps du conseil.

pablo77 a écrit :
en l'occurence là regrouper un nombre plus important de sous pages (pour le moment 2 mais plus tard, plus de pages)

À savoir tout de même qu'il existe des alternatives :
- un plan de site, toujours utile, en particulier pour l'accessibilité, mais aussi pour les utilisateurs «lambda» ;
- une page de rubrique présentant chacun des articles ;
- un menu secondaire, qui change en fonction de la rubrique en cours ;
- etc.


Pour la partie technique du problème, ça me dépasse un peu. Il faudrait que je reprenne le tout...

hé bein, j'ai le plaisir de t'accueillir dans le club de ceux qui ne comprennent toujorus pas d'ou vient ce problème (on est deux je suis le chef tu eras sous-chef:) )

Blague à part effectvement j'envisage des solutions pour contourner le problème ...

MAIS le problème est toujours là

menu circonstanciel, celà rajoute un clic en plus, bon c'est pas la mort je le concède volontiers... mais ça ne facilite pas selon moi l'accessibilité à l'information.

C'est à voir

De toute façon mon problème n'est pas réglé pour autant, notemment le bug sous OPERA.. c'est déjà arrivé à quelqu'un?

Menu déroulant

Bonjour, bonjour, parcette belle journée de printemps, je vous annonce donc à tous que les roblèmes sous opéra et firefox sont résolus (héhé..)

-Firefox -> #menu = position:absolute; (merci florent v.)
-Opéra ->letter-spacing non supporté.

Et là... et là.. haha la bonne blague, ça ne passe plus sous IE (ni le 5 ni le 6 ni le 7)

Alors j'avoue qu'un peud 'aide serait la bienvenue, en vous remerciant;)

pavel ++

Bonjour,

A vu de nez et en respectant ton code (il me semble bien compliqué pour une telle mise en page ) si tu supprimes de ton html ton bloc #menu et que tu utilises ce bout de css, cela devrait marcher pour ie6,7 et FF

/*_____Menu___________________________________________________________________*/

#colonne ul {
	margin: 0;
	padding: 0;
	z-index: 900;
	position: absolute;
*/
}
#colonne li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0;
	border: 1px solid #E5E4A1;
}
#colonne li a {
	width: 120px;
	display: block;
	position: relative;
	text-align: left;
	padding: 0px 5px;
	margin-left: 7px;
	color: #000;
	font-size: 13px;
	font-weight: bold;
	line-height: 20px;
	/*letter-spacing: 1px;
*/
	text-decoration: none;
}
#colonne li a:first-letter {
	text-transform: uppercase;
	font-size: 14px;
}
#colonne li a:hover {
	background: #293416;
	color: #fff;
}
#colonne li .menu_current {
	background: #DCDB8B;
	color: #D20D17;
}
#colonne ul li ul {
	display: none;
	cursor: pointer;
	z-index: 900;
	margin-left: 110px;
	margin-top: -20px;
	position: absolute;
}
#colonne ul li ul li {
	background: #DCDB8B;
	border: 1px solid #E5E4A1;
	color: #fff;
	margin-top: -1px;
	width: 180px;
}
#colonne ul li ul li span {
}
#colonne ul li ul li a {
	display: block;
	width: 160px;
}
#colonne ul li ul li a:hover {
	color: #fff;
}
#colonne ul li ul li .menu_current:hover {
	color: #fff;
}

Il manquerait qu'un overflow: hidden a fieldset pour opera ?

Alors...là....

heu je dois avouer que oui ça simplifie les choses.. mais maintenant mon sous menu repasse en dessous du fieldset sous firefox ce que je trouve assez étrange, quand même.. pourtant c'est pas mon premier menu!

Je cherche en j'enquête, et le prochain client qui me parle de menu déroulant je le torture..

Merci

Problème résolu, Par élimination, j'ai donc trouvé la source du problème,il s'agisasit d'un problème de transparence..

Donc je vais tenter de palier avec un png24

Merci encore à ceux qui m'ont aidé (et même à ceux qui ne savaient pas mais qui auraient bien voulu:) )

+

pablo77 a écrit :
Problème résolu

+

Si je puis me permettre, ne pas oublier de marquer ton sujet comme [Résolu] puisque tel est le cas (explications dans les règles du forum)