Problème avec menu déroulant (select) et calque (div)sous IE

zola2
Invité n'ayant pas de compte PHPfrance

04 mai 2005, 18:28

Bonjour,

Petit problème que je n'arrive pas à resoudre :
J'ai un calque sur une page qui s'affiche au dessus d'un formulaire, le problème c'est que les champs du formulaire apparaisse sur ce calque... seuleument sous IE.
Sous firefox aucun problème le calque est bien au dessus du formulaire et cache bien les menu déroulant (select) et les champs de saisie...
J'ai essayé les styles CSS en mettant un zindex sur les champs du formulaire mais aucun effet...

Une idée ?

Mammouth du PHP | 19672 Messages

04 mai 2005, 19:11

dans ton CSS, tu as mis zindex ou z-index ?
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

zola2
Invité n'ayant pas de compte PHPfrance

05 mai 2005, 16:01

z-index
J'ai toujours pas trouvé la solution... et je vois pas comment je peux faire...

Ca fait ca seuleument pour les menus deroulant et seulement sous IE :

Exemple :
http://www.e-bahut.com/exemple.php

Eléphanteau du PHP | 46 Messages

05 mai 2005, 16:07

C'est quand même bizarre que ca fasse ca qu'avec l'element HTML SELECT et pas avec les autres champs de formulaires classiques... bug IE ?

Mammouth du PHP | 19672 Messages

05 mai 2005, 16:32

J'ai eu un peu de mal à trouver, mais en fait il manquait un ";" dans la feuille de style. J'ai fait quelques modifications pour arriver au résultat recherché, ça donne ça:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#Layer1 {
position:absolute; 
left:22px; 
top:2px; 
width:126px; 
height:152px; 
z-index:0; 
background-color: #FF0000; 
border: 1px none #000000;
}
#form1 {
position: relative;
top: 0px;
left: 0px;
z-index:1;
background-color: transparent;

}
.Style1 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
z-index: 2;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1"></div>
<form name="form1" id="form1" method="post" action="">
  <textarea name="textarea" cols="20" rows="2"></textarea>
  <br>
  <select name="select">
  <option value="fdg">fdg</option>
  <option value="fdg">dfgd</option>
  </select>
</form>
<p>&nbsp;</p>
</body>
</html>
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 46 Messages

05 mai 2005, 16:38

C'est l'inverse...

Je veux que le calque recouvre le formulaire... et ca pour l'instant ca marche toujours pas :(

Cf : http://www.e-bahut.com/exemple2.php

Mammouth du PHP | 19672 Messages

05 mai 2005, 16:52

Il faut que tu organises l'ordre de z-index : extrait du fichier d'aide de WebExpert:
Un nombre indique la place de l'élément dans l'ordre de la pile. Par exemple, dans le cas d'une pile de trois éléments auxquels on a attribué les nombres 0, 1 et 2, l'élément doté de la valeur 2 sera au-dessus de la pile alors que celui ayant le zéro (0) sera sous tous les autres, 1 étant entre 0 et 2.
La valeur zéro (0) établit toujours le début d'une nouvelle pile.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 46 Messages

05 mai 2005, 17:32

Oui j'ai essayé sous Firefox aucun problème mais sous IE le menu select ne prend pas en compte la valeur de z-index...

Mammouth du PHP | 19672 Messages

05 mai 2005, 17:36

Effectivement, et là, j'avoue que je ne sais pas comment modifier ça: la seule chose que tu pourrais faire, ce serait de mettre un style visibility: hidden dans le select.

Pourquoi veux-tu masquer le formulaire si ce n'est pas indiscret ?
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 46 Messages

05 mai 2005, 17:39

J'ai developpé un menu deroulant avec des calques mais sur une page du site sur le quel je veux l'installer il y a un formulaire et malheureusement sous IE le formulaire (balise select) cache ce menu quand il est ouvert...

:(

Mammouth du PHP | 19672 Messages

05 mai 2005, 17:57

il n'est ouvert que le temps de la sélection. Dès qu'un choix est cliqué, il revient à sa hauteur normale que tu peux limiter à une ligne (size="1")
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 46 Messages

05 mai 2005, 19:26

Mais non c'est pas ca, sur la page : http://www.e-bahut.com/exemple2.php
Le rectangle rouge (calque) devrait recouvrir entierement le formulaire (conforme z-index) et ce n'est pas le cas sous Internet Explorer...

Mammouth du PHP | 19672 Messages

05 mai 2005, 19:30

Alors ajuste les dimensions de ton calque, règles les hauteurs de lignes, bref, travailles sur les CSS, c'est là que tu arriveras à uniformiser.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 46 Messages

05 mai 2005, 19:32

La c'est un exemple... c pas une histoire d'uniformisé, je veux juste pouvoir mettre un calque au dessus d'un formulaire...

Mammouth du PHP | 19672 Messages

05 mai 2005, 19:37

J'avais bien compris et ma réponse est toujours la même: ajuste avec la feuille de style. : la position du calque de couverture, la position du formulaire qui lui même peut être dans un <div>, dans le formulaire des éléments aux dimensions réglés par CSS, tu peux ajuster complètement la mise en page en CSS et avoir l'effet voulu.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe: