Menu déroulant au survol d'une image réactive

Menu déroulant au survol d'une image réactive - HTML/CSS - Programmation

Marsh Posté le 19-07-2008 à 14:06:29    

Bonjour à tous,
 
Voici le site sur lequel je travaille : http://www.laboucherie.com/index.html
 
Première chose : soyez indulgents, je débute :lol:  
 
Deuxième chose : j'utilise Firefox et ça marche à peu près comme je veux (à part le fait que les liens ne changent pas de couleur quand le curseur passe dessus alors que j'ai fait en sorte que ça soit le cas dans ma feuille de style o_O), par contre ça ne passe pas du tout sous IE (j'utilise IE 7)... et j'ai du mal à arranger ça toute seule :/ Apparemment il n'apprécie pas du tout le mélange "images réactives - menu déroulant".
 
Est-ce que quelqu'un a une idée pour résoudre mon problème ?
 
(Pour le code source, il suffit que vous l'affichiez directement depuis la page Web)
 
Merci beaucoup d'avance !  :)
 
Je suis aussi ouverte à toute critique constructive ;)


Message édité par Massanie Tari le 19-07-2008 à 14:09:14
Reply

Marsh Posté le 19-07-2008 à 14:06:29   

Reply

Marsh Posté le 20-07-2008 à 06:06:50    

bon bah en effet ton code...c est une vraie boucherie :D

 

pour commencer chez moi les liens changent bien de couleur sur ff
je crois que ton menu deroulant marche sur ff parce que tu as du bol
http://img529.imageshack.us/img529/9944/screenfh3.png
tu vois le petit rectangle jaune sur la gauche ?
c est la position et la taille de la zone reactive de "la lilbrairie"
normalement ca devrait etre un grand rectangle bleu au bon endroit
si le rectangle etait bleu ton menu deroulant marcherait sur ie...en passant la souris sur le rectangle bleu :D

 

deja je comprends pas pourquoi tu decoupes tes images si c est pour utiliser une map et en plus comme le script du menu deroulant n est pas de toi ca va etre difficile de t aider

 

edit:bon  je te prépare un fix...Ca pourra pas etre pire


Message édité par mIRROR le 20-07-2008 à 06:09:38

---------------
« 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 20-07-2008 à 06:52:15    

Code :
  1. @charset "windows-1252";     
  2.  
  3.  
  4. body
  5. {
  6.     width: 800px;
  7.     background-color: #E8DFD2; /* Couleur de fond */   
  8.     margin-left: auto;
  9.     margin-right: auto;  
  10.     padding: 0px; 
  11.     font: 80% georgia, arial, sans-serif;      
  12.     color: #fff;
  13.     position: relative;
  14. }                 
  15.  
  16.  
  17. /* L'en-tête */
  18. #en_tete
  19. {
  20.     width: 799px;
  21.     height: 317px;
  22.     background-image: url('images/banniere.jpg');
  23.     background-repeat: no-repeat;    
  24.     margin-left: +0.075em;
  25. }  
  26.  
  27.  
  28. /* Bouton -La Boucherie- */
  29. #logo
  30. {
  31.     display: block;
  32.     position: absolute;
  33.     top: 130px;
  34.     left: 130px;
  35.     width: 240px;
  36.     height: 125px;
  37. }       
  38.  
  39.  
  40. /* Le menu */
  41. #menu
  42. {
  43.     height: 167px;     
  44. }        
  45.  
  46. #zone1
  47. {
  48.     position: absolute;
  49.     top: 10px;
  50.     left: 25px;
  51.     width: 80px;
  52.     height: 60px;
  53. }
  54.  
  55. #zone2
  56. {
  57.     position: absolute;
  58.     top: 25px;
  59.     left: 195px;
  60.     width: 90px;
  61.     height: 40px; 
  62. }  
  63.  
  64. #zone3
  65. {
  66.     position: absolute;
  67.     top: 25px;
  68.     left: 370px;
  69.     width: 70px;
  70.     height: 60px;
  71. }
  72.  
  73. #zone4
  74. {
  75.     position: absolute;
  76.     top: 25px;
  77.     left: 490px;
  78.     width: 70px;
  79.     height: 35px;
  80. }
  81.     
  82.  
  83. #menu_deroulant
  84. {
  85.     position: absolute; 
  86.     top: 310px; 
  87.     z-index: 1;
  88.     left: 50%;
  89.     margin-left: -25em;
  90.     //width:100%;
  91. }       
  92.  
  93. hr
  94. {
  95.     clear : both;
  96.     visibility : hidden;
  97. }
  98.  
  99.  
  100. dl, dt, dd, ul, li
  101. {
  102.     padding: 0; //margin:0;
  103.     list-style-type: none; 
  104. }    
  105.  
  106. #menu_deroulant dl
  107. {
  108.     float: left;
  109.     margin-left: -2.45em;
  110.     padding: 0;
  111.     border: 0;
  112.     width: 15em;     
  113.     text-align: center;
  114.     //background:white;
  115.     filter:alpha(opacity=0);
  116. }            
  117.  
  118. #menu_deroulant dt
  119. {
  120.     cursor: pointer;
  121.     text-align: center;
  122.     font-weight: bold;
  123.     border: 0 none;
  124.     margin: 7px;  
  125.     //height:167px;
  126.     //width:100px;
  127. }           
  128.  
  129.    
  130. #menu_deroulant dd
  131. {
  132.     display: none;
  133.     border: 1px solid black;
  134.     position: absolute;
  135.     background-color: #ccc;    
  136.     bottom: 1.5em;
  137.     width: 20%;
  138.     //width:100px;
  139.     //bottom:167px;
  140. }       
  141.  
  142. #menu_deroulant li
  143. {
  144.     text-align: center;
  145.     background: #7D0000; 
  146.     margin: 0;
  147.     padding: 3px;
  148.     border: 0;
  149.     float: none;
  150. }                         
  151.  
  152.  
  153. #menu_deroulant li a, #menu_deroulant dt a
  154. {  
  155.     text-decoration: none;
  156.     display: block;
  157.     border: 0 none;
  158.     height: 100%;
  159.     color: #fff; 
  160. }  
  161.  
  162. #menu_deroulant li a:hover
  163. {
  164.     background: #E8DFD2; 
  165.     color: #7D0000;  
  166. }              
  167.  
  168. #menu_deroulant li a:visited
  169. {
  170.     color: #fff;   
  171. }
  172.  
  173. #menuDeroulant li a:active
  174. {
  175.     background-color: #5F879D;
  176. }      
  177.  
  178. img
  179. {
  180.     border: 0 none;    
  181. } 
  182.         
  183.  
  184.  
  185. /* Le corps */
  186. #corps
  187. {     
  188.     width: 800px;
  189.     background-image: url('images/corps.jpg');
  190.     background-repeat: repeat-y;
  191. }
  192.  
  193.  
  194. /* Le pied-de-page */
  195. #pied_de_page
  196. {     
  197.     width: 800px;  
  198.     height: 240px;
  199.     background-image: url('images/pied_de_page.jpg');
  200.     background-repeat: no-repeat;
  201. }


 
pas terrible mais difficile de faire mieux :/


---------------
« 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 20-07-2008 à 13:19:47    

Le JS est à revoir également :
 
- séparation de la forme / contenu
- utilisation des events & du DOM (et pas ces utilisations dépréciées genre onload / onmouseover au sein de la page)
 
Sinon si j'étais toi j'oublierais la compatibilité IE7 étant donné que ce navigateurs ne respecte quasiment pas les normes W3C (l'idéal étant d'abord d'avoir un rendu propre sur les navigateurs à la pointe du respect des normes tels que FF / Opera / Safari....) qui à revenir mettre des hack & tricks IE au sein du code par la suite.
 
P.S: les balises monolithiques genre <br /> ne sont pas non plus nécessaire si la mise en page css est bien réalisée


Message édité par ANViL le 20-07-2008 à 13:22:08

---------------
Easy Ridin'  ⎝⏠⏝⏠⎠  
Reply

Sujets relatifs:

Leave a Replay

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