Discussion :

[badmanner]

Bonjour,

Tout d'abord, merci pour votre site qui m'a permis d'apprendre enormément de choses.

D'habitude, à force de chercher, j'arrive à trouver la solution, mais là, je bloque.

Donc, j'essaye depuis plusieurs jours de faire une chose qui m'a l'air assez simple, mais pourtant....

Je vais tenter d'expliquer.

J'ai plusieurs div comme ceci les unes en dessous des autres:

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
 
<div style="position: absolute; top: 360px; left: 10px; z-index:2;">
 
<div id="grayBG" class="grayBox" style="display:none;"></div> 
 
<div id="LightBox4" class="box_content" style="display:none;"> 
 
<table cellpadding="3" cellspacing="0" border="0"> 
 
  <tr align="left"> 
 
    <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('4'); return false;" style="cursor:pointer;" align="right">X</div><p><!-- Box content -->4Text of the box!!!</p></td> 
 
  </tr> 
 
</table> 
 
</div> 
 
<a href="#" onclick="displayHideBox('4'); return false;">4Open Box</a>
 
</div>

Je fais appel à un script qui m'affiche une petite boite avec effet lightbox

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
 
 
<script type="text/javascript" language="javascript">
 
function displayHideBox(boxNumber) 
 
{ 
 
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
 
        document.getElementById("LightBox"+boxNumber).style.display="block";
 
        document.getElementById("grayBG").style.display="block"; 
 
    } else { 
 
        document.getElementById("LightBox"+boxNumber).style.display="none";
 
        document.getElementById("grayBG").style.display="none"; 
 
    } 
 
} 
 
</script>

Tout ceci marche bien.
Ce que j'essaye de faire c'est que cette petite boite s'affiche a droite de chaque div qui l'appelle.

Mon 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
 
.box_content { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 300px; 
 
    width: 500px; 
 
    padding: 16px; 
 
    z-index:100112; 
 
    overflow: auto; 
 
}

Ca marche à une exception près, lorsque ma boite s'affiche à droite de mon div, mon div descend...

J'espère que c'est clair, ce n'est pas facile à expliquer.
Merci d'avance pour votre aide.

[ouldfella]

essaye de mettre la div parent en position relative
et toutes les div enfants en position absolue avec le même style ".box_content".

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.box_content { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    width: 500px; 
 
    padding: 16px; 
 
    z-index:100112;

[NoSmoking]

Bonsoir,
une autre tentative est de travailler avec des DIV visibles pour bien voir ce qu'il y a à faire coté CSS.

Une dernière chose mets tout dans la même DIV et ne masques que celle ci, le travail de positionnement sera moins dur.