Bug : Mon contenu actionne onmouseout :(

Version imprimable

26/12/2011, 14h50
westernz

Bug : Mon contenu actionne onmouseout :(

Bonjour,

J'ai un code sympa pour un menu qui bouge en mouseover/out.
http://www.an16test.org/viewforum.ph...k=0&fap=0&ap=1

Mais il me reste un problème que je n'arrive pas annihiler.
Tant que je reste dans la div, là où il n'y a aucun contenu ca marche nikel.
Mais si je passe la souris sur un lien ou sur une des bordures de célulles de la table ca action onmouseover.

Comment faire pour que onmouseover ne s'active que si on quitte la div entière ?

Bonne journée
26/12/2011, 15h09
arno15

Salut,

Tu propages tes évènements à tous les éléments présents dans ton div ?
26/12/2011, 15h18
westernz

Je ne comprend pas trop la question.

Voici la partie du code correspondante :

Code:

<div id="div_menu" class='bulle_deco menu_header' style="top:-10px; left:-440px; width:500px; height:120px; padding:10px; border:solid; border-width:1; " onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu('out',1)">

Et de dans donc je colle tous mon contenu.
Un tableau avec des liens, des boutons... comme un menu
26/12/2011, 17h36
arno15
En fait je voulais savoir si les élements qui sont contenus dans ton div ont aussi quelque chose comme :

Code:

onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu('out',1)"

Mais j'ai ma réponse. :mouarf:

A mon avis le plus simple est d'utilisé une librairie comme JQuery
qui te permettra faire en sorte que le survol d’éléments interne à ton div ne provoque pas les évènements onmouseout/onmouseover. Par exemple :
Code:

1 2 3 4 5 $('#test').hover(function() { // le curseur passe sur l'élément },function() { // le curseur sort de l'élément });
Sinon, il faut que tu modifie le code de la fonction "menu" pour détecter que la souris est entré ou sortie d'un élément interne à ton div et donc qu'aucune action est requise
26/12/2011, 17h50
westernz

C'est aussi ce que m'a dit un ami. Mais il n'était pas certain qu'il n'y ai pas d'autre solution.

Est-ce que Jquery va me demander de refaire tout mes codes ?
Je viens de passer des heures à réussir ce fichu menu qui bouge (j'en suis a minimiser le code).

Il va me falloir quelques basse, celles nécessaire à l'accomplissement de ce que j cherche à faire ;)

Tu aurait un lien ?

EDIT :
Je suppose que je dois commencer par ecrire ca :
<script src="http://code.jquery.com/jquery-latest.js"></script>

J'ai essayé de modifier un script déjà existant et le problème est le même
http://www.an16test.org/test.php

Quand on passe la souris sur un element ca joute +1 au compte :(
Tu peux editer la page, il n'y a que le script dedans

Bonne journée

Citation:

Envoyé par westernz

Est-ce que Jquery va me demander de refaire tout mes codes ?

Oui. Arno a fait cette erreur que beaucoup de membres du forum font depuis quelques temps : proposer l'installation de la lib jQuery complète pour « simplifier » le codage d'une seule situation particulière. Ça revient à utiliser un bazooka pour tuer une mouche...

En JavaScript pur, je te conseille fortement d'utiliser les gestionnaires d'évènements. Tu dois pour cela laisser tomber les attributs HTML onmouseover et ses semblables. Un petit exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="carre"></div> <style> #carre { width:100px; height: 100px; background: green } </style> <script> var $carre = document.getElementById('carre'); $carre.addEventListener('mouseover', function( e ) { this.style.background = 'red'; }, false); $carre.addEventListener('mouseout', function( e ) { this.style.background = ''; }, false); </script>
Comme tu le vois, avec cette méthode, le code HTML n'est pas « pollué » par du script.
Ce qu'on appelle les gestionnaires d'évènements, ce sont ces fonctions anonymes passées en argument à la méthode addEventListener. Elles ont en paramètre un objet Event que j'ai appellé e ici (mais je ne l'utilise pas dans cet exemple). Cet objet possède des propriétés importantes, notamment la propriété relatedTarget qui te permet de savoir sur quel élément le curseur était juste avant que l'évènement mouseover se produise.

Il te suffit de vérifier, par un bref parcours du DOM, si le relatedTarget est contenu par l'élément que tu surveilles, auquel cas ton gestionnaire ne fait rien. C'est ni plus ni moins ce que fait jQuery sous le capot.

Un point important : Microsoft rend les choses compliquées (comme d'hab quoi) en ayant sa propre syntaxe de gestionnaires d'évènements. Je te conseille de faire des recherches à propos de attachEvent, ainsi que les propriétés fromElement et toElement de l'objet Event sous MSIE. Si tu es à l'aise en anglais, le site Quirksmode est une très bonne source. Par exemple : http://www.quirksmode.org/js/events_...#relatedtarget

Bonne lecture ;)

26/12/2011, 21h20
westernz

Je sen venir le code compliqué.
en plus si IE me fait créer des variation sur les variable ca va me prendre un max de temps. Surtout que je ne suis pas un bon codeur.

Certes c'est agréable d'en apprendre plus mais faut aussi que j'avance.
Je me tate encore pour m'y coller ou non.
Tu es au moins certain que ce sera possible ?

Merci pour les liens et infos.
26/12/2011, 21h31
westernz

Je tente de résumer ce que je dois faire pour y arriver.

1/
Je conserve ma div et je la déclare comme variable
var $ma_div = document.getElementById('ma_div');

2/
$ma_div.addEventListener('mouseover', function( ma_func )
{
this.style.background = 'red';
}, false);

2a/
'mouseover' c'est le nom de la fonction d'origine qui va detecter si la souris est dessus .?

2b/
( ma_func ) ce sera le nom de l'évenement à lancer ?
Qui remplacera onmouseover ?

2c/
{ this.style.background = 'red'; } Je met dans les crochets ce que je eux que ca fasse. Donc je peux mancer ma fonction déjà crée ? { menu('over',1) }

2d/ flase); Je suppose que ca veux que ca fait rien si c'est pas 'mouseover'

J'ai juste ?
Je suppose que non lol
26/12/2011, 21h31
NoSmoking

Bonsoir,
l'appel à menu('out',1); ne devrait être appelé qu'UNE fois dans ta page, sur la DIV conteneur div_menu et rien d'autre.
26/12/2011, 21h42
westernz

Ce sera le cas.
Quand on passe la souris dessus.

Tu peux regarder ici : en haut de la page à gauche.
J'aime beaucoup mon menu même s'il est vide mais quand passe sur la table (en haut de la div, pas les grande en arrière plan, que je vais enlever de ce pas)...
http://www.an16test.org/viewforum.ph...k=0&fap=0&ap=1

C'est le seul souci que j'ai à régler.
Seule cette div aura cette fonction.
Seule mouseout déconne, car en mouseover ca laisse tel que c'est dajà, ca lance la fonction mais la termine dessuite car déjà accomplie..
Au besoin j'en ferai une autre pour une autre div.

Je suis pret a apprendre mais je suis pas très doué et je sature, j'ai déjà passé presque 20h sur ce bug.
27/12/2011, 16h08
Watilin
Regarde sur cette page : http://api.jquery.com/mouseenter/
Vers le milieu de la page il y a un exemple (les deux blocs jaunes) qui illustre bien la différence entre l'évènement standard mouseover et l'évènement jQuery mouseenter, que tu cherches à reproduire.

Sinon, quelques explication à propos de addEventListener : cette fonction permet, comme je te l'ai montré, de surveiller un évènement. Elle prend 3 paramètres : une chaîne, une fonction et un booléen.
- La chaîne est le nom de l'évènement ; dans notre cas c'est mouseover.
- La fonction est ce qui doit être exécuté lorsque l'évènement est déclenché. Elle est appelée par le navigateur et reçoit comme argument un objet Event.
- Le booléen indique si on doit utiliser la capture ou pas. C'est une notion un peu avancée. Ça aurait pu être pratique si tous les navigateurs implémentaient cette fonctionnalité, mais en général on préfère ne pas l'utiliser, alors on met false.
Sous MSIE, la fonction s'appelle attachEvent et il y a deux différences : d'abord, les noms d'évènements commencent par « on », et ensuite, il ne propose pas d'utiliser la capture.
Par conséquent, on trouve souvent sur le Web une fonction qui permet d'assurer la compatibilité de son script sous la plupart des navigateurs et qui ressemble, avec peu de variations, à ceci :
Code:

1 2 3 4 5 6 7 function addListener( elem, event, func ) { if (elem.addEventListener) { elem.addEventListener(event, func, false); } else { elem.attachEvent('on' + event, func); } }
On peut donc surveiller un évènement comme ceci :
Code:

1 2 3 addListener($ma_div, 'mouseover', function( e ) { // ... ton code ici });
En résumé, tu avais bon en 1/, 2a/ et 2c/ :mrgreen:
Pour 2c/, en effet, tu peux réutiliser ta fonction menu mais il te faudra quand même la modifier si tu veux pouvoir utiliser les informations de l'objet Event comme je t'ai expliqué.
Pour 2b/, je pense que ce qui te met dedans, c'est le fait que mes fonctions n'ont pas de nom (ce sont des fonctions anonymes), du coup tu as confondu le nom du paramètre (e) avec le nom de la fonction. Il est tout à fait possible de nommer la fonction :

Code:

addListener($ma_div, 'mouseover', function bidule( e ) { ... });

ou encore de la déclarer à l'avance pour pouvoir l'utiliser plusieurs fois :
Code:

1 2 3 4 function bidule( e ) { ... } addListener($ma_div, 'mouseover', bidule);
Note que je ne mets pas de parenthèses quand je passe bidule à la fonction addListener : je veux que la fonction soit référencée, et pas appelée directement.

Voilà, j'espère que ça lève le voile sur certaines zones d'ombres dans ton esprit ;)

PS : Ce n'est que mon point de vue personnel, mais je trouve que ton effet de rebond est un peu maladroit :/ J'ai moi-même fait pas mal d'essais et de recherches il y a quelques temps pour parvenir à un effet qui me convienne, et j'ai découvert que ça porte un nom : easing. D'après les rumeurs, le terme a été introduit par Adobe pour son Flash Player, mais il a été popularisé par la communauté jQuery. En tout cas,fais des recherches à propos de l'easing sur le Web, ça ne peut que t'enrichir ;)
27/12/2011, 16h42
westernz

Merci pour la lecteur.
Je m'y penche dans une bonne heure.
Je sature sur les heures passées.

Donc mon but si j'ai bien compris va être de reproduire la fonction mouseentre de Jquery pour n'avoir qu'elle en ram au lieu de stocker tout jquery juste pour une seul function ?

Au passage je vais aussi apprendre comment mieux manipuler les sources JS non ? S'il s'agit bien de cela. Ca m’intéresse bien car je suis souvent bloqué par des bug et impossibilité d'avoir ce que je veux.

Bonne journée
A bientôt quand j'aurais tout lu :)
27/12/2011, 19h23
westernz

J'ai essay é a nouveau Jquery.
J'ai l'impression que ce code est fait pour être utilisé avec 2 div minimum.
Je n'arrive pas a l'employer pour une seule div qui contient une table.
Sachant que c'est la 1ere et seule div qui doit bouger.

Même en gardant les 2 div je n'arrive pas a faire bouge la 1ere (out).

J'arrive a mettre div.width(500) au lieu de du texte qui change mais je n'arrive pas à lancer une function JS depuis Jquery.

Je n'y comprend rien.

Je passe a tes écrits en Français après mangé.
27/12/2011, 21h54
Auteur

bonjour westernz,

je t'invite à lire ces discussions sur le sujet :
http://www.developpez.net/forums/d64...t-div-boutons/

http://www.developpez.net/forums/d68...oppropagation/

http://www.developpez.net/forums/d59...nts-imbriques/

Tu verras d'autres discussions sur ce sujet avec les mots-clefs cancelbubble et stoppropagation.
27/12/2011, 22h08
NoSmoking

sans oublier Présentation des évènements du DOM
27/12/2011, 23h12
NoSmoking

dans ton code on trouve cette ligne

Code:

var bound_next = action; // ne pas toucher

or action est définie nulle part ce qui entraine un "malaise" sur ton code.

En reprenant ton premier code, difficile de suivre attendu que cela change vite, le script se déroule correctement en supprimant cette erreur.

On trouve également des commentaires du type

Code:



qui sont des commentaires HTML mais en aucun cas javascript.

Il y a d'autres erreurs qu'il serait bon que tu supprimes avant de pouvoir bien appréhender ce qui ce passe.
28/12/2011, 00h04
westernz

Apres quelques heures de sommeil ...

Pour répondre à NoSmoking :
J'ai corrigé mes erreurs de commentaire.
La var action est définie dans : function menu(action,user_action)

Mais j'ai remarque qu'en fait quand on passe sur un élément, le lien se relance, tant le on mouse out que over. Dommage qu'i n'y ai pas de "if ( mousein() )".

Je vais lire le reste et persévéré car je veux se menu mobile au survol.

nb, le menu est de nouveau actif sur ma page de test. Mais risque de bugger encore vu que je vais tester dessus souvent (des que ca marche +/- dans un fichier sans les polutions de phpbb).

Pour répondre à Watilin
Tu trouve mon menu bof sur le visuel ou sur le code. Je voulais quelque chose de plus naturel. les mouvements habituels ne le sont pas du tout. C'est comme passer d'un page plate à une page avec ombres et des effets de profondeur. Là mon menu a une inertie. Certes c'est pas le plus beau rebond que je pourrais faire mais je suis pas doué :(

Sinon coté codage, oui c'est un codage de noob lol

J'ai mieux compris le code que tu énonce et dois quand même encore relire.

Donc mon but va être de vérifier si mon souris est toujours mouseout avant d'exécuter la function d'un eventuel mouseout. Ca peut marché ça ? JE parle de vérifier si la souris est dessus. Car en JS on ne peut que déclencher depuis un mouseover, me semble-t-il qu'on ne ne peut pas vérifier à tout moment si le mouseover est true ou flase.

Peut on mélanger JS et ce type de code ?
C'est à dire mettre de ce type code dans du JS ou l'inverse.
Je sais déjà que tu m'a dit que je pourrai lancer ma function depuis ce code. donc un peu.

Et ca s'appel comment ce type de code ? "gestionnaires d'évènements" il n'y a pas d'abrégé ?

Merci
28/12/2011, 00h14
NoSmoking
Citation:

Envoyé par westernz

La var action est définie dans : function menu(action,user_action)

donc non définie au moment où elle est vue dans la partie script

le code suivant est incorrect
Code:

1 2 3 4 var test = variable; // typeof variable => undefined function fctTest( variable){ // variable est un paramètre test = variable; }
28/12/2011, 00h49
westernz

Ok donc faut la redéfinir une fois dans la funtion.
C'est noté.
Je suppose que ca bug sur certain navigateur, car sur firefox ca marche.
Des truc qui sont censé par marcher qui marchent et des truc qui sont censé marcher qui ne marchent pas... Le JS est un animal compliqué.

EDIT :
et je viens de comprendre
Oui j'ai pas déclaré comme variable vide avant
var truc = '';
Je ne sais pas pourquoi je faisait une exception pour les variable inclues au lancement d'une functon.

J'ai corrigé presque partout dans a page (j'ai d'autres page a nettoyer... beaucoup d'autres lol
28/12/2011, 01h36
westernz
Houla la !

La vérité était ailleurs !

lol mais pas lol, car c'est lourd.
C'est typique de moi ça.

J'ai testé une pseudo solution efficace et simple issue des lien de "Auteur" (merci)

J'ai séparé le mouseout pour lui coller un delai :
Code:

1 2 3 4 function menu_out(action,user_action) { t = setTimeout("menu('action',user_action)",1000); }
En principe ce delai permet dégommer le mouseout et le remplacer par mouseover ou rien en passant par un cleartimeout avant.

Ne constant pas de différence j'ai fais plus de test.
Mon code était déjà bon..., pas de souci avec les éléments internes et les mouseout.
C'est avec mon rebond.
Je vais donc chercher dans l'autre sens.

J'étais partie dans le mauvais sens car, au début, comme tous les noob, je n'ai pas assez sécurisé avec du cleartimeout en masse. Donc au départ c'était un souci de out. Mais le dernier truc qui restait ressemblé en tout point au même problème... d'où la confusion.

J'ai dégommer mon rebond, ca marche.
Je vais donc essayer de réparer le rebond.
Des les jeu les rebond des menu sont mieux fait, mais les jeux sont pas fait par des noobs.

Quoi qu'il en soit je ne quitte pas ce type de code des yeux, je sens que c'est une solution à bien des problèmes. J'y reviendrai que j'arrive ou non a finir ce code moi même. Mais faut que j'avance aussi un peu dans le travail.

nb : votre site est top , bien accueillit, vous m'avez pas prit de haut, vous m'avez offert plus de servies que demandé... ca change de phpbb-fr lol

Bonne journée

Voila mon code qui fonctionne.

Si vous y voyez une erreur n'hésitez pas.
Il ne me reste plus qu'a faire la déco pour les différentes version de css.

Une fois la déco et le remplissage terminé, je le laisserai peu être toujours accessible en haut de page .Tout dépendra de la place qu'il prendre quand il est fermé.

Merci à tous.

Mon code fonctionnel : (même si bordelique.

Code:

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<div id="div_menu" class='bulle_deco menu_header' style="top:-10px; left:-480px; width:500px; height:120px; padding:10px; border:solid; border-width:1; " onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu_out('out',1)">
<table width="100%" border="1px">
<tr><td align="right"><div class="menu_normalize"><b>&nbsp;MENU</b>&nbsp;</div>
<hr /><div class="menu_normalize">
<img src = '{PHPBB_ROOT_PATH}mes_images/header/texte0.png' onclick="javascript:zoom(109);"/>
 
<img src = '{PHPBB_ROOT_PATH}mes_images/header/texte1.png' onclick="javascript:zoom(107);"/></div>
</td></tr></table>
 
 
</div>
<script type="text/javascript">
 
// MENU MOBILE
var menu_max_left	= -55;
var	menu_min_left	= -480;
var bound			= 0; // N° du rebound en cours et effectué
var menu_pos		= ''; // position actuelle du menu
var user_action 	= 0; // 0 = actionné par la fonction ; 1 = actionné par l'utilisateur
var menu_running	= 0; // 0 = inacitf ; over = ouverture ; out = fermeture 
var menu_status		= 0; // 0 = fermé ; 1 = ouvert 
var speed 			= 8; // vitesse 
var bound_speed		= 1; // Vitesse des rebonds, le 1er est 3x cette vitesse
var bound_running	= 0; // ne pas toucher
var bound_action	= 0; // ne pas toucher
var bound_of		= 0; // ne pas toucher
var bound_length	= 12; // taille des debonds, le 1er est 3x cette distance 
var bound_next 		= action; // ne pas toucher
var t;
var action 			='';
var user_action		='';
var done 			='out';
 
// pour eviter les bug lors du passage souris sur elements contenus.
function menu_out(action,user_action)
	{
	if	((user_action == 1) && (menu_running == 'out') && (action == 'out')) 
			{return;}
 
	else if	((user_action == 1) && (menu_running == 'over') && (action == 'out')) 
			{
			clearTimeout(t);
			menu_running = 'out';
   		    t = setTimeout("menu('out',0)",1);
			}
 
	else	{t = setTimeout("menu('out',1)",100);}
	}
 
function menu(action,user_action)
	{
	bound_next		= action;
	bound_of		= bound_length * bound_running;
 
// (action) => action de la souris : over ? out ?
// (user_action) => action demandée par l'utilisateur : 0 = non ; 1 = oui
// (menu_runninng) => action déjà en cours ? si oui laquelle : over ; out ; sinon 0
 
	menu_pos = (document.getElementById('div_menu').style.left).replace('px', '');
	menu_pos = 1*(menu_pos);
 
// Empèche la cumulation d'une même action.
	if		((user_action == 1) && (menu_running == 'over') && (action == 'over')) 
			{return;}
 
// Inversement de l'action si demandée par l'utilisateur
	else if	((user_action == 1) && (menu_running == 'out') && (action == 'over')) 
			{
			clearTimeout(t);
			menu_running = 'over';
   		    t = setTimeout("menu('over',0)",1);
			}
 
// Gestion des rebonds over
	else if		(( (action == 'bound_over_1') || (action == 'bound_over_3') ) && (done != 'done') )
				{
				bound_running	= action.substr(11,12);
				bound_action	= action.substr(6,10);
 
				if (menu_pos > (menu_max_left - bound_of))
					{
					menu_pos -= bound_speed * bound_running;
					document.getElementById('div_menu').style.left = menu_pos+'px';
					clearTimeout(t);
	    		    t = setTimeout("menu(bound_next,0)",1);
					}
				else
					{
					bound = bound_running;
					clearTimeout(t);
	    		    t = setTimeout("menu('over',0)",1);
					}
				}
 
// Gestion des rebonds out
	else if		( (action == 'bound_out_1') || (action == 'bound_out_3') && (done != 'done') )
				{					
				bound_running	= action.substr(10,11);
				bound_action	= action.substr(6,9);
 
				if (menu_pos < (menu_min_left + bound_of))
					{
					menu_pos += bound_speed * bound_running;
					document.getElementById('div_menu').style.left = menu_pos+'px';
					clearTimeout(t);
	    		    t = setTimeout("menu(bound_next,0)",1);
					}
				else
					{
					bound = bound_running;
					clearTimeout(t);
	    		    t = setTimeout("menu('out',0)",1);
					}
				}
 
 
 
// Si action over est demandée et aucune action en cours
	else if	(action == 'over') 
			{
 
			// pour eviter les bug lors du passage souris sur elements contenus.
			if (done == 'over')  {clearTimeout(t); return; }
			done = '';
 
			// Progression de l'action
			if (menu_pos < menu_max_left)
				{
				menu_pos += speed;
				document.getElementById('div_menu').style.left = menu_pos+'px';
				clearTimeout(t);
   		    	t = setTimeout("menu('over',0)",1);
				menu_running = 'over';
				}
 
			// Si l'action atteint son objectif
			else if (menu_pos >= menu_max_left)
				{
				if (bound == 0) 
					{
					clearTimeout(t);
					t = setTimeout("menu('bound_over_3',0)",1);
					}
				else if (bound == 3) 
					{
					clearTimeout(t);
					t = setTimeout("menu('bound_over_1',0)",1);
					}
				else 
					{ 
					clearTimeout(t);
					menu_running = 0;
					bound = 0;
					done = 'over';
					}
				}
			}
 
// Si action out est demandée et aucune action en cours
	else if	(action == 'out')
			{
			// pour eviter les bug lors du passage souris sur elements contenus.
			done = '';
 
			// Progression de l'action if onmouseout
			if (menu_pos > menu_min_left)
				{
				menu_pos -= speed;
				document.getElementById('div_menu').style.left = menu_pos+'px';
				clearTimeout(t);
    		    t = setTimeout("menu('out',0)",1);
				menu_running = 'out';
				}
 
			// Si l'action atteint son objectif
			else if (menu_pos <= menu_min_left)
				{
				if (bound == 0)
					{
					clearTimeout(t);
					t = setTimeout("menu('bound_out_3',0)",1);
					}
				else if (bound == 3)
					{
					clearTimeout(t);
					t = setTimeout("menu('bound_out_1',0)",1);
					}
				else 
					{
					clearTimeout(t);
					menu_running = 0;
					bound = 0;
					done = 'out';
					}
				}
			}		
 
	}
 
 
</script>

Et mon css

Code:

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
.bulle_deco{
background-image		: -moz-linear-gradient(-65deg, #e7e9ef 18%, #FFFFFF);
background-image		: -webkit-gradient(linear, left top, right bottom, color-stop(0.18, #e7e9ef), color-stop(1.0, #e7e9ef));
-webkit-border-radius	: 14px;
-moz-border-radius		: 14px;
border-radius			: 14px; 
-webkit-box-shadow		: 8px 8px 12x #aaa;
-moz-box-shadow			: 8px 8px 12px #aaa;
box-shadow				: 8px 8px 12px #aaa; 
border					: 0px solid #000000;
outline					: 0px solid #000000;
vertical-align			: middle; 
}
 
 
.menu_header{
-webkit-transform	: skew(-35deg);
-moz-transform		: skew(-35deg);
-o-transform		: skew(-35deg);
vertical-align		: bottom; 
width				: 200px;
padding-left		: 10px;
padding-right		: 10px;
position			: absolute;
}
 
.menu_normalize{
-webkit-transform	: skew(35deg);
-moz-transform		: skew(35deg);
-o-transform		: skew(35deg);
}

28/12/2011, 13h59
westernz

J'ai édité mon code ce matin, il manquer un ajustement sur d’inversement du mouvement pendant un défilement. Je pense ne rien avoir oublié ce coup-ci.
Et pour un noob je trouve que c'est pas du mauvais travail :)
28/12/2011, 15h06
Watilin

C'est peut-être parce que tu n'es plus un noob :ccool:
Au fait, si tu veux faire du CSS3, tu oublies Opera et MSIE. Tu connais CSS3 Please ? Il est pas forcément complet, mais il est pratique ;)

Forme toi avec les cours et tutoriels CSS.
28/12/2011, 15h58
westernz

Je vais regarder :)

Je connais juste ca
http://css3.mikeplate.com/

COté IE et opréa on m'a déjà conseillé une astuce, mettre un code CSS2 juste avant le CSS3 pour servir de code de secours si le code CSS3 ne passe pas.

C'est pas trop mal même s'il y une faille dans son systeme.

Bonne journée