-
DIV display none block
Bonjour,
j'ai une imbrication de DIV comme suit :
______________________________________________________
<div id="jp">
Test
<div id="juan" style="display: none;">
Test
TEst
Test
</div>
<div class="carlo">
RERERETYEST</div>
</div>
LE CSS ASSOCIE EST :
_________________________________________________________
div#jp { color: blue; width: 400px; }
div#jp:hover span {display:block !important;}
span#juan {z-index: 65;display:none;position:relative;top:420px; left:180px;width:400px;height:auto;}
.carlo {z-index: 2;}
Le probleme est que lorsque on va sur le div "JP" on affiche bien le div "juan" MAIS cela decale vers le bas le div "carlo" (d'environ une ligne).
Ca fait bouger toute la page en fait. Comment empecher le decalage lors de l'apparition du cadre (le decalage ne depend pas de la taille du cadre) ?
Merci pour votre aide
Ps: je précise que je suis sous fiferox
Kheraud
-
C'est parce que la définition css de l'id de ton div est prioritaire sur la définition de ton style inline. donc mets plutôt le display:none dans la def de jp. Et puis tu utilises un <div id="jp"> et définis un span#jp, c'est pas très logique tout ça. utilise plutôt #jp tout court dans la def CSS
-
Merci pour ton aide,
Le probleme de span c'est juste parce que en recopiant sur le forum j'ai changé mon script pour que ca soit plus comprehensible.
La solution que tu me proposes ne marche pas sous FF, j'ai toujours le même probleme.
Lorsque je fais sur le div jp ca affiche bien le div juan avec une position relative mais ca decale le texte du dessous en sautant une ligne
En gros ca donne:
AVANT:
######################
Test
Test TEst Test
######################
EN PASSANT SUR LE DIV:
###################
Test
Test TEst Test
RERERETYEST
#################
Il doit manquer quelque chose dans mon css . Ce saut de ligne fout en l'air toute ma présenation :
Le code utilisé :
_________________________________________
<html>
<head><title>
TestTEst
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="jp">
Test
<div id="juan">
Test
TEst
Test
</div>
<div class="carlo">
RERERETYEST</div>
</div>
</body>
</html>
Le code Csss
________________________________________
#jp { color: blue; width: 400px; }
#jp:hover div {display:block !important;}
#juan {z-index: 65;display:none;position:relative;top:420px; left:180px;width:400px;height:auto;}
.carlo {z-index: 2;}
Auriez vous d'autres idées ?
Merci
Kheraud
-
C'est à cause du position:relative;
Utilise plutôt position:absolute et à ce moment, le reste de la page ne sera plus influencé par le changement de display.
Explication : en display:none, l'élément concerné est, pour ainsi dire, ignoré et ses dimensions n'affectent pas la disposition des autres éléments de la page. Alors si tu passes en display:block, c'est comme s'il apparaissait dans la séquence des éléments est les autres sont ainsi décalés. Le positionnement absolu permet de rendre le positionnement l'élément indépendant des autres, quelque soit le mode de display utilisé.
-
Merci pour votre aide.
En fait j'aurais voulu faire ca en relatif mais bon on peut pas tout avoir.
Ca marche nikel maintenant.
Merci encore
Kheraud
