[Form] Superposition d'une liste select sur une div 'absolute'

Version imprimable

06/02/2007, 17h50
BRAUKRIS

[Form] Superposition d'une liste select sur une div 'absolute'

Ma page possède une <div> en position absolute mais le composant html select s'affiche avant et donc ne se met pas en arrière plan.

Ce bug est connu des développeurs web mais je n'ai pas trouvé de solution séduisante pour le corrigé, merci d'avance.

Peux tu nous donner ton code merci ;)

Si je traduis ce que tu dis ca doit donner ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css" title="text/css">
/* <![CDATA[ */
#main { position:absolute; width:400px; height:200px; background-color:gray; }
/* ]]> */
</style>
</head>
<body>
<div id="main">
<form action="toto" method="post">
<select id="tutu" size="10">
<option label="tata" value="titi"></option>
</select>
</form>
</div>
</body>
</html>

et chez moi ca marche correctement le select se trouve à l'intérieur du div...

Le code est effectivement cohérent avec ma question, j'ai cependant ajouté un element <label>.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css" title="text/css">
/* <![CDATA[ */
#main { position:absolute; width:400px; height:200px; background-color:gray; }
/* ]]> */
</style>
</head>
 
<body>
<div id="main"></div>
<form action="toto" method="post">
<select id="tutu" size="10">
<option label="tata" value="titi"></option>
</select>
<html:input type="text"/>
<label>Coucou</label>
</form>
 
</body>
</html>

On remarque que la div couvre le label mais pas le select.

06/02/2007, 18h28
blueice

Ton form se trouve en dehors du div !!
C'est tout à fait normal qu'il est couvert :roll:

Entoure ton form avec ton div et plus de problème...
06/02/2007, 18h39
BRAUKRIS

Citation:

Ton form se trouve en dehors du div !!
C'est tout à fait normal qu'il est couvert

Entoure ton form avec ton div et plus de problème...

La div est en position absolute donc sortie du flux normal. Teste mon code est tu verras que la balise html <libelle> est bien couverte alors que le select non
06/02/2007, 18h49
NicoWrmCorp
En disposant le div gênant en arrière plan (z-index -1) sa doit coller non ?
Code:

1 2 main { position:absolute;z-index:-1; width:400px; height:200px; background-color:gray; }
06/02/2007, 18h51
blueice

Si tu souhaites que tout soit "dessus" place tes éléments à l'intérieur du div !

Maintenant avec ton code, chez moi, tout est masqué par la div, ce qui me semble tout à fait normal étant donné que la position absolute sort le cadre du flux!

Sinon indique précisément ce que tu souhaites comme résultat ... :)
07/02/2007, 10h02
Bisûnûrs

FAQ Javascript.
09/02/2007, 19h43
Nicolas.Cogi

bug IE5 et 6 windows, résolu sur IE7.

Le widget windows utilisé par IE pour les select est plus balaise que ceux utilisé pour les autres elements.
Uniquement un iframe peut passer au dessus des select dans IE 5 et 6.

Une solution souvent utilisé est de positionner un iframe créé dynamiquement entre ton div et ton select (j'entend "entre" sur le plan z-index, par exemple select.z-index = 1, iframe.z-index = 2, div.z-index = 3).

le div passe bien au dessus de l'iframe, et l'iframe passe bien au dessus du select.

Maintenant, plutot que de faire du javascript pénible pour creer l'iframe et la positionnée ou il faut, je dirais plutot tant pis pour les gars encore sous IE6 :)