begin process at 2012 05 29 01:05:17
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

bug sur zindex

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

bug sur zindex

lundi 8 octobre 2007 à 01:58:20 | bug sur zindex

originalcompo
Bonjour à tous.

Voilà, j'ai un bug dans l'utilisation de la propriété zindex, dans le cas d'internet explorer (marche très bien sur netscape).
Comme je n'ai pas trouvé de référence à ce bug sur le net, je voudrais savoir si c'est moi qui est fait une erreur, ou bien eventuellement s'il y a une solution.

Le problème: 3 couples "SPAN/TEXTAREA" placés en cascade via css (comme des fenêtres windows)
Lorsque je clique sur une des fenêtres, celle-ci passe au premier plan (l'ordre des fenêtres restantes est sans importance, mon algo ne les garde pas forcément, là n'est pas le problème)
Pour faire ceci, je recalcule les zindex des libelles (SPAN) et des zones TEXTAREA

Problème: selon les configurations, les SPANS apparaissent alors qu'ils ont un index inférieur à celui d'un TEXTAREA,  sencé donc les recouvrir

Le code suit. Merci d'avance à ce qui regarderont

http://originalcompo.free.fr

-----------

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<styletype="text/css">
.P1{background-color:#a4a4ff;z-index:1;position:relative;top:0;left:10;opacity:1;filter:alpha(opacity=100);}
.P2{background-color:#a4a4ff;z-index:3;position:relative;top: -300;left:30;opacity:1;filter:alpha(opacity=100);}
.P3{background-color:#a4a4ff;z-index:5;position:relative;top: -600;left:50;opacity:1;filter:alpha(opacity=100);}

.Q1{z-index:2;position:relative;top:0;left:10;opacity:1;filter:alpha(opacity=100);}
.Q2{z-index:4;position:relative;top: -300;left:30;opacity:1;filter:alpha(opacity=100);}
.Q3{z-index:6;position:relative;top: -600;left:50;opacity:1;filter:alpha(opacity=100);}
</style>
</head>

<body>
<script language="JavaScript">
function ordre(x){
var tab =new Array('d1','d2','d3', 'l1','l2','l3');

switch(x)
{
case"d3": zind =new Array(1,3,5,/* TEXTAREA */0,2,4/* LIBELLE */); break; // 1 2 [3]
case"d2": zind =new Array(1,5,3,0,4,2); break; // 1 [2] 3
case"d1": zind =new Array(5,3,1,4,2,0); break; // [1] 2 3
}

for(i=0; i<=5; i++){
document.getElementById(tab[i]).style.zIndex = zind[i];
}
}
</script>

Texte

<div style="background-color:#68f8a9;">
<span class="P1" id="l1"><br>oc_listes.php (classes communes)<br></span>
<TEXTAREA class="Q1" id="d1" ROWS=20 COLS=90 onfocus='JavaScript: ordre("d1");' TITLE="AAA">
AAA
</TEXTAREA>

<span class="P2" id="l2"><br>oc_histogramme.php (version CSS)<br></span>
<TEXTAREA class="Q2" id="d2" ROWS=20 COLS=90 onfocus='JavaScript: ordre("d2");' TITLE="BBB">
BBB
</TEXTAREA>

<span class="P3" id="l3"><br>oc_gdhistogramme.php (version GD)<br></span>
<TEXTAREA class="Q3" id="d3" ROWS=20 COLS=90 onfocus='JavaScript: ordre("d3");' TITLE="CCC">
CCC
</TEXTAREA>
</div>

</body>
</html>
lundi 8 octobre 2007 à 06:26:22 | Re : bug sur zindex

bultez

Membre Club
Bonjour,
     après avoit mis un espace entre style et type : <style type="text/css">
         testé avec IE7 ça baigne
         K-Meleon, FireFox, Opera.. ralent un peu mais ça marche aussi.
               ( regarder les Consoles d'Erreurs )
                Cordialement            Bul         [mon Site]     [M'écrire]
lundi 8 octobre 2007 à 10:18:32 | Re : bug sur zindex

originalcompo
Merci pour ta réponse, mais désolé de te décevoir: l'espace dont tu me parles et qui a disparu au moment du copier collé existait déjà dans mon code !

Pour voir le vrai  problème, il suffit de permutter deux ou trois fois la fenêtre en 1er plan (je dis 2 ou 3 fois, mais 1 suffit de cliquer dès le début sur la 2ième fenêtre pour voir le problème)

Merci d'avance

http://originalcompo.free.fr
lundi 8 octobre 2007 à 11:29:54 | Re : bug sur zindex

bultez

Membre Club



je ne m'embèterais pas :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
<head>
<title>Untitled</title>
<style type="text/css">
.P1{background-color:#a4a4ff;position:relative;top:0;left:10;width:50%}
.P2{background-color:#a4a4ff;position:relative;top: -300;left:30;width:50%}
.P3{background-color:#a4a4ff;position:relative;top: -600;left:50;width:50%}
</style>
</head>
 <body>
<script type="Text/JavaScript">
   var p="l1";
   function ordre(x){
       document.getElementById(p).style.zIndex='1';
       p=x;
       document.getElementById(p).style.zIndex='3';
   }
</script>
 <DIV class="P1" id="l1"><br>oc_listes.php (classes communes)<br>
<TEXTAREA class="Q1" id="d1" ROWS=20 COLS=90 onfocus='ordre("l1");' TITLE="AAA">
AAA
</TEXTAREA>
</div>
 <div class="P2" id="l2"><br>oc_histogramme.php (version CSS)<br>
<TEXTAREA class="Q2" id="d2" ROWS=20 COLS=90 onfocus='ordre("l2");' TITLE="BBB">
BBB
</TEXTAREA>
</div>
 <div class="P3" id="l3"><br>oc_gdhistogramme.php (version GD)<br>
<TEXTAREA class="Q3" id="d3" ROWS=20 COLS=90 onfocus='ordre("l3");' TITLE="CCC">
CCC
</TEXTAREA>
</div>
 </body>
</html>

   certes à affiner...
   

                Cordialement            Bul         [mon Site]     [M'écrire]
lundi 8 octobre 2007 à 11:47:38 | Re : bug sur zindex

originalcompo

Merci beaucoup !

Cela résoud le problème que j'ai, donc merci 

  • Evidemment, ce n'est pas générique (s'il y avait 10 fenêtres, ca ne marche pas tel quel)
  • par curiosité, j'aurai aimé que quelqu'un me confirme qu'il y a un bug dans IE ou bien m'ouvre les yeux sur une erreur

Mais dans l'immédiat, si ca n me suffit pas intellectuellement, dans la pratique ca ira. Merci encore !!!



http://originalcompo.free.fr
lundi 8 octobre 2007 à 12:08:33 | Re : bug sur zindex

bultez

Membre Club

>>Evidemment, ce n'est pas générique (s'il y avait 10 fenêtres, ca ne marche pas tel quel)
    euh... le CSS certes.
    mais on peut faire ça dynamiquement.

>>par curiosité, j'aurai aimé que quelqu'un me confirme qu'il y a un bug dans IE
    pas sûr, les bugs dans IE,FF... et autres navigateurs sont quand même très très rares.
    et pourtant :   tel que tu faisais, ça me semblait correct,
       et ça semble ne pas marcher avec IE.
    quelque chose doit nous échapper.
    je dirais que je fais une erreur aussi, mais que je ne la vois pas.

                Cordialement            Bul         [mon Site]     [M'écrire]
lundi 8 octobre 2007 à 14:03:03 | Re : bug sur zindex

originalcompo
Puisque j'y suis, une question annexe:

si je rajoute le texte "COUCOU" après la création du dernier <div> on se rend compte que par défaut le message est placé à l'endroit où serait positonnée le dernier div si ceux-ci n'étaient pas empilés.

Certes, on peut mettre le "COUCOU" dans  un div et décaler l'écriture de celui-ci, mais ca ne fera qu'ajouter de l'espace après le "COUCOU", à la fin de la page

Je trouve cel génant car l'utilisateur voit une barre de défilement, et lorsqu'il va descendre en bas de la page, il se rendra compte qu'il n'y a rien de plus.

Est-il possible de supprimer cet espace inutile ?

http://originalcompo.free.fr
lundi 8 octobre 2007 à 14:23:28 | Re : bug sur zindex

bultez

Membre Club
pas compris grand chose ( mais c'est normal, je suis un peu neuneu )
si tu utilise des postion:relative et/ou position:absolute
    ça touche la page de manière indépendante du reste.

à propos : j'aimerais bien aussi avoir des explications
    sur le "problème initial", or, s'il y a "réponse acceptée",
    de nombreux intervenants risquent même de ne plus lire,
    si j'étais toi, j'enlèverais

                Cordialement            Bul         [mon Site]     [M'écrire]
lundi 8 octobre 2007 à 15:23:03 | Re : bug sur zindex

originalcompo
Je suis d'accord avec toi, le problème m'intrigue toujours, j'ai donc enlevé le "réponse accepté"...

Pour ma 2ième question que  tu n'as pas compris, c'est plutôt parceque je me suis mal exprimé. Si tu lance l'exemple avec le "COUCOU" en plus, c'est plus évident, mais bon je vais essayer d'expliquer.

Soit deux textarea (textarea1 et textarea2) et un div contenant du texte (DIV).
1): ce qui arrive si on les places normalement,
2): si on déplace les textarea avec css (comme dans mon code)
3): si on déplace aussi le DIV
4): ce que j'aimerais obtenir, afin de ne pas avoir d'ascenseur sur une zone où il n'y a rien !!!

Les pointillés délimitent le début et la fin de page (la taille du html tel qu'elle apparait dans explorer)

1)               2)             3)            4)
---------------- -------------- ------------- -------------
textarea1        textearea1     textarea1     textarea1
textarea1        tetextarea2    tetextarea2   tetextarea2
textarea1        tetextarea2    tetextarea2   tetextarea2
textarea2                       DIV           DIV
textarea2                                     -------------
DIV              DIV
---------------- -------------- -------------

En réalité, entre temps j'ai trouvé une "solution", bien qu'elle ne soit pas très propre à mon gout:

On positionne les textarea en absolu, dsans toucher au top (au cas où il y aurait du texte au dessus), et le décalage vertical se fait via des <br>

Le DIV sera lui positionné en relatif, et le tour est joué.

Pas mieux pour l'instant

[ Lien ]
lundi 8 octobre 2007 à 18:55:19 | Re : bug sur zindex

PetoleTeam

Membre Club
Bonjour à tous...
Tentative de réponse

- Il n'y a pas BUG à proprement parler, mais une façon différente d'interpréter les zIndex de la part des navigateurs.

- Mais avant toute choses mettre des zIndex sur des éléments positionnés en relatif pas TOP mais bon c'est jouable!

- Le zIndex est justement la pour gérer dans l'espace des couches ce qui n'est pas approprement parler le cas de la disposition en relatif, mais on dira donc que IE s'en sort moins bien.

- Lorsque tu réaffectes les zIndex il se trouve un moment ou 2 ont le même, IE dans ce cas les affiches dans l'ordre d'affectation en cas d'égalité, c'est son choix.

- Dans ton CSS supprime les z-index et mets les positions en absolute, tu verras qu'il n'y a plus BUG.

- La soluce de The Bultez est plus clean au niveau de la gestion, c'est un DIV que tu mets par dessus avec tout ce qu'il contient.

PS : Je n'est pas encore lu la suite de tes soucis...

 ;0)

1 2

Cette discussion est classée dans : position, index, top, relative, opacity

Répondre à ce message

Sujets en rapport avec ce message

Changer un calque de position"absolute" en position"relative" dans OnClick [ par FoxCoon ] Salut tout le monde !Je voudrais savoir comment je pourrais changer la position de mon calque...en fait, je cherche à créer un menu....Quand on clique Récupérer la longueur d'une div et l'appliquer à une autre. [ par chiktika ] Bonjour,Voila, J'ai un div (div id="contenu") dont la longueur dépend de la longueur d'un texte qui varie à chaque page html.J'ai un deuxième div (div z-index inopérant sous ie [ par Nitruk ] Bonjour,J'ai un problème avec une bête définition CSS : .item désigne les différends items du menu de mon site, mis en place par un script de 15-20 fo Mon animation flash ne se lit pas avec SWFOBJECT [ par Nixeus ] Bonjour à tous,J'ai voulu intégrer une animation swf dans ma page HTML, en passant par SWFOBJECT afin de ne pas avoir le fameux message d'avertissemen Redirection en _top [ par felix116 ] Bonjour. j'ai hébergé un site chez lycos. En chargeant index.php, un bandeau de pub s'affiche à droite, à l'aide de frames. J'aimerai créer un index. problème de positionnement de calques css et IE 6 [ par Justkill ] Bonjour à vous,je viens vous voir encore une fois pour avoir vos conseils éclairés. En effet, comme l'énonce le titre, j'ai un soucis de positionnemen Problème fluidité javascript déplacement d'une image [ par skydre ] Bonjour à tous,       J'espère déjà avoir posté mon message dans le bon forum.       J'ai développer un petit script java pour une page d'accueil de s Problême affichage menu sous chrome et firefox. [ par stef1010 ] Bonjour, j'ai décidé de franchir le grand pas : créé mon site. J'ai récupéré un code sources de se site avec un menu qui réagis quand la souris se pos Position relative de calques... problèmeS [ par lunelautre ] [u]Bonjour j'ai des calques de menu (invisibles quand non actifs) dont la position est relative ... en fonction de la taille de la fenêtre du navigate coucou , je suis dans la M...... [ par frvfrvfrvfrv ] salut à tous,j'essaye de faire bouger des div , de facon auto , j'ai deja avancer grace à vous tous. Mais pour la suite j'arrive pas a faire la logiqu


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,373 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)