un menu avec un commentaire au survole

un menu avec un commentaire au survole - HTML/CSS - Programmation

Marsh Posté le 02-07-2005 à 20:22:33    

Bonjour
 
je veux crée un menu ac un commentaire au survole, voici mon code:
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  6. <title>mon site</title>
  9. <style type="text/css">
  10. <!--
  11. .header  {
  12. background: url('tr.gif') top left no-repeat;
  13. width: 792px;
  14. height: 129px;
  15.          }
  17. .menu  {
  18. margin-left: 80px;
  19. margin-top: 103px;
  20.        }
  22. .menu li {
  23. display: inline;
  24. list-style-type: none;
  25.          }
  26.      
  27. .menu a {
  28. background-color: #708090;
  29. border: 1px solid #708090;
  30. padding: 2px 5px;
  31. color: white;
  32. padding-top: 4px;
  33. padding-right: 10px;
  34. padding-left: 10px;
  35. text-decoration: none;
  36.         }
  38. .menu a:hover {
  39. border: 1px solid black ;
  40. color: #ff6600;
  41.               }
  43. .menu a span      {
  44. display: none;
  45.                   }
  47. .menu a:hover span { 
  48. display: block;
  49. position: absolute;
  50. top: 150px;
  51. left: 10px;
  52. width: 645px;     
  53. text-align: left;
  54. border-top: 1px solid gray;
  55. color: #000;
  56. }
  58.                   }
  62. -->
  63. </style>
  65. </head>
  66. <body>
  68. <div class="header">
  69.    <ul class="menu">
  70.   <li><a href="#">acceuil<span>La presentation du jeu, son resumer ...</span></a></li>
  71.  <li><a href="#">codes 1<span>Les codes 1ere partie</span></a></li>
  72.  <li><a href="#">codes 2<span>Les codes 2eme partie</span></a></li>
  73.  <li><a href="#">note du jeu<span>La note du jeu rédiger par www.jeuxvideo.com</span></a></li>
  74.  <li><a href="#">fond écran<span>télécharger tout les fonds ecrans de HALF-LIFE 2</span></a></li>
  75. </ul>
  76. </div>
  78. </body>
  79. </html>


 
et voici ce que je vois:  
 
http://img287.imageshack.us/img287/6766/bien7tj.jpg
 
jusqu'ici tout vas bien.
 
Mais après je voulais enlever la bordure noir autour du lien, j'ai donc modifié la partie CSS:
 

Code :
  1. .menu a:hover {
  2. border: 1px solid #708090 ;
  3. color: #ff6600;
  4.               }


 
et voila ce que je vois
 
http://img287.imageshack.us/img287/7417/pasbien5ks.jpg
 
 
je comprend pas pk dans mon preview je vois ça. il y a plus le commentaire au survole de lien.
 
Quelqu'un sait ce qu'il faut faire pour faire apparaitre le commentaire ?????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 02-07-2005 à 20:22:33   

Reply

Marsh Posté le 02-07-2005 à 20:32:14    

as tu testé sous firefox ?

Reply

Marsh Posté le 02-07-2005 à 23:52:56    

non mais pk sa fait ça ????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 03-07-2005 à 02:00:38    

Bonjour,
IE a vraiment des bugs tordus. J'avait déja tourné autour de ce problème sans trouver :
En répétant le background, mais différemment, ça marche. Je ne sais pas pourquoi, mais quelqu'un d'averti nous le dira peut-être ?

Code :
  1. .menu a:hover {
  2. background: #708090;
  3. color: #ff6600;
  4.               }


dans .menu a, il faut laisser

Code :
  1. background-color: #708090;

 
 
autre solution un changement non visible de la couleur de bordure :

Code :
  1. border: 1px solid #708091;


Message édité par chimelpremier le 03-07-2005 à 02:02:47
Reply

Marsh Posté le 03-07-2005 à 02:07:29    

IE ne reconnaissant que l'état de survol pour un élément <a>, le "a:hover span" ne peut pas fonctionner si, préalablement n'est pas fait explicitement mention de la déclaration de l'état de survol "a:hover".
 
En clair : "a:hover" DOIT être renseigné pour IE.
 
Le problème se résoud par exemple avec :
a:hover{display: inline;} ou a:hover{background: none;}


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-07-2005 à 02:21:48    

merci SIBELLIUS, en effet background:none n'est pas judicieux dans ce cas, mais display:inline fonctionne. .

Reply

Marsh Posté le 03-07-2005 à 19:19:14    

sibelius a écrit :

IE ne reconnaissant que l'état de survol pour un élément <a>, le "a:hover span" ne peut pas fonctionner si, préalablement n'est pas fait explicitement mention de la déclaration de l'état de survol "a:hover".
 
En clair : "a:hover" DOIT être renseigné pour IE..
 
Le problème se résoud par exemple avec :
a:hover{display: inline;} ou a:hover{background: none;}


 
 [:al zheimer]  j'ai pas tt saisi ...... (dans la phrase "préalablement n'est pas fait explicitement mention de la déclaration de l'état de survol "a:hover". sur 13 mot il y 5 mots que j'ai pas compris ..... lol  et oui, moi deja crée un menu ac un commentaire au survole c'est deja un exploi donc j'en suis pas la encore
 
si j'ai bien compris ............. non j'ai pas compris  :pt1cable:  il faut changer  quoi
dans ma source pour que ça marche ????????
 
le prob est à la ligne 39 de mon code le "solid black", marche que si  on présise une couleur en lettres: ex: yellow, red, blue, black, gray .
 
voila mon prob ciao @+++
 
 


---------------
mon site perso aller visiter
Reply

Marsh Posté le 03-07-2005 à 21:17:39    

robinpintrin a écrit :

[:al zheimer]  j'ai pas tt saisi ...... (dans la phrase "préalablement n'est pas fait explicitement mention de la déclaration de l'état de survol "a:hover". sur 13 mot il y 5 mots que j'ai pas compris ..... lol  et oui, moi deja crée un menu ac un commentaire au survole c'est deja un exploi donc j'en suis pas la encore


On va faire simple:
 
Pour appeler une sous sélection de a:hover (genre a:hover span, a:hover therese ou a:hover chocolatliegeois) Internet Explorer impose d'avoir appelé a:hover.
 
 
Donc  

a:hover span {
    // rules
}


ne fonctionne pas
mais

a:hover {
    display: inherit;
}
a:hover span {
    // rules
}


si


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-07-2005 à 13:25:55    

ok ok j'ai bien compris mais dans  
 
a:hover {
display: inherit;
}
 
on met quoi à la place de inherite ????
pk ??????


---------------
mon site perso aller visiter
Reply

Marsh Posté le 04-07-2005 à 13:32:08    

Pourquoi veux-tu mettre autre chose que inherit ?


Message édité par sibelius le 04-07-2005 à 13:32:23

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 04-07-2005 à 13:32:08   

Reply

Marsh Posté le 04-07-2005 à 13:43:40    

robinpintrin a écrit :

ok ok j'ai bien compris mais dans  
 
a:hover {
display: inherit;
}
 
on met quoi à la place de inherite ????
pk ??????


T'as quoi contre inherit? [:kiki]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-07-2005 à 15:45:52    

Dans ton cas c'est pas a:hover
pourquoi n'essais- tu pas le code que j'ai proposé plus haut ?
Ligne 38, tu mets ça à la place :
 

Code :
  1. .menu a:hover { 
  2. background: #708090;
  3. color: #ff6600; 
  4.               }


ça a le mérite de fonctionner sur IE5 :sol:


Message édité par chimelpremier le 04-07-2005 à 16:18:36
Reply

Marsh Posté le 05-07-2005 à 12:04:36    

enorme merci,ça marche parfaitement .... :):):) ciao @++++


---------------
mon site perso aller visiter
Reply

Sujets relatifs:

Leave a Replay

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