Woofy
Pour les bons tuyaux me demander
Messages : 26 197
Inscrit le 11/01/02
Ville : Paris / Grenoble
Non connecté
|
|
Posté le 23 novembre 2006 - 11 h 17 m 05 s |
|
|
Voila, j'essaye de réutiliser un menu CSS/Javascript horizontal donné ici : http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm
Mon code passe très bien sous Firefox, mais pas sous IE alors que le menu du site passe.
Bref, je sais pas trop d'où ca viens, j'ai fais un peu le tour mais je me casse les dents dessus.
Ma feuille de style :
1. html {
2. padding:0px;
3. }
4.
5. body {
6. background-color: #616061;
7. font-size: 12px;
8. font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
9. color: #616061;
10. padding: 0px;
11. margin: 0px;
12. height: 100%;
13.
14. }
15.
16. h2 {
17. font-size: 13px;
18. text-transform: uppercase;
19. color: Gray;
20. background-color: transparent;
21. padding: 5px 20px 5px 20px;
22. }
23.
24. h4 {
25. font-size: 14px;
26. padding-top: 10px;
27. color: #DC143C;
28. text-transform: uppercase;
29. padding: 15px 20px 5px 20px;
30. background-color: transparent;
31. }
32.
33. a {
34. text-decoration: none;
35. color: #616061;
36. font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
37. }
38.
39. a:hover {
40. color: gray ;
41. font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
42. }
43.
44.
45. p, h2, h4, adress, ul {
46. margin: 0px;
47. padding: 5px 20px 5px 20px;
48. }
49.
50. h3 {
51. margin: 0;
52. padding: 5px 0px 0px 0px;
53. width: 168px;
54. font-size: 14px;
55. text-transform: uppercase;
56. color: Gray;
57. background: url('interface/titreh3.gif') no-repeat;
58. border-top-style: none;
59. }
60.
61.
62. pre{
63. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
64. font-size: 12px;
65. margin: 0px;
66. padding: 5px 20px 5px 20px;
67. }
68.
69. #encart {
70. width: 167px;
71. font-size: 10px;
72. border-bottom: 1px solid #DEDEDE;
73. border-left: 1px solid #DEDEDE;
74. border-right: 1px solid #DEDEDE;
75. border-top: 1px solid white;
76. float: right;
77. margin-right: 5px;
78. margin-left: 5px;
79. }
80.
81.
82. #xgd
83. {
84. background-image: url(images/x.jpg);
85. background-repeat: no-repeat;
86. background-position: right;
87. vertical-align: middle;
88. }
89.
90. /* position */
91.
92. #global {
93. background-color: white;
94.
95.
96. }
97.
98. #header {
99. background-image: url('interface/headfond.jpg');
100. background-color: Black;
101. }
102.
103. h1 {
104. font-size: 8px;
105. text-transform: uppercase;
106. text-align: left;
107. color: White;
108. background-color: #616061;
109. padding: 5px 15px;
110. margin: 0px;
111. letter-spacing: 8px;
112. }
113.
114. #content{
115. margin-bottom: 0;
116. margin-top: 0;
117. margin-left: 190;
118. height: 500px;
119. overflow: auto;
120. scrollbar-face-color:silver;
121. scrollbar-highlight-color:#DEDEDE;
122. scrollbar-3dlight-color:#DEDEDE;
123. scrollbar-darkshadow-color:#616061;
124. scrollbar-shadow-color:#616061;
125. scrollbar-arrow-color:white;
126. scrollbar-track-color:white;
127. }
128.
129. #right {
130. margin: 0;
131. padding: 0;
132. margin-right: 0;
133. background-image: url('interface/right.jpg');
134. background-position: right;
135. background-repeat: no-repeat;
136. background-color: #E2E2E4;
137. }
138.
139. .border {
140. border-left: 2px solid #DCDCDC;
141. border-right: 2px solid #DCDCDC;
142. }
143.
144. /* menu */
145.
146. dt, dl, dd, ul, li {
147. list-style-type: none;
148. margin: 0 10px 0 0;
149. padding: 0;
150. }
151.
152. #menu {
153. background-color: #FF0000;
154. }
155.
156. #menu dl {
157. float: left;
158. }
159. #menu li {
160. display: inline;
161. }
162.
163. #menu a {
164. text-decoration: none;
165. color: #000;
166. }
167.
168. #smenu1, #smenu2, #smenu3, #smenu4 {
169. position: absolute;
170. left: 0;
171. font-size: 0.8em;
172. width: 100%;
173. }
Le code généré (j'ai du php en fait derrière)
1. <div id="menu">
2. <dl>
3. <dt onclick="javascript:montre('smenu1');"><img src="" width="15" height="15" ><a href="#" style="color:Red; ">Securiview</a></dt>
4. <dd id="smenu1">
5. <ul>
6. <li> </li>
7. <li><a href="index.php" style="color:Red; ">Qui sommes nous <img src="" width="10" height="10" border=0></a></li>
8. <li>|</li>
9. <li><a href="offre.php">Notre offre</a></li>
10. <li>|</li>
11. <li><a href="ref.php">Références</a></li>
12. <li>|</li>
13. <li><a href="presse.php">Revue de presse</a></li>
14. <li>|</li>
15. <li><a href="acces.php">Accès</a></li>
16. </ul>
17. </dd>
18. </dl>
19.
20. <dl>
21. <dt onclick="javascript:montre('smenu2');"><img src="interface/blank.gif" width="15" height="15" ><a href="#">Services</a></dt>
22. <script>
23. <!--
24. document.write('<dd id="smenu2" style="display:none;">');
25. //-->
26. </script>
27. <noscript><dd id="smenu2"></noscript>
28. <ul>
29. <li> </li>
30. <li><a href="teleadmin.php">Télé-administration</a></li>
31. <li>|</li>
32. <li><a href="archivage.php">Archivage/indexation de logs</a></li>
33. <li>|</li>
34. <li><a href="supervision.php">Supervision active</a></li>
35. <li>|</li>
36. <li><a href="protection.php">Protection des données</a></li>
37. <li>|</li>
38. <li><a href="prestation.php">Prestation On/Off site</a></li>
39. </ul>
40. </dd>
41. </dl>
42.
43. <dl>
44. <dt onclick="javascript:montre('smenu3');"><img src="interface/blank.gif" width="15" height="15" ><a href="#">Partenaires</a></dt>
45. <script>
46. <!--
47. document.write('<dd id="smenu3" style="display:none;">');
48. //-->
49. </script>
50. <noscript><dd id="smenu3"></noscript>
51. <ul>
52. <li> </li>
53. <li><a href="partenaires.php">Partenaires Technologiques</a></li>
54. <li>|</li>
55. <li><a href="devenir.php">Devenir partenaires</a></li>
56. </ul>
57. </dd>
58. </dl>
59. <dl><dt><img src="interface/blank.gif" width="15" height="15" ><a href="evenements.php">Evenements</a></dt></dl>
60. <dl><dt><img src="interface/blank.gif" width="15" height="15" ><a href="contact.php">Contact</a></dt></dl>
61. <dl><dt><img src="interface/blank.gif" width="15" height="15" ><a href="recrutement.php">Recrutement</a></dt></dl>
62. <dl><dt><img src="interface/blank.gif" width="15" height="15" ><a href="telechargement.php">Téléchargement</a></dt></dl>
63. </div>
Si jamais ça ne suffit pas, je peux poser la page dans un coin de serveur et filer le lien. |
|
| |
 Totalement inutile, donc completement indispensable
|
grabber
Coordinateur
MacBook Pro 2,4 Powered
Messages : 8 529
Inscrit le 06/03/02
Ville : Angers
Non connecté
|
|
Posté le 26 novembre 2006 - 09 h 24 m 14 s |
|
|
hello woofy,
lol, ca me fait marrer car moi aussi il ya quelques temps j'avais essaye de repomper ce menu pour gagner du temps. bien mal m'en a pris car j'avais eu des soucis dans le meme genre...
du coup j'ai abandonne cette soluce.
pour faire simple :
- tu crees une barre horizontale avec 5 div pour 5 menus, les 5 divs, tu leur met un float pour qu'ils s'affichent a cote, jusque la rien de sorcier.
- ensuite tu crees un div hidden pour chaque sous menu, la position des div hidden est toujours la meme, seul change le z-index qui definit la "hauteur" du calque (euh c'est comprehensible ca...)
- derriere il te manque juste une fonction js du type de celle donnee. en clair, tu passes a ta fonction le nom du sous menu a faire apparaitre, donc le div conteneur des petits div constituant le sous menu (qui a la meme structure que le menu de niveau 0).
- dans ton js, tu crees un tableau de tous les sous menus, genre ssmenu1, ssmenu2 ... ssmenu5
tu balayes ton tableau, si le ssmenu balaye est le meme que celui qui est passe en argument de la fonction tu affiches celui-ci sinon, tu caches. si tu veux tu peux tester s'il est hidden ou pas en te servant des css via javascript, il faut tester la valeur de la propriete "display" qui te renverra soit "none" (cache), soit "block" (affiche).
voial avec ca c regle.
par contre, je te conseille de repartir de 0, en virant toute ta css qui est un peu complexe pour l'heure sachant que le truc tourne pas.
moi ce que je ferais :
- une css pour les menus niveau 0
- une css pour les menus niveau 1
et c tout !!!
apres une fois que ca marche, tu brodes la css...
sinon, une soluce alternative pour afficher / cacher des elements, c'est la classe prototype, mais pas la derniere car je crois que ces effets la n'y sont plus... je te conseille une verison 1.4 qui inclut les instructions du type : new Effect.Appear('mon_element') et new Effect.Fade('mon_element')
c'est super pratique, tout est géré. le réglage du fade te permet de faire un petit effet genre "je disparais"
qu'en dis tu ? |
|
| |
|
Woofy
Pour les bons tuyaux me demander
Messages : 26 197
Inscrit le 11/01/02
Ville : Paris / Grenoble
Non connecté
|
|
|
Posté le 27 novembre 2006 - 15 h 47 m 31 s |
|
|
Bah disons que j'ai pas envie de me casser la tête 3h la dessus, je verrais ça quand j'aurais le temps. Effectivement, repartir de 0 semble être la solution. Mais bon, j'ai déjà adapté la css pour que ça change suivant la présence ou non de javascript, j'ai pas envie non plus de tout refaire, surtout que je suis une bille en css. |
|
| |
Totalement inutile, donc completement indispensable
|
moinal
Messages : 123
Inscrit le 12/03/05
Ville : Aix en provence
Non connecté
|
|
|
Posté le 05 décembre 2006 - 14 h 10 m 17 s |
|
|
Ca devrait passer si tu mets un onmouseover au lieu du onclick sur tes dt (comme le modèle d'alsacreation).
|
|
| |
|
Woofy
Pour les bons tuyaux me demander
Messages : 26 197
Inscrit le 11/01/02
Ville : Paris / Grenoble
Non connecté
|
|
|
Posté le 05 décembre 2006 - 15 h 08 m 34 s |
|
|
Non je veux un onclick, et non un onmouseover.
Je vais essayer quand même, mais ça m'étonnerais que cela vienne de là. |
|
| |
Totalement inutile, donc completement indispensable
|
moinal
Messages : 123
Inscrit le 12/03/05
Ville : Aix en provence
Non connecté
|
|
|
Posté le 05 décembre 2006 - 18 h 17 m 16 s |
|
|
en fait je me suis planté (comment je ne sais pas j'ai du mal copier le code tout à l'heure je pense)
Bref, donc avec une page vierge +js d'origine+ton css+ton html le seul truc qui merde c'est la gestion du width 100% des ssmenu, ie ne le prend pas en compte, à part repasser en pixel ou em je ne vois pas comment rectifier.
J'ai utilisé plusieurs fois ce menu et jamais eu de problème particulier à le modifier.
|
|
| |
|
Woofy
Pour les bons tuyaux me demander
Messages : 26 197
Inscrit le 11/01/02
Ville : Paris / Grenoble
Non connecté
|
|
|
Posté le 05 décembre 2006 - 18 h 26 m 11 s |
|
|
J'ai pas eu le temps de m'y mettre, faut vraiment que je regarde ça !  |
|
| |
Totalement inutile, donc completement indispensable
|
|
