Problème d'affichage d'une liste déroulante

Version imprimable

Bonjour,

Je rencontre un problème d'affichage avec le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<BODY>
<form>
<div style='position:absolute; width:200px; height:200px; top:0px; border:thin solid #804000;'>
	<input type="text" value="vals" onclick="document.getElementById('inser_sup').style.visibility='visible';">
	<div id='inser_sup' style='position:absolute; width:80px; height:100px; top:0px; visibility:hidden; left:0px; border:thin solid #804000;' onmouseout="document.getElementById('inser_sup').style.visibility='hidden';">
		<select name='listesup' size='10'>
			<option>valeur1</option>
			<option>valeur2</option>
			<option>valeur3</option>
			<option>valeur4</option>
			<option>valeur5</option>
			<option>valeur6</option>
			<option>valeur7</option>
		</select>
	</div>
</div>
</form>
<div id='inser_sup' style='position:absolute; width:100px; height:100px; top:50px; visibility:visible; left:50px; border:thin solid #804000;'>
	<input type="submit" value="valider">
</div>
 
</BODY>

Lorsque je clique sur l'input vals le select s'affiche. Puis lorsque la souris passe au dessus de l'input valider sans quitter la div inser_sup, celle-ci passe en hidden.
Pouvez-vous m'aider à ce sujet ? Merci :)

04/09/2006, 14h21
licorne

Visiblement personne n'est inspiré !
Si toutefois quelqu'un avait une petite idée... merci d'avance. ;)
04/09/2006, 14h49
Hug0_76

Salut,

euh en fait ton <select> s'en va lorsque l'on rentre dans le div de ton bouton valider!
Pour éviter de te casser la tête est ce que ton div ne peut pas etre décaler de qqs pixels sur la droite???
Parce que je ne trouve pas de solution à ton pb :arf:
04/09/2006, 15h03
licorne

Hélas non... La disposition des infos sur la fenêtre ne le permet pas.:(
Là je ne comprend pas et c'est vraiment bloquant.
05/09/2006, 08h38
Auteur

bonjour,

si j'ai bien compris l'utilisateur à le choix entre plusieurs valeurs pour remplir l'input.
J'ai remarqué que deux div avait l'id=inser_sup :?
05/09/2006, 09h04
licorne

Citation:

Envoyé par Auteur

bonjour,

si j'ai bien compris l'utilisateur à le choix entre plusieurs valeurs pour remplir l'input.
J'ai remarqué que deux div avait l'id=inser_sup :?

Effectivement, mais une fois corrigé le problème existe toujours.
05/09/2006, 09h27
licorne

J'ai résolu le problème en utilisant des z-index.

Bonne journée.:)
05/09/2006, 10h03
Auteur

ah ? J'ai essayé pas mal de combinaisons sans succès. Peut-on voir ton code ?
:merci:

Citation:

Envoyé par Auteur

ah ? J'ai essayé pas mal de combinaisons sans succès. Peut-on voir ton code ?
:merci:

Voilà le code :

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
<HTML>
<BODY>
<form>
<div style='position:absolute; width:200px; height:200px; top:0px; border:thin solid #804000; z-index:2;'>
	<input type="text" value="vals" onclick="document.getElementById('inser_sup').style.visibility='visible';">
	<div id='inser_sup' style='position:absolute; width:80px; height:100px; top:0px; visibility:hidden; left:0px; border:thin solid #804000;z-index:3;' onmouseout="document.getElementById('inser_sup').style.visibility='hidden';">
		<select name='listesup' size='10'>
			<option>valeur1</option>
			<option>valeur2</option>
			<option>valeur3</option>
			<option>valeur4</option>
			<option>valeur5</option>
			<option>valeur6</option>
			<option>valeur7</option>
		</select>
	</div>
</div>
</form>
<div style='position:absolute; width:100px; height:100px; top:50px; visibility:visible; left:50px; border:thin solid #804000; z-index:1;'>
	<input type="submit" value="valider">
</div>
 
</BODY>
</HTML>