menu qui passe au dessus du texte

Version imprimable

Bonjour,

J'ai fais un menu en Javascript/dhtml dans lequel je fais apparaître un tableau qui contient les liens vers mes pages.

Quand ce tableau apparait, il me décale le texte de la pasge vers le bas. Serait il possible qu'il passe au dessus du texte comme un menu normal?

J'espère que vous pourrez m'aider car c est un problème qui me gêne souvent dans mes scripts...

Merci d'avance

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
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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
 
#decouverte{
	position:relative;
	display:none;
	visibility:hidden;
	}
	.liens{
	color:#ffffff;
	text-align:center;
	text-decoration:none;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
 
	}
</style>
<script language="javascript">
<!--
var temps;		
var arret;			//pour l'attribution de la fonction setTimeout()
 
function affiche(menu)
{	//Affiche le div
	document.getElementById(menu).style.display='block';
	document.getElementById(menu).style.visibility='visible';	
}
 
function cache(menu)
{
	document.getElementById(menu).style.display='none';
	document.getElementById(menu).style.visibility='hidden';
}
 
function cache_decouv()
{
	cache('decouverte');
}
function arret()
{// arrête le compteur
	window.clearTimeout(temps);
}
 
 
//-->
</script>
</head>
<body onUnload="arret()">
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100"><a href="javascript:;" onMouseOver="affiche('decouverte');arret()" onMouseOut="temps=setTimeout('cache_decouv()',1000)"><img src="images/avatars.jpg"  border="0" name="bouton_decouv" width="100" height="18"></a></td>
  </tr>
  <tr>
    <td height="19"><div id="decouverte" >
              <table border="0" cellspacing="0" cellpadding="0"  background="images/fd_menu.jpg">
                <tr>
                  <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_decouv()',1000)" height="24" width="100"><a href="javascript:window.open('index.htm','_parent')" ><div class="liens">Bleu</div></a></td>
                </tr>
              </table>
                     </div>
    </td>
  </tr>
 
</table>
 
J'aimerai que le texte passe au dessous du menu et qu'il ne soit pas décalé!!!
</body>
</html>

24/12/2004, 14h40
dervish
Salut,
en fait je pense que c'est seulement un problème de css:
dans ta déclaration de decouverte, il faut que tu mettes:
Code:

1 2 3 4 #decouverte{ position:absolute; display:none;
24/12/2004, 14h57
peck
Bon ben je vais répondre tout seul à mon problème, comme quoi j'avais pas assez réfléchis. Suffisait de mettre un z-index.
J'avais jamais manipulé ca donc je sais pas si c est bien ce que j'ai fait: j'ai créer une classe commune au tableau et au texte dans lequel j'ai mis la position à absolute. puis j'ai mis le z-index du tableau à 1 et celui du tableau à 0 en gros en code ca donne ca:

ca c'est pour la feuille de style
Code:

1 2 3 4 5 6 7 8 9 10 <style> .text{ position:absolute; } #decouverte{ position:absolute; display:none; visibility:hidden; }
ca c'est pour le tableau
Code:

1 2 <td height="19"><div id="decouverte" class="text" style="z-index:1;" >
et ca pour le texte
Code:

1 2 <div class="text" style="z-index:0;">J'aimerai que le texte passe au dessous du menu et qu'il ne soit pas décalé!!!</div>
je suppose que ce code n'est pas très optimisé, si vous avez des conseils je suis preneur
24/12/2004, 15h03
peck

j'avais pas vu ta réponse Dervish merci beaucoup, tu avais raison :applo: