Discussion :

[anzize]

Bonjour tout le monde,

Je m'excuse déjà de poser un problème qui a peut-être été résolu mais j'ai beau chercher, de même sur google, mais rien de rien !

Sur un de mes sites je développe un tchat pour lequel le client sera en HTML/CSS/Javascript.

Côté client, je bloque sur un truc, je vous avoue, je ne suis pas très fort en CSS.

Dans mon fichier CSS, j'ai :

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
 
#conteneur{
	width:100%;
	margin-top:40px;
	overflow:hidden; 
	border:solid 1px #666666; 
}
.blocChatteur{
	position:relative;
	float:left;
	width:80px;
	height:auto;
	z-index:5;
 
}
.blocPhotoChatteur{
	position: relative;
	width: 45px;
	height: 45px;
	border: solid 1px #000;
	margin-left:auto;
	margin-right:auto;
 
}
.blocDialChatteur{
	width:140px;
	height:150px;
	padding:2%;
	margin-left:auto;
	margin-right: auto;
 
	behavior: url(/js/pie/PIE.htc);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #F00;
}
}

Dans mon fichier HTML, j'ai :

Code html :

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
 
 
<div id="conteneur">
  <div class="blocChatteur" id="blocChatteur123">
 
         <div class="divEcranDial123" style="display:none">   
 
                    <div class="blocDialChatteur" >
 
                        <div class="blocNeutre" style="height:126px;overflow:scroll;" id="ecranmessage123"></div>
                        <div class="blocNeutre" style="height:22px; border:solid 1px #999999; margin-bottom:2%;">
                             <div class="floatAjustable" style="width:80%;"><input name="" type="text" class="zonetextChat123" /></div>
                             <div class="floatAjustable" style="width:20%"><input name="OK" type="button" value="OK" class="envoimessage" id="123" style="width:98%"/>
                             </div>
                        </div>
                    </div>
         </div>   
            <div class="blocNeutre" style="margin-top:3px; width:86px">
                  <div class="blocPhotoChatteur">
                    <a href="#" class="clickopendial" id="123">PHO</a>
                  </div>
                  <div class="blocNeutre" style="margin-top:2px; width:80px; margin-left:auto; margin-right:auto;">
                  [H] Anzize X
                  </div>
            </div>
    </div>
 
</div>

Dans mon script js, j'ai :

Code javascript :

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

1
2
3
4
5
6
7
8
 
$(".clickopendial").live("click",function()
{
var CORRESPONDANT=$(this).attr('id');
$(".divEcranDial"+CORRESPONDANT).slideToggle('slow');
//$("#activitebox").slideDown();
 
});

En cliquant sur le lien clickopendial, le DIV divEcranDial123 apparaît et j'aimerais que ce DIV dépasse le bloc conteneur. Au lieu de ça, mon DIV "blocChatteur123" glisse tout en bas, étend verticalement le conteneur. Du coup, le DIV "blocChatteur123" n'est plus du tout sur la même ligne que les autres DIV "blocChatteurXXX" parce que j'ai cliqué pour ouvrir le dialogue.

Ma question, si vous voulez bien m'aider, est : comment faire en sorte qu'en cliquant sur le lien qui permet l'ouverture d'un dialogue, l'écran dialogue sorte et dépasse le bloc conteneur (qui ne sera donc plus étendu verticalement) pour que tous les blocs "blocChatteurXXX" restent sur la même ligne ?

J'ai joint une petite illustration.

Sincèrement merci.