Problème de decalage à l'apparition d'un bloc display:none

programmeur400 · 16/11/2011, 17h17

Bonjour,
voici les codes html et css:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
        <title>Jo Deyris-Peintures</title> 
       <META NAME="description" lang="fr" content="">
       <META NAME="keywords" lang="fr"content=""> 
       <link rel="stylesheet" href="css.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
  <title></title>
 
<!--functions javascript to greyed/degreyed cases-->
<script type="text/javascript">
 
 
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
 
// open hidden layer
function mopen(id,v)
{	
 
 
	el = document.getElementById(id);
	if (v)
	 el.style.display="block";
	else
	 el.style.display="none";
 
}
 
 
</script>
  </head>
<body>
 
 
 
<div id="a" onmouseover="mopen('m1',true)" onmouseout="mopen('m1',false)">
   <ul >
    <li>
        <a href="#">Images</a></li>
 
        <div id="m1" onmouseover="mopen('m1',true)" onmouseout="mopen('m1',false)">
        <a href="#">Tango</a>
        peintures dessins
        <a href="#">Flamenco</a>
		peintures dessins
        <a href="#">L'âme</a>
		 peintures
 
         </div></div>
 
    </ul>
<div id="b"><p>Jo Deyris</p></div>
 
  </body>
</html>

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
body
{
   width: 760px;
   margin: auto;
   margin-top: 25px;
   margin-bottom: 20px;     
}
 
 
#a
{
text-align:center;
}
 
#m1
{
display:none;
text-align:center;
 
}
#b
{
text-align:center;
margin-top:400px;
color:red;
font-family:"Arial Black", Arial, Verdana, serif;
}
 
p
{
font-size:20px;
}

Lorsque la souris passe sur le mot images le bloc div d' id "m1" apparait mais ceci a pour consequence de faire bouger vers le bas les mots Jo Deyris inclus dans le bloc div d' id "b", ceci est du je pense au margin-top de 400 px de ce meme bloc div d'id "b".Comment faire pour que l'apparition du bloc div d'id "m1" laisse les mots Jo Deyris bien immobiles sur la page sans les faire descendre vers le bas?

NoSmoking · 16/11/2011, 22h19

Bonsoir,
il faudrait que tu construises un document conforme

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="a" onmouseover="mopen('m1',true)" onmouseout="mopen('m1',false)">
  <ul >
    <li><a href="#">Images</a></li>
    <li>
      <div id="m1" onmouseover="mopen('m1',true)" onmouseout="mopen('m1',false)">
        <a href="#">Tango</a> peintures dessins
        <a href="#">Flamenco</a> peintures dessins
        <a href="#">L'âme</a> peintures
      </div>
    </li>
  </ul>
</div>

- mise du DIV dans un LI
- balise UL avant fin DIV

programmeur400 · 17/11/2011, 11h26

non desole c'est pas ça le truc ça ne resoud rien..

Hijack · 17/11/2011, 11h50

En utilisant le code de NoSmoking et en rajoutant ton élément d'ID 'b':

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="a" onmouseover="mopen('m1',true)" onmouseout="mopen('m1',false)">
  <ul >
    <li><a href="#">Images</a></li>
    <li>
      <div id="m1" onmouseover="mopen('m1',true)" onmouseout="mopen('m1',false)">
        <a href="#">Tango</a> peintures dessins
        <a href="#">Flamenco</a> peintures dessins
        <a href="#">L'âme</a> peintures
      </div>
    </li>
  </ul>
</div>
<div id="b"><p>Jo Deyris</p></div>

Il te suffit de donner à l'élément 'a' une hauteur de 400px et d'enlever le margin-top de l'élément 'b'. Ton élément 'm1' devrait se développer dans la div 'a' sans affecter la position de ton élément 'b'.

NoSmoking · 17/11/2011, 15h37

Citation:

Envoyé par programmeur400

non desole c'est pas ça le truc ça ne resoud rien..

certes mais cela va pas mal aider

.

Il te faut mettre ton #m1 en position absolute

Code :

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

1
2
3
4
5
#m1{
  position : absolute;
  display:none;
  text-align:center;
}

concernant la hauteur de 400px à affecter à #a je pense que cela nuirait à la fermeture du menu lors du mouseout.

17/11/2011, 11h26	#3
programmeur400 Analyse système Inscription : juin 2011 Messages : 59 Détails du profil Informations personnelles : Sexe : Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Analyse système Informations forums : Inscription : juin 2011 Messages : 59 Points : -7 Points : -7	non desole c'est pas ça le truc ça ne resoud rien..
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email