curseur en flèche sur un lien (au lieu de main)

curseur en flèche sur un lien (au lieu de main) - HTML/CSS - Programmation

Marsh Posté le 24-10-2004 à 02:02:13    

Mon titre est pas hyper clair, mais voilà l'idée:
 
j'ai dû faire une fausse manip dans ma css ou un truc comme ça, quand on passe la souris sur le menu de mon site, le curseur est en forme de flèche (curseur par défaut) ou en forme de | quand on passe au dessus du texte du menu.
 
voyez par vous-même:
 
http://www.teeoffevent.com/
 
Une remède docteur ?  
la CSS est là:
http://www.teeoffevent.com/css/page_general.css
 
et le bout de CSS correspondant au menu est là :

Code :
  1. #menu
  2. {
  3.         height: auto;
  4.         width: 160px;
  5.         visibility: visible;
  6.         position: absolute;
  7.         left: 37px;
  8.         top: 230px;
  9.         cursor: pointer;
  10. }
  11.         #menu .menu_haut
  12.         {
  13.                 display: block;
  14.                 overflow: hidden;
  15.                 width: 160px;
  16.                 height: 29px;
  17.                 background: url(../images/gfx_structure/mnu2/haut.jpg);
  18.                 border-style:solid;
  19.                 border-width: 0px;
  20.                 border-color: #000000;
  21.                 font-weight: bold;
  22.                 font-family: Arial, Helvetica, sans-serif;
  23.                 font-style: normal;
  24.                 text-decoration: none;
  25.                 font-align: center;
  26.                 color: #000000;
  27.                 font-size: 12px;
  28.         }
  29.                 #menu .menu_haut a:hover
  30.                 {
  31.                         background: url(../images/gfx_structure/mnu11/haut.jpg);
  32.                         color: #ffffff;
  33.                 }
  34.                 #menu .menu_haut .text
  35.                 {
  36.                         height: auto;
  37.                         width: 130px;
  38.                         visibility: visible;
  39.                         position: absolute;
  40.                         left: 19px;
  41.                         top: 12px;
  42.                         text-align: center;
  43.                 }
  44.         #menu .menu_milieu
  45.         {
  46.                 display: block;
  47.                 overflow: hidden;
  48.                 width: 160px;
  49.                 height: 23px;
  50.                 background: url(../images/gfx_structure/mnu2/milieu.jpg);
  51.                 border-style:solid;
  52.                 border-width: 0px;
  53.                 border-color: #000000;
  54.                 font-weight: bold;
  55.                 font-family: Arial, Helvetica, sans-serif;
  56.                 font-style: normal;
  57.                 text-decoration: none;
  58.                 font-align: center;
  59.                 color: #000000;
  60.                 font-size: 12px;
  61.         }
  62.                 #menu .menu_milieu a:hover
  63.                 {
  64.                         background: url(../images/gfx_structure/mnu11/milieu.jpg);
  65.                         color: #ffffff;
  66.                 }
  67.                 #menu .menu_milieu .text
  68.                 {
  69.                         height: auto;
  70.                         width: 130px;
  71.                         visibility: visible;
  72.                         position: absolute;
  73.                         left: 19px;
  74.                         top: 6px;
  75.                         text-align: center;
  76.                 }
  77.         #menu .menu_bas
  78.         {
  79.                 display: block;
  80.                 overflow: hidden;
  81.                 width: 160px;
  82.                 height: 29px;
  83.                 background: url(../images/gfx_structure/mnu2/bas.jpg);
  84.                 border-style:solid;
  85.                 border-width: 0px;
  86.                 border-color: #000000;
  87.                 font-weight: bold;
  88.                 font-family: Arial, Helvetica, sans-serif;
  89.                 font-style: normal;
  90.                 text-decoration: none;
  91.                 font-align: center;
  92.                 color: #000000;
  93.                 font-size: 12px;
  94.         }
  95.                 #menu .menu_bas a:hover
  96.                 {
  97.                         background: url(../images/gfx_structure/mnu11/bas.jpg);
  98.                         color: #ffffff;
  99.                 }
  100.                 #menu .menu_bas .text
  101.                 {
  102.                         height: auto;
  103.                         width: 130px;
  104.                         visibility: visible;
  105.                         position: absolute;
  106.                         left: 19px;
  107.                         top: 4px;
  108.                         text-align: center;
  109.                 }


Message édité par effisk le 24-10-2004 à 02:02:32

---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 24-10-2004 à 02:02:13   

Reply

Marsh Posté le 24-10-2004 à 02:04:06    

Désolé pour la longueur  :sweat:  
 
Bon sinon je sais que la CSS foire avec FireFox, y'a des chances que ça passe pas non plus avec Netscape et compagnie, j'ai vérifié que pour IE pour l'instant
 [:mad_oc@school]


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 24-10-2004 à 09:27:01    

effectivement c'est IE exclusif  :o  sinon les liens font bien apparaitre la main !

Reply

Marsh Posté le 24-10-2004 à 10:07:18    

Utilises une (des) liste(s) et non des divs pour faire ton menu
 
essaies d'enlever "cursor: pointer;" de ton CSS et regarde ce que ca donne


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

Marsh Posté le 24-10-2004 à 12:49:06    

ah oui j'avais oublié ce cursor pointer. J'essaye tout de suite.
 
merci.
 
et sinon, c'est quoi une (des) liste(s) ?


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 24-10-2004 à 12:51:41    

change rien curseur pointer.


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 24-10-2004 à 12:56:33    

ben une liste c'est

Code :
  1. <ul id='mainmenu'>
  2.     <ul id='sousmenu1'>
  3.         <li>item_menu_11</li>
  4.         <li>item_menu_12</li>
  5.         <li>item_menu_13</li>
  6.     </ul>
  7.     <ul id='sousmenu2>
  8.         <li>item_menu_21</li>
  9.         <li>item_menu_22</li>
  10.     </ul>
  11.     <ul id='sousmenu3'>
  12.         <li>item_menu_31</li>
  13.         <li>item_menu_32</li>
  14.         <li>item_menu_33</li>
  15.     </ul>
  16. </ul>


 
Avantages:
1- le source est plus clair
2- ca se CSSise facilement
3- ca s'affiche très bien même avec un navigateur texte (type Lynx), contrairement aux menus 'fait main' a coup de divs et spans (ou pire, br)
4- le menu est contruit très logiquement (par menus/sous menus)


Message édité par masklinn le 24-10-2004 à 12:57:02

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

Marsh Posté le 24-10-2004 à 13:24:46    

ok merci.
 
En fait j'ai pas de sous menus, les 'haut' 'milieu' et 'bas' c'est parce que l'option du haut et celle du bas du menu ont des backgrounds différents des options du milieu (les angles sont arrondis en haut et en bas).
 
Donc j'ai un 'haut', un 'bas', et plusieurs 'milieu'.


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 24-10-2004 à 13:46:36    

les sous menu c'est pour l'exemple (histoire de montrer que tu peux faire des menus multiniveaux), t'es pas obligé d'en mettre -_-


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

Marsh Posté le 24-10-2004 à 13:56:49    

Masklinn a écrit :

les sous menu c'est pour l'exemple (histoire de montrer que tu peux faire des menus multiniveaux), t'es pas obligé d'en mettre -_-

pas la peine de faire cette tête, j'avais compris.  :)  
Bon j'ai fait des divs, les <ul> ça sera pour le prochain site, j'ai la flemme de me retaper ce morceau  :sweat:


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 24-10-2004 à 13:56:49   

Reply

Marsh Posté le 28-10-2004 à 17:20:36    

ok, j'ai mis des cursor: hand; ça passe. Merci.


---------------
London Box Office: Comédie Musicale Londres
Reply

Sujets relatifs:

Leave a Replay

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