Votre question

Codes sources de pages webs

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
9 Mars 2011 18:24:18

Salut encore les amis, je suis là pour vous demander de l'aide mais cette fois ci en programmation web!
Tout d'abord je vous conseil de faire un tour sur www.developpez.com et pointez sur leurs différents rubriques (ex: LANGAGE) et vous verrez le menu qui s'affichera en bas lorsque la sourie y est toujours dessu. Maintenant la question est de savoir comment mettre en place une telle chose, quel langage faut-il utiliser (avec les codes s'il vous plaît !) ?

Autres pages sur : codes sources pages webs

a c 232 L Programmation
9 Mars 2011 18:36:54

Salut,

C'est du CSS tout simplement.
Et le code, il y est dans la source du site.
m
0
l
11 Mars 2011 11:28:35

Oui du CSS mais comment le mettre en place et avec quel code syntaxique ? Sachez que je suis debutant et que je veux si possible des coups de mains forts !
Merci d'avance !!!
m
0
l
Contenus similaires
a c 232 L Programmation
11 Mars 2011 11:41:02

Je t'ai dit que ça se trouvait dans la source du site...
Allez, je t'ai extrait les parties intéressantes.

Le CSS:
  1. #gabarit_tabmenu #tabs
  2. {
  3. background-image: url('./images/general/tabmenu-left-background.png');
  4. background-repeat: no-repeat;
  5. padding-left: 0.75em;
  6. height: 33px;
  7. }
  8.  
  9. #gabarit_tabmenu #tabs .first
  10. {
  11. background-image: none;
  12. padding: 0;
  13. }
  14.  
  15. #gabarit_tabmenu #tabs li
  16. {
  17. float: left;
  18. position: relative;
  19. display: block;
  20. font-size: 13px;
  21. line-height: 35px;
  22. color: #D8D7D7;
  23. z-index: 100;
  24. height: 33px;
  25. margin-right: 4px;
  26. padding-left: 4px;
  27. background-image: url('./images/general/tabmenu-separator.png');
  28. background-repeat: no-repeat;
  29. }
  30.  
  31. /* IE7 Hack */
  32. *+html #gabarit_tabmenu #tabs li
  33. {
  34. line-height: 36px;
  35. }
  36.  
  37. #gabarit_tabmenu #tabs li a
  38. {
  39. font-size: 1em;
  40. color: #FFF;
  41. padding: 0 2px;
  42. display: block;
  43. height: 100%;
  44. }
  45.  
  46. * html #gabarit_tabmenu #tabs li a
  47. {
  48. display: inline-block;
  49. }
  50.  
  51. #gabarit_tabmenu #tabs li:hover > a
  52. {
  53. background-image: url('./images/general/tabmenu-background-over.png');
  54. background-repeat: repeat-x;
  55. }
  56.  
  57. #gabarit_tabmenu #tabs li a:hover
  58. {
  59. text-decoration: none;
  60. background-image: url('./images/general/tabmenu-background-over.png');
  61. background-repeat: repeat-x;
  62. }
  63.  
  64. #gabarit_tabmenu #tabs li a.selected
  65. {
  66. background-image: url('./images/general/tabmenu-background-over.png');
  67. background-repeat: repeat-x;
  68. }
  69.  
  70. #gabarit_tabmenu #tabs li:hover a
  71. {
  72. color: #FFF;
  73. }
  74.  
  75. #gabarit_tabmenu #tabs li a .tooltip
  76. {
  77. display: none;
  78. }
  79.  
  80. #gabarit_tabmenu #tabs li a:hover .tooltip
  81. {
  82. display: block;
  83. position: absolute;
  84. z-index: 555;
  85. color: #25457D;
  86. padding-left: 5px;
  87. border: 1px solid #bbb;
  88. background: #ffc;
  89. font-weight: normal;
  90. font-size: 10px;
  91. width: 256px;
  92. height: 18px;
  93. line-height: 18px;
  94. top: -19px;
  95. }
  96.  
  97. #gabarit_tabmenu #tabs li.last a:hover .tooltip
  98. {
  99. left: -110px;
  100. width: 185px;
  101. }
  102.  
  103. #gabarit_tabmenu #tabs li.prelast a:hover .tooltip
  104. {
  105. width: 150px;
  106. }
  107.  
  108. *+html #gabarit_tabmenu #tabs li a:hover .tooltip
  109. {
  110. left: 4px;
  111. }
  112.  
  113. #gabarit_tabmenu #tabs li ul.submenu
  114. {
  115. display: none;
  116. }
  117.  
  118. #gabarit_tabmenu #tabs li:hover a + ul.submenu, #gabarit_tabmenu #tabs li:hover ul.submenu
  119. {
  120. display: block;
  121. position: absolute;
  122. top: 33px;
  123. width: 185px;
  124. border: 1px solid #CCCCCC;
  125. border-bottom: 2px solid #3964AF;
  126. background-color: #F9F9F9;
  127. }
  128.  
  129. #gabarit_tabmenu #tabs li:hover ul.submenu
  130. {
  131. display: block;
  132. position: absolute;
  133. top: 33px;
  134. width: 185px;
  135. border: 1px solid #CCCCCC;
  136. border-bottom: 2px solid #3964AF;
  137. background-color: #F9F9F9;
  138. }
  139.  
  140. /* IE7 Hack */
  141. *+html #gabarit_tabmenu #tabs li:hover a + ul.submenu
  142. {
  143. top: 33px;
  144. left: 4px;
  145. }
  146.  
  147. /* IE7 Hack */
  148. *+html #gabarit_tabmenu #tabs .first .submenu
  149. {
  150. left: 0;
  151. }
  152.  
  153. #gabarit_tabmenu #tabs .last .submenu
  154. {
  155. left: -105px;
  156. }
  157.  
  158. /* IE7 Hack */
  159. *+html #gabarit_tabmenu #tabs .last:hover a + ul.submenu
  160. {
  161. left: -105px;
  162. }
  163.  
  164. #gabarit_tabmenu #tabs li .submenu li
  165. {
  166. display: block;
  167. clear: both;
  168. border-bottom: 1px solid #CCCCCC;
  169. background-image: none;
  170. padding: 0;
  171. margin: 0;
  172. width: 100%;
  173. height: 20px;
  174. font-size: 0.8em;
  175. line-height: 2.1em;
  176. }
  177.  
  178. #gabarit_tabmenu #tabs li .submenu li:hover
  179. {
  180. background-image: url('./images/general/menu-item-background.png');
  181. background-repeat: repeat-x;
  182. }
  183.  
  184. #gabarit_tabmenu #tabs li .submenu .last
  185. {
  186. border-bottom: none;
  187. }
  188.  
  189. #gabarit_tabmenu #tabs li .submenu li a
  190. {
  191. color: #3964AF;
  192. white-space: nowrap;
  193. width: 175px;
  194. height: 100%;
  195. display: block;
  196. padding: 0 0.5em;
  197. margin: 0;
  198. background-image: none;
  199. text-align: left;
  200. }
  201.  
  202. #gabarit_tabmenu #tabs li .submenu li:hover a
  203. {
  204. color: #FFF;
  205. background-image: none;
  206. }
  207.  
  208. #gabarit_tabmenu #tabs li .submenu li a:hover
  209. {
  210. color: #FFF;
  211. text-decoration: none;
  212. }
  213.  
  214. /* IE6 Hack */
  215. * html #gabarit_tabmenu #tabs .item a
  216. {
  217. margin-bottom: -8px;
  218. }
  219.  
  220. #gabarit_tabmenu #tabs li .submenu li ul.submenu2
  221. {
  222. display: none;
  223. }
  224.  
  225. #gabarit_tabmenu #tabs li ul.submenu li:hover ul.submenu2
  226. {
  227. display: block;
  228. position: absolute;
  229. top: 0;
  230. left: 185px;
  231. width: 185px;
  232. border: 1px solid #CCCCCC;
  233. border-bottom: 2px solid #3964AF;
  234. background-color: #F9F9F9;
  235. }
  236.  
  237. #gabarit_tabmenu #tabs li .submenu li .submenu2 li a
  238. {
  239. color: #3964AF;
  240. font-size: 10px;
  241. }
  242.  
  243. #gabarit_tabmenu #tabs li .submenu li .submenu2 li a:hover
  244. {
  245. color: #FFF;
  246. }


Et le code HTML associé
  1. <div id="gabarit_tabmenu">
  2. <ul id="tabs">
  3. <li class="item first">
  4. <a class="selected" href="http://www.developpez.com">
  5. Accueil
  6. <span class="tooltip">
  7. Actualités IT Pro
  8. </span>
  9. </a>
  10. </li>
  11.  
  12. <li class="item">
  13. <a href="http://conception.developpez.com">
  14. Conception
  15. <span class="tooltip">
  16. Cycle de vie du logiciel
  17. </span>
  18. </a>
  19. <ul class="submenu">
  20. <li>
  21. <a href="http://conception.developpez.com">Conception</a>
  22. </li>
  23. <li>
  24. <a href="http://uml.developpez.com">UML</a>
  25. </li>
  26. <li class="last">
  27. <a href="http://merise.developpez.com">Merise</a>
  28. </li>
  29. </ul>
  30. </li>
  31. </ul>
  32. </div>
m
0
l
11 Mars 2011 11:59:30

Merci infiniment mon cher akhî Omar, vraiment je suis ravis de vous rencontrer sur ce forum de Tom's guide. J'essayerai le code dans quelque jour et je vous ferai part de la suite !ET merci encore de me donner du temps !!!
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS