Superpositions de div

Superpositions de div - HTML/CSS - Programmation

Marsh Posté le 05-06-2007 à 22:39:19    

Bonjour,
 
D'après ce que j'ai pu voir, mon problème est assez fréquent, mais aucune des réponses que j'ai pu trouvé n'a fonctionné.
Voilà mon problème :
J'ai une div qui contient d'autres divs qui recouvrent la totalité de cette première. Je veux faire un "onclick" sur la première div et là impossible, parce qu'apparemment les autres passent au dessus.
Avec le navigateur Opera je n'ai aucun problème ça fonctionne, mais pas avec IE.
J'ai vu qu'il fallait mettre un z-index supérieur pour la div tout en bas pour qu'elle passe au dessus, mais ça ne fonctionne toujours pas...
 
Avez-vous quelque chose à me conseiller ?
Merci !

Reply

Marsh Posté le 05-06-2007 à 22:39:19   

Reply

Marsh Posté le 05-06-2007 à 23:33:58    

t'as essayé de mettre ton div en question en absolute et de lui appliquer le z-index comme tu as fait ?


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 05-06-2007 à 23:44:53    

Le problème c'est que je peux pas le mettre en absolute. Ma div qui contient les autres est en float:left

Reply

Marsh Posté le 06-06-2007 à 09:37:00    

tu peux montrer ton code?  Parce que normalement ça fonctionne très bien !
Sauf si tu as un autre handler de click sur les divs supérieurs et que tu stoppes la propagation de ton evenement ( mais j'en doute).
 
Exemple:

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  6.     <style type="text/css">
  7.     div#container {
  8.       float: left;
  9.       margin-left: 100px;
  10.       width: 303px;
  11.       height: 101px;
  12.       border: 1px solid black;
  13.     } 
  14.     div#container div{
  15.       float: left;
  16.       width:100px;
  17.       height: 100px;
  18.     }
  19.     </style>
  20.     <script language="Javascript" type="text/javascript">
  21.     window.onload = function(){
  22.       document.getElementById('container').onclick = function (){
  23.           alert('pouet');
  24.       }
  25.     }
  26.     </script>
  27. </head>
  28. <body>
  29. <div id="container">
  30.   <div style="background-color:red;">&nbsp;</div> 
  31.   <div style="background-color:blue;">&nbsp;</div> 
  32.   <div style="background-color:green;">&nbsp;</div> 
  33. </div>
  34. </body>
  35. </html>

Reply

Marsh Posté le 06-06-2007 à 11:50:11    

Des fois quand tu mélange des divs de partout, certains navigateurs vont fermer les balises dès qu'ils trouvent l'ouverture d'un autre, et vice versa.
Surveille bien ta source, meme si c'est pas evident avec IE

Reply

Marsh Posté le 06-06-2007 à 11:52:46    

PsychedeChed a écrit :

Le problème c'est que je peux pas le mettre en absolute. Ma div qui contient les autres est en float:left


et alors ? ça fait koi com probleme ? ton div en absolute sera de tout facon positionné par rapport à son parent, qu'il soit en float:left; ou non :o


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 06-06-2007 à 12:00:44    

Decapfour a écrit :

Des fois quand tu mélange des divs de partout, certains navigateurs vont fermer les balises dès qu'ils trouvent l'ouverture d'un autre, et vice versa.
Surveille bien ta source, meme si c'est pas evident avec IE


[:delarue]

dartyduck a écrit :

et alors ? ça fait koi com probleme ? ton div en absolute sera de tout facon positionné par rapport à son parent, qu'il soit en float:left; ou non :o


[:delarue5]
 
S'pas fini de dire nawak tous les deux?

Reply

Marsh Posté le 06-06-2007 à 13:07:05    

koi, spa la journée nationale du Nawak ? :D


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 06-06-2007 à 14:16:43    

Moui, j'y pige rien, c'est très bizarre. En fait je vous explique :
La structure de ma page est générée en javascript en manipulant le DOM.
Si je fais ça à la main, ben ça fonctionne, rien de particulier à faire, l'évènement se propage de la div la plus haute vers celle la plus basse. Mais quand je génère la page en javascript, ben l'évènement se déclenche uniquement sur la div la plus haute... Ca c'est avec IE.
 
Maintenant avec Opera c'est l'inverse, l'évènement se déclenche sur la div la plus basse, mais pas sur les autres !

Reply

Marsh Posté le 06-06-2007 à 14:28:24    

montre comment tu rajoutes tes handlers sur les nodes créés via le dom... Sinon on pourra pas grand chose pour toi.

Reply

Marsh Posté le 06-06-2007 à 14:28:24   

Reply

Marsh Posté le 06-06-2007 à 14:35:44    

ana essaye de mettre un form dans un div, tu mélange le tout avec un autre div dans ce form la, tu vas voir ce que firefox va faire de tes balises non fermées :p
 
Je voulais juste exprimer le fait que les divs doivent etre bien structurés, comme dans l'exemple, et qu'il fallait qu'il verifie :p

Reply

Marsh Posté le 06-06-2007 à 16:01:34    

Oui ça vient forcément du fait que j'ai codé comme un blaireau :D
Je peux pas vous montrer le code, c'est un peu trop compliqué et long. Je vais essayer de voir ça tout seul, et si je trouve je vous dis ce qui n'allait pas

Reply

Marsh Posté le 06-06-2007 à 17:33:22    

J'y comprends vraiment plus rien !
Admettons que je crée une div "etatCivil" et dedans je rajoute un span "prenom" :
 

Code :
  1. var divEtatCivil = document.createElement("div" );
  2. divEtatCivil.className = "etatCivil";
  3. divEtatCivil.onclick = "alert('kebab')";
  4. var spanPrenom = document.createElement("span" );
  5. spanPrenom.className = "prenom";
  6. spanPrenom.onclick = "alert('sauce blanche')";
  7. divEtatCivil.appendChild(spanPrenom);


 
si je clique sur la span "spanPrenom" (y a une valeur texte dedans) ben j'ai un alert('kebab') mais pas de alert('sauce blanche') !

Reply

Marsh Posté le 06-06-2007 à 18:14:14    

Bon déjà je viens de m'apercevoir que dans un objet.onclick il faut mettre juste une référence vers une fonction, sinon ça marche une fois sur 4...

Reply

Marsh Posté le 06-06-2007 à 18:55:13    

Bon je laisse tomber, je viens de m'apercevoir que quand j'affecte un onclick au moment de la création d'un noeud, ça ne fonctionne pas, mais si lorsque le noeud est créé j'appelle une fonction qui parcourt tous les spans pour leur mettre un onclick, ça marche... Bref, allez comprendre...

Reply

Marsh Posté le 07-06-2007 à 08:51:28    

le truc pour mettre un handler correctement c'était de faire:

Code :
  1. spanPrenom.onclick = function () {
  2.   alert('sauce blanche');
  3. }


 
Et ensuite pour ton problème "à la création", je pressens que tu as des boucles dans tous les sens pour créer tes noeuds et que tu ré-utilises des variables pas comme il faudrait...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed