Problème de superposition de divs

**sylsau** · 21/10/2006, 01h12

Bonjour,

Voici la page en question :

http://sylsau.homelinux.net/ter/carte.php

La mise en place est exclusivement optimisé pour du 1024*768.
Dans les différents menus qui s'affichent il y a les menus : "Chargement d'un fichier..." et "Outils de tracé".

J'ai donc mis des petites croix dans ces menus permettant suivant que l'utilisateur clique dessus de déplier ou non ces menus. Jusque là tout marche.

Lorsque je déplie le menu "Chargement d'un fichier", je fais en sorte de rendre caché l'autre menu "Outils de tracé". Et à ce moment là : je n'arrive plus à écrire dans le menu "Chargement d'un fichier". Cela vient surement du fait qu'il y a un problème avec l'autre menu puisqu'ils se superposent mais je ne vois pas quoi faire pour arranger ça.

Pour aide voici le morceau de code Javascript avec lequel je cache les menus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
function cacher(nom)
{
	var style = document.getElementById(nom).style;
 
	if(style.visibility == "visible")
	{
		style.visibility = "hidden";
 
		if(nom == "upload102")
			document.getElementById("upload111").style.visibility = "visible";
 
 
	}else{
 
		if(nom == "upload102")
		{
			document.getElementById("upload111").style.visibility = "hidden";
			document.getElementById("upload112").style.visibility = "hidden";
		}
 
		style.visibility = "visible";
	}
}

Et le fichier CSS associé à la page est ici : http://sylsau.homelinux.net/ter/style.css

Quelqu'un aurait une idée de la manière dont je peux résoudre ce problème ?

Merci d'avance.

Sylvain.

**CR_Gio** · 21/10/2006, 03h03

salut,

C'est fait avec quoi la carte que tn lien pointe?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<style type="text/css">
.outil{
background-color:#EEEEEE;
border:solid 1px #DDDDDD;
width:600px;
margin-top:4px;
}
.titreOutil{
background-color:#CCCCCC;
border:solid 1px #888888;
}
.onoff{
float:right;
display:table;
}
</style>
 
<script>
var toolActived=new String('');
function onoff(id){
var toolIs=window.document.getElementById(id);
 
 
if(toolIs.style.display=="block")
{
  toolIs.style.display="none";
  toolActived='';
}
else
{
  toolIs.style.display="block";
  // on désactive l'outils precedent => en option
  if(toolActived!='')
  {
    window.document.getElementById(toolActived).style.display="none";
  }
  toolActived=id;
}
 
}
</script>
 
<!-- Chargement d'un fichier au format shape -->
<div class="outil">
 
  <div class="titreOutil">
    <div class="onoff">[<a href="javascript:onoff('tool1');" style="text-decoration:none;">&nbsp;X&nbsp;</a>]</div>
    Chargement d'un fichier au format shape
  </div>
 
  <div id="tool1" style="display:none;">
  Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>
  </div>
 
</div>
 
 
<!-- Chargement de données GPX -->
<div class="outil">
 
  <div class="titreOutil">
    <div class="onoff">[<a href="javascript:onoff('tool2');" style="text-decoration:none;">&nbsp;X&nbsp;</a>]</div>
    Chargement de données GPX
  </div>
 
  <div id="tool2" style="display:none;">
  Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>
  </div>
 
</div>
 
<!-- Outils de tracé -->
<div class="outil">
 
  <div class="titreOutil">
    <div class="onoff">[<a href="javascript:onoff('tool3');" style="text-decoration:none;">&nbsp;X&nbsp;</a>]</div>
    Outils de tracé
  </div>
 
  <div id="tool3" style="display:none;">
  Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>
  </div>
 
</div>

merci pour tas reponse

**CR_Gio** · 21/10/2006, 03h04

Sinon, je pense que ton probleme vien du fait que tu utilise visibility (j'ais pas essayé

)

Ca c'est un autre exemple avec un outil ouver par defaut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<style type="text/css">
.outil{
background-color:#EEEEEE;
border:solid 1px #DDDDDD;
width:600px;
margin-top:4px;
}
.titreOutil{
background-color:#CCCCCC;
border:solid 1px #888888;
}
.onoff{
float:right;
display:table;
}
</style>
 
<script>
var toolActived=new String('tool1');
function onoff(id){
var toolIs=window.document.getElementById(id);
 
 
if(toolIs.style.display=="block")
{
  toolIs.style.display="none";
  toolActived='';
}
else
{
  toolIs.style.display="block";
  // on désactive l'outils precedent => en option
  if(toolActived!='')
  {
    window.document.getElementById(toolActived).style.display="none";
  }
  toolActived=id;
}
 
}
</script>
 
<!-- Chargement d'un fichier au format shape -->
<div class="outil">
 
  <div class="titreOutil">
    <div class="onoff">[<a href="javascript:onoff('tool1');" style="text-decoration:none;">&nbsp;X&nbsp;</a>]</div>
    Chargement d'un fichier au format shape
  </div>
 
  <div id="tool1" style="display:block;">
  Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>
  </div>
 
</div>
 
 
<!-- Chargement de données GPX -->
<div class="outil">
 
  <div class="titreOutil">
    <div class="onoff">[<a href="javascript:onoff('tool2');" style="text-decoration:none;">&nbsp;X&nbsp;</a>]</div>
    Chargement de données GPX
  </div>
 
  <div id="tool2" style="display:none;">
  Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>
  </div>
 
</div>
 
<!-- Outils de tracé -->
<div class="outil">
 
  <div class="titreOutil">
    <div class="onoff">[<a href="javascript:onoff('tool3');" style="text-decoration:none;">&nbsp;X&nbsp;</a>]</div>
    Outils de tracé
  </div>
 
  <div id="tool3" style="display:none;">
  Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>Bla-bla<br>
  </div>
 
</div>

**sylsau** · 21/10/2006, 13h41

Envoyé par CR_Gio

salut,

C'est fait avec quoi la carte que tn lien pointe?

merci pour tas reponse

J'utilise l'API Google MAPS v1 disponible ici : http://www.google.com/apis/maps/

Elle est vraiment bien foutue et la version 2 qui est sortie est encore mieux

Problème de superposition de divs

CSS

Vue hybride

Discussions similaires

Partager

Partager