Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1811 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme couleurs texte de sous-menu sur menu complexe

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Probleme couleurs texte de sous-menu sur menu complexe

n°2027651
toum_toum
Vivons masqués
Posté le 07-10-2010 à 16:16:55  profilanswer
 

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
mood
Publicité
Posté le 07-10-2010 à 16:16:55  profilanswer
 

n°2027680
rufo
Pas me confondre avec Lycos!
Posté le 07-10-2010 à 17:31:05  profilanswer
 

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
n°2027695
David Bori​ng
Posté le 07-10-2010 à 18:51:51  profilanswer
 

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
n°2027770
rufo
Pas me confondre avec Lycos!
Posté le 08-10-2010 à 09:32:02  profilanswer
 

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
n°2027914
toum_toum
Vivons masqués
Posté le 08-10-2010 à 19:29:58  profilanswer
 

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
n°2028001
Skopos
Posté le 09-10-2010 à 14:38:48  profilanswer
 

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.


 
 

n°2028370
toum_toum
Vivons masqués
Posté le 11-10-2010 à 15:07:54  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme couleurs texte de sous-menu sur menu complexe

 

Sujets relatifs
extraction de contenus d'un fichier texteprocess probléme
gros probleme de menuProblème avec SimpleXML
webservice C# et consommation SOAP : problème de namespaceProblème de décalage sur un wordpress
[réglé]probleme newbe pour excel merci d'avanceconvertir \u00eb en ë (résolu, problème d'encodage/décodage)
Attribuer un nombre à du texte sur liste déroulante 
Plus de sujets relatifs à : Probleme couleurs texte de sous-menu sur menu complexe

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.054 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR