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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1761935
Massanie T​ari
Special ./Needs & Dreams\.
Posté le 19-07-2008 à 14:06:29  profilanswer
 

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
mood
Publicité
Posté le 19-07-2008 à 14:06:29  profilanswer
 

n°1762144
mIRROR
Chevreuillobolchévik
Posté le 20-07-2008 à 06:06:50  profilanswer
 

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
n°1762146
mIRROR
Chevreuillobolchévik
Posté le 20-07-2008 à 06:52:15  profilanswer
 

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
n°1762182
ANViL
yep...definitely ♫
Posté le 20-07-2008 à 13:19:47  profilanswer
 

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'  ⎝⏠⏝⏠⎠  

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

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

 

Sujets relatifs
probleme d'affichage d'image en phpHTML,PHP,JAVASCRIPT et image...
Inserer une image dans PowerPoint via PHPComment permettre a un visiteur de charger une image sur mon site
probleme menu deroulant IE/firefoxderoulemnt d'image
Déplacer une image dans un objet TimageAffichage d'une image Bitmap dans un contrôle
Etat d'un element du menu 
Plus de sujets relatifs à : Menu déroulant au survol d'une image réactive


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