[CSS] [resolu] menu vertical déroulant en CSS sous FF et IE7

menu vertical déroulant en CSS sous FF et IE7 [CSS] [resolu] - HTML/CSS - Programmation

Marsh Posté le 31-12-2007 à 17:46:16    

[edit]
Voir le troisième message de ce sujet pour la solution.
========================
Bonjour,

 

j'ai développé un menu entièrement en CSS. Il fonctionne parfaitement sous FF (je test avec), mais bug complètement sous IE7 ! Google ayant beau être mon amis, ça m'a pas beaucoup avancé : tout les menu que j'ai vu sont sensiblement différent du miens qui décale les liens en dessous ou afficher les sous menu. Alors je me retourne vers vous...

 

Un exemple vaut mieux qu'un long discours, alors voici le lien [supprimé] (j'éditerai avec le vrai lien si c'est pas considéré comme du spam d'url).

 

Alors en fait, j'utilise aussi en partie le PHP pour repérer les rubriques où se trouve le visiteur et ainsi afficher le menu adequat. Mais le soucis ne viens pas de là puisque ça fonctionne sous FF et le PHP est côté serveur.

 

Pour le principe, j'ai un div par partie, contenant :
-- lien vers une partie
-- liens vers les sous parties

 

Mon div est initialement de taille limité avec un overflow caché. Et j'augmente sa taille avec un :hover.

 

Voici donc un résumé de ma structure html. Les partie entre croché {$sel_xx} sont des variables Smarty (template PHP) et doivent donc être ignoré ;) .


<div id="Titre" class="MenuFrance{$sel_1}">
     <a href="/10.htm" id="TitreCase" class="MenuFrance{$sel_1}" >&nbsp;France</a>
     <a href="/11.htm" class="MenuPrincipalPoliceSS{$sel_11}" >&nbsp;National</a>
     <a href="/12.htm" class="MenuPrincipalPoliceSS{$sel_12}" >&nbsp;R&eacute;gional</a>
</div>
<div id="Titre" class="MenuEurope{$sel_2}">
     <a href="/20.htm" id="TitreCase" class="MenuEurope{$sel_2}">&nbsp;Europe</a>
     <a href="/21.htm" class="MenuPrincipalPoliceSS{$sel_21}">&nbsp;Politique</a>
     <a href="/22.htm" class="MenuPrincipalPoliceSS{$sel_22}">&nbsp;&Eacute;conomie</a>
</div>
<div id="Titre" class="MenuAsie{$sel_3}">
     <a href="/30.htm" id="TitreCase" class="MenuAsie{$sel_3}">&nbsp;Asie</a>
     <a href="/31.htm" class="MenuPrincipalPoliceSS{$sel_31}">&nbsp;Russie</a>
     <a href="/32.htm" class="MenuPrincipalPoliceSS{$sel_32}">&nbsp;Moyen Orient</a>
     <a href="/33.htm" class="MenuPrincipalPoliceSS{$sel_33}">&nbsp;Orient</a>
     <a href="/34.htm" class="MenuPrincipalPoliceSS{$sel_34}">&nbsp;Extr&ecirc;me Orient</a>
</div>

 

Puis l'extrait de mon cade CSS:


#Titre {
 position: relative;
 clear: left;
 float: left;
 height: 24px;
 overflow: hidden;
 background-position: center;
}
#Titre.MenuFrance {
 background-image: url(/images/fond_1.gif);
}
#Titre.MenuFrance:hover,#Titre.MenuFranceSel,#Titre.MenuFranceSelRub {
 height: 52px;
}
#Titre.MenuEurope {
 background-image: url(/images/fond_2.gif);
}
#Titre.MenuEurope:hover,#Titre.MenuEuropeSel,#Titre.MenuEuropeSelRub {
 height: 52px;
}
#Titre.MenuAsie {
 background-image: url(/images/fond_3.gif);
}
#Titre.MenuAsie:hover,#Titre.MenuAsieSel,#Titre.MenuAsieSelRub {
 height: 80px;
}

 

#TitreCase {
 position: relative;
 clear: left;
 float: left;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: bold;
 text-decoration: none;
 text-transform: uppercase;
 text-align: center;
 width: 137px;
 border-right: 1px solid #000000;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
 height: 23px;
 line-height: 23px;
 letter-spacing: 1px;
 left: 1px;
}
#TitreCase:hover {
 color: #000000;
 background-color: #FFFFCC;
 border-right: 1px solid #FFFFCC;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
}
#TitreCase.MenuFranceSel,#TitreCase.MenuEuropeSel,#TitreCase.MenuAsieSel {
 position: relative;
 color: #000000;
 text-align: center;
 background-color: #FFFFCC;
 border-right: 1px solid #FFFFCC;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
}
#TitreCase.MenuFrance,#TitreCase.MenuFranceSelRub {
 color: #000000;
}
#TitreCase.MenuEurope,#TitreCase.MenuEuropeSelRub {
 color: #000000;
}
#TitreCase.MenuAsie,#TitreCase.MenuAsieSelRub {
 color: #000000;
}

 

.MenuPrincipalPoliceSS {
 position: relative;
 clear: left;
 float: left;
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 line-height: 13px;
 font-style: normal;
 text-decoration: none;
 text-transform: none;
 width: 137px;
 background-color: #CCCCCC;
 border-right: 1px solid #000000;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
 text-align: center;
 margin-left: 1px;
}
.MenuPrincipalPoliceSSSel {
 clear: left;
 float: left;
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 line-height: 13px;
 font-style: normal;
 text-decoration: none;
 text-transform: none;
 width: 137px;
 background-color: #FFFFCC;
 border-right: 1px solid #FFFFCC;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
 text-align: center;
 margin-left: 1px;
}
.MenuPrincipalPoliceSS:hover {
 color: #000000;
 background-color: #FFFFCC;
 border-right: 1px solid #FFFFCC;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
}

 

Alors le comprtement est très bizarre sous IE7 (des lien s'effacent au survole de la souris) et j'ai eu beau modifier plein de paramêtre, ça n'a rien changé...

 

Merci beaucoup à celui/celle/ceux qui pourront y comprendre quelque chose !  ;)


Message édité par Eldusole le 10-04-2009 à 15:39:12
Reply

Marsh Posté le 31-12-2007 à 17:46:16   

Reply

Marsh Posté le 31-12-2007 à 18:02:55    

commence deja par ne pas mettre trois fois le meme id par page
et ensuite tu te prends la tete sur ie7 mais t oublies ie6 qui ne comprend pas :hover sur autre chose qu un a


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 06-01-2008 à 00:50:18    

alors merci pour le conseil : je n'avais pas fait attention aux ID uniques.

 

Donc le menu fonctionne maintenant très bien. Pour IE 6 (et inférieur), il suffit d'associer une autre feuille de style qui déroulera le menu entièrement (grace aux commentaires conditionnels d'IE).

 

Je met donc ici le code ce menu si jamais il interresses quelqu'un.

 

==============================

 

Menu vertical, déroulant, entièrement en CSS (sans javascript).
Compatible Firefox et IE 7 (partiellement IE 6).
Exemple visible sur [supprimé]

 

Le code html

Code :
  1. <div id="Menu1" class="Titre">
  2.    <a href="/10.htm" class="TitreCase" id="Menu1C">&nbsp;Partie 1</a>
  3.    <a href="/11.htm" class="MenuSous" >&nbsp;Sous partie 1</a>
  4.    <a href="/12.htm" class="MenuSous" >&nbsp;Sous partie 2</a>
  5. </div>
  6. <div id="Menu2" class="Titre">
  7.    <a href="/20.htm" class="TitreCase" id="Menu2C">&nbsp;Partie 2</a>
  8.    <a href="/21.htm" class="MenuSous">&nbsp;Sous partie 1</a>
  9.    <a href="/22.htm" class="MenuSous">&nbsp;Sous partie 2</a>
  10. </div>
 

le CSS

Code :
  1. .Titre {
  2. position: relative;
  3. clear: left;
  4. float: left;
  5. overflow: hidden;
  6.         /*le reste peut être personnalisé*/
  7. height: 22px;
  8. }
  9. #Menu1 {
  10.  /*définit les paramètres propres au menu 1, comme la police, le fond, etc.*/
  11. }
  12. #Menu1:hover {
  13.         /* la taille doit être modifié en fonction de la hauteur de .titre et du nombre de sous parties dans le menu */
  14. height: 50px;
  15. }
  16. #Menu2 {
  17.  /*définit les paramètres propres au menu 2, comme la police, le fond, etc.*/
  18. }
  19. #Menu2:hover {
  20.         /* la taille doit être modifié en fonction de la hauteur de .titre et du nombre de sous parties dans le menu */
  21. height: 50px;
  22. }
  23. .TitreCase {
  24. position: relative;
  25. clear: left;
  26. float: left;
  27.         /*le reste peut être personnalisé*/
  28. height: 21px;
  29. line-height: 21px;
  30. width: 137px;
  31. font-family: Arial, Helvetica, sans-serif;
  32. font-size: 14px;
  33. font-style: normal;
  34. font-weight: bold;
  35. text-decoration: none;
  36. text-transform: uppercase;
  37. text-align: center;
  38. border-right: 1px solid #000000;
  39. border-bottom: 1px solid #000000;
  40. border-left: 1px solid #000000;
  41. letter-spacing: 1px;
  42. left: 1px;
  43. }
  44. .TitreCase:hover {
  45. color: #000000;
  46. background-color: #FFFFCC;
  47. border-right: 1px solid #FFFFCC;
  48. }
  50. #Menu1C {
  51.         /* permet de personnalisé la couleur de la police du menu 1 */
  52. color: #000000;
  53. }
  54. #Menu2C {
  55.         /* permet de personnalisé la couleur de la police du menu 2 */
  56. color: #000000;
  57. }
  58. .MenuSous {
  59. position: relative;
  60. clear: left;
  61. float: left;
  62.        /*le reste peut être personnalisé*/
  63. color: #000000;
  64. font-family: Verdana, Arial, Helvetica, sans-serif;
  65. font-size: 10px;
  66. line-height: 13px;
  67. font-style: normal;
  68. text-decoration: none;
  69. text-transform: none;
  70. width: 137px;
  71. background-color: #CCCCCC;
  72. border-right: 1px solid #000000;
  73. border-bottom: 1px solid #000000;
  74. border-left: 1px solid #000000;
  75. text-align: center;
  76. margin-left: 1px;
  77. }
  79. .MenuSous:hover {
  80. color: #000000;
  81. background-color: #FFFFCC;
  82. border-right: 1px solid #FFFFCC;
  83. border-bottom: 1px solid #000000;
  84. border-left: 1px solid #000000;
  85. font-weight: bold;
  86. }
 

Le CSS est surement loin d'être parfait et/ou optimisé, mais ça fonctionne sous FF et sous IE.

 

Si vous avez des questions, n'hésitez pas !


Message édité par Eldusole le 10-04-2009 à 15:39:40
Reply

Marsh Posté le 06-01-2008 à 02:07:38    

bah forcément j aurais pas de question a te poser mais je peux te donner quelques pistes pour optimiser ta css:  
apprends les raccourcis pour les border font...
evite les positionnements au maximum: tu fous tous tes blocs en relative, left:1px... tu pourrais faire ceci juste sur ton conteneur principal (ie: ta classe .Titre) mais le plus judicieux est de foutre un margin-left:1px
et t as des redondances du type background=border-color...
voila qui devrait bien faire maigrir ta css  
 
sinon ca reste toujours incompatible ie6 parce que tu fous tes :hover sur des divs ....  
renseigne toi sur les .htc ce sont des fichiers qui permettent a IE de simuler beaucoup d actions qu il n est pas capable de gerer naturellement (fais une recherche google "htc :hover" et tu devrais trouver rapidement ton bonheur)


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 06-01-2008 à 18:24:58    

Et bien j'aurai au moins appris deux choses : les raccourcis CSS et le truc .htc pour IE 6 !
 
En tout cas merci : maintenant, ça fonctionne sous IE 6 !
Et ma feuille CSS est légèrement plus lisible : en regroupant les border et les font, en supprimant quelques instructions inutles et surtout en réduisant les couleurs à 3 lettres, on gagne pas mal de chose ! ;)
 
Je post les pages web que j'ai utilisé :
- raccourcis d'écriture CSS :
http://wiki.mediabox.fr/tutoriaux/html/raccourcis_css
 
- pour le csshover.htc et IE 6 :
http://blogs.codes-sources.com/cyr [...] r-htc.aspx
et surtout
http://www.nikohk.com/2006/04/11/i [...] -et-hover/
 
Voilà ! Merci mIRROR pour les indication... Même en cherchant bien, je pense que je m'en serai sorti après des jours...
 
J'espère que ça servira à d'autres ;)

Reply

Marsh Posté le 06-01-2008 à 18:40:14    

nickel :jap:


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Sujets relatifs:

Leave a Replay

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