Bonjour a tous ,
j'ai un souci avec un menu et je ne sais comment le résoudre,
j'ai crée un menu qui se compose du titre, d'un élement qui tourne , et d'un image en font d'image qui bouge aussi.
voici la page en question :
http://keokaz.fr/transmission-mecanique/
j'ai 3 titres de menu, sous ie7/8 et firefox les menus et l'animation est correcte.
par contre sous chrome ou opéra j'ai un os sur le premier titre et l'élément de fond d'image qui bouge est complétement décalé
je donne le css
voici le html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 .espace /*espace entre les textes */ { display: block; } #sidebar ul { position: relative; padding: 0; margin: 0; list-style: none; } #sidebar ul li.cat { display: block; margin:0; padding: 0; background: url('image/fleche.png') no-repeat; /* overflow:hidden;/*supprimer le petite espace sous l'image*/ } #sidebar ul li a img.tourne /*imag de la route*/ { float: left; padding:0; margin:0; } #sidebar ul li a.text_categorie/*texte de la categorie */ { text-decoration: none; padding:0; margin: 0; display: block; position: relative; top:-55px; height:50px; text-transform: uppercase; font-size: 14px; text-align: right; width:270px; background: url('image/rouleau.png') no-repeat; color:#012508; font-weight: bolder; font-style: oblique; }
je ne sais pas comment m'y prendre pour arrivé a correctement position le premier titre ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74 <ul> <li class="cat"> <a> <img class="tourne" src="<?php echo bloginfo('home'); ?>/wp-content/themes/modele/image/tourne.png"/> </a> <a class="text_categorie" href="<?php echo bloginfo('url'); ?>/?cat=10" title="Voir tous les articles class�s dans Bandes de transport"> probleme titre avec chrome </a> </li> <li> <div class="espace"> </div> </li> <li class="cat"> <img class="tourne" src="<?php echo bloginfo('home'); ?>/wp-content/themes/modele/image/tourne.png"/> <a class="text_categorie" href="<?php echo bloginfo('url'); ?>/?cat=11" title="Voir tous les articles class�s dans Bandes de transport"> titre 2 </a> </li> <li> <div class="espace"> </div> </li> <li class="cat"> <img class="tourne" src="<?php echo bloginfo('home'); ?>/wp-content/themes/modele/image/tourne.png"/> <a class="text_categorie" href="<?php echo bloginfo('url'); ?>/?cat=12" title="Voir tous les articles class�s dans Bandes de transport"> titre3 </a> </li> </ul> <script type="text/javascript"> $(document).ready(function () { $('#sidebar li').css({backgroundPosition: '30px 0px'}); /* initialisation de la postion de depart*/ $('.tourne').rotate({ maxAngle: 90, minAngle: -55 }); $('#sidebar li').hover(function () { $(this).find('.tourne').rotateAnimation(85); }, function () { $(this).find('.tourne').rotateAnimation(-35); }); $('#sidebar li') .mouseenter(function(){ $(this) .animate({backgroundPosition: '300px 0px'},2500) ; }); $('#sidebar li') .mouseleave(function(){ $(this) .animate({backgroundPosition: '20px 0px'},2000) ; }); }); </script>
merci d'avance pour vos aident.
Partager