menu qui passe au dessus du texte

**peck** · 24/12/2004, 11h12

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 :

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
 
<!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>

**dervish** · 24/12/2004, 15h40

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 :

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

1
2
3
4
 
#decouverte{
   position:absolute;
   display:none;

**peck** · 24/12/2004, 15h57

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 :

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

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 :

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

1
2
 
    <td height="19"><div id="decouverte" class="text" style="z-index:1;" >

et ca pour le texte

Code :

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

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

**peck** · 24/12/2004, 16h03

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

menu qui passe au dessus du texte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager