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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  un menu avec un commentaire au survole

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

un menu avec un commentaire au survole

n°1138340
robinpintr​in
Posté le 02-07-2005 à 20:22:33  profilanswer
 

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
mood
Publicité
Posté le 02-07-2005 à 20:22:33  profilanswer
 

n°1138348
gatsusat
Posté le 02-07-2005 à 20:32:14  profilanswer
 

as tu testé sous firefox ?

n°1138439
robinpintr​in
Posté le 02-07-2005 à 23:52:56  profilanswer
 

non mais pk sa fait ça ????


---------------
mon site perso aller visiter
n°1138466
chimelprem​ier
Posté le 03-07-2005 à 02:00:38  profilanswer
 

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
n°1138471
sibelius
Vous êtes sûr ?
Posté le 03-07-2005 à 02:07:29  profilanswer
 

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
n°1138472
chimelprem​ier
Posté le 03-07-2005 à 02:21:48  profilanswer
 

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

n°1138726
robinpintr​in
Posté le 03-07-2005 à 19:19:14  profilanswer
 

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
n°1138806
masklinn
í dag viðrar vel til loftárása
Posté le 03-07-2005 à 21:17:39  profilanswer
 

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
n°1139295
robinpintr​in
Posté le 04-07-2005 à 13:25:55  profilanswer
 

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
n°1139302
sibelius
Vous êtes sûr ?
Posté le 04-07-2005 à 13:32:08  profilanswer
 

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
mood
Publicité
Posté le 04-07-2005 à 13:32:08  profilanswer
 

n°1139314
masklinn
í dag viðrar vel til loftárása
Posté le 04-07-2005 à 13:43:40  profilanswer
 

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
n°1139486
chimelprem​ier
Posté le 04-07-2005 à 15:45:52  profilanswer
 

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
n°1140246
robinpintr​in
Posté le 05-07-2005 à 12:04:36  profilanswer
 

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


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

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

  un menu avec un commentaire au survole

 

Sujets relatifs
Php et menu <select mulitple>Menu vertical déroulant hs sous firefox
menu horizontal dans un header.[C#] masquer / afficher le menu (MainMenu)
HELP, Menu déroulant dynamique avec PHP [RESOLU]Menu vertical.
Ajout d'une barre de menu dans une boite de dialogueMenu déroulant CSS avec une image sur 1er bouton
Problème chargement menu en .swf sur site en php[RESOLU] Personnaliser la barre de menu Access
Plus de sujets relatifs à : un menu avec un commentaire au survole

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.054 secondes

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