Probleme couleurs texte de sous-menu sur menu complexe

Probleme couleurs texte de sous-menu sur menu complexe - HTML/CSS - Programmation

Marsh Posté le 07-10-2010 à 16:16:55    

Salut.
 
Je suis en train d'écrire un menu "moyennement complexe" : il s'agit d'avoir un menu principal horizontal, puis au survol faire apparaître le sous-menu, lui en vertical, juste sous sa rubrique "maître"
 
J'ai donc créé :  
- Une div #menuPrincipal
- Une classe  .sousmenu
 
 
Voici mon code (il est en cours, sûrement des erreurs notamment sur la fin que je n'ai pas fouillée encore...)
 

Code :
  1. #menuPrincipal {
  2. position:relative;
  3. background-color: #333;
  4. width: 850px;
  5. height:36px;
  6. font: 16px tahoma, arial, sans-serif;
  7. color:#FFF;
  8. margin: 0;
  9. padding: 0;
  10. text-decoration:none;
  11. list-style-type:none;
  12. text-align:center;
  13. z-index: 12;
  14. }       
  17. #menuPrincipal li {
  18.  float: left;
  19. width: 120px; /* à surveiller de près */
  20. height:36px;
  21. line-height:36px;
  22.  margin: 0;
  23.  padding: 0;
  24. border-right:#FFF 1px solid;
  25. } 
  28. #menuPrincipal li a {
  29. color: #FFF;
  30. margin: 0px 0;
  31. text-decoration:none;
  32. }
  35. #menuPrincipal li a:hover {
  36. color:#FFA953;
  37. text-decoration:none;
  38. }
  43. #menuPrincipal  li:hover  .sousMenu {
  44. display:block;     /* pour retrouver les sous-menus au survol */
  45. }
  49. #menuPrincipal .sousMenu {
  50. display:none;      /* pour masquer les sous-menus par défaut */
  51. background-color: #FFA953; /* test */
  52. color: #333;   /* test */
  53. font-size:15px;
  54. margin: 0;
  55. padding: 0;
  56. list-style-type: none;
  57. }
  60. #menuPrincipal .sousMenu li {
  61.  float: none;
  62. color:#333;   /* test */
  63.  margin: 0;
  64.  padding: 0;
  65.  border: 0;
  67. }
  70. #menuprincipal .sousmenu li a:link {
  71. display: block;
  72. margin: 0;
  73. border: 0;
  74. text-decoration: none;
  75. line-height:13px;
  76. }
  79. #menuprincipal .sousmenu li a:hover {
  80. line-height:13px;
  81. }


 
 
 
Mon problème :  
 
Du fait du :
 

Code :
  1. #menuPrincipal .sousMenu {
  2. display:none;      /* pour masquer les sous-menus par défaut */


 
Et surtout du :  
 

Code :
  1. #menuPrincipal  li:hover  .sousMenu {
  2. display:block;     /* pour retrouver les sous-menus au survol */
  3. }


 
... je ne parviens à donner des couleurs à mes textes de sous-menu : celles-ci sont obligatoirement tributaires des attributs de couleurs de #menuPrincipal li a:hover
 
 
Comment faudrait-il que j'écrive ce dernier code pour m'y retrouver ?
 
 
 
(PS : les zones marquées   /* test */  sont juste les endroits où j'ai affecté des couleurs différentes pour voir si résultat.)
 


Message édité par toum_toum le 07-10-2010 à 16:17:33

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 07-10-2010 à 16:16:55   

Reply

Marsh Posté le 07-10-2010 à 17:31:05    

En même temps, si tu donnes pas le code html, ça va pas être facile de t'aider :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 07-10-2010 à 18:51:51    

Tu es au courant que li:hover ne fonctionne pas sous IE6 ?
En fait, si on emploie du javascript pour ce genre de menu, c'est pour cette raison.
 
Sinon, #menuPrincipal li li a {color:red} doit fonctionner normalement. Pour le moment, tu donnes une couleur au li, mais c'est le a qui doit avoir la couleur
Et pas besoin de mettre une classe à tes sous-menus, c'est du html en trop. Dans ta css, fais comme moi, emploies la cascade.

Message cité 1 fois
Reply

Marsh Posté le 08-10-2010 à 09:32:02    

Cela dit, IE6, on commence à plus trop le voir à par pour certaines applis spécifiques en entreprises :/ IE 9 va bientôt sortir donc à moins que son site soit dédié aux entreprises (ce dont je doute), pas trop utile de se prendre la tête avec IE6... Par ailleurs, faut pas exprimer les couleurs avec les mots mais avec les codes rgb. En effet, les navigateurs n'utilisent pas forcément les mêmes associations couleurs-codes rgb.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 08-10-2010 à 19:29:58    

Hello.
 
Merci pour vos réponses. Suis assez d'accord avec rufo en ce qui concerne IE6. Faut-il encore s'en soucier ?...
 
Bon sinon j'irais voir pour du javascript, mais c'est sûr que si avec du pur css ca aurait été possible, j'aurais préféré... mais si ça n'est pas possible, tant pis.
 
En fait, je me demande si je ne vais pas abandonner ce type de menu une bonne fois pour toutes. J'y suis depuis trop longtemps. Et je piétine.
Je vais sans doute opter une bonne fois pour toutes pour les menus de type "menuprincipal" en horizontal, et "menu secondaire" en dessous et en latéral (comme sur les blogs ou cms basiques : je n'aime pas trop car justement ça rappelle les blogs ou les cms, de plus j'aime les menus regroupés, mais tant pis, choisissons la simplicité :o )

Message cité 1 fois

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 09-10-2010 à 14:38:48    

toum_toum a écrit :


Bon sinon j'irais voir pour du javascript, mais c'est sûr que si avec du pur css ca aurait été possible, j'aurais préféré... mais si ça n'est pas possible, tant pis.
 


Ca marche pas ça :??:

David Boring a écrit :


Sinon, #menuPrincipal li li a {color:red} doit fonctionner normalement. Pour le moment, tu donnes une couleur au li, mais c'est le a qui doit avoir la couleur
Et pas besoin de mettre une classe à tes sous-menus, c'est du html en trop. Dans ta css, fais comme moi, emploies la cascade.


 
 

Reply

Marsh Posté le 11-10-2010 à 15:07:54    

Hello.
 
Si ca fonctionne, et bien (désolé du léger délai...).  
J'ai même ajouté une ligne autour d'un #menuPrincipal li li a:hover
 
 
Mais j'avoue que maintenant je suis un brin perdu dans mes écritures.
 
 
J'ai :
 
#menuPrincipal {
#menuPrincipal li {
#menuPrincipal li a {
#menuPrincipal li a:hover {
#menuPrincipal li li a {
#menuPrincipal li li a:hover  {
 
-> Jusque-là ca va mais ensuite :
 
#menuPrincipal  li:hover  .sousMenu {
#menuPrincipal .sousMenu {
#menuPrincipal .sousMenu li {
#menuprincipal .sousMenu li a:link {
#menuprincipal .sousMenu li a:hover {
 
 
Je m'y perds pas mal... Ajouté que Boring me suggère de supprimer ma classe .sousMenu. Il a sans doute raison, mais pour ma propre compréhension ça sera encore pire ( :o )


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed