Discussion :

[calitom]

Bonjour,

Je cherche a positionner un div, mais j'ai un probleme...
En fait ce div sert à contenir une image (une croix) en haut a droite d'un autre div...
En gros ce que je développe est une gestion d'image...
En gros on peut ajouter une image, et par le biais de la croix en supprimer...

Mon div se place bien correctement, mais quand je scroll ma fenetre, la croix ne se déplace pas en même temps que le div conteneur...

Voici mon code:

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
<?
function liste_image_repertoire($chemin,$id_utilisateur)
{
   //nom du répertoire à lister
   $nom_repertoire = $chemin;

   //on ouvre un pointeur sur le repertoire
   $pointeur = opendir($nom_repertoire);

   //pour chaque fichier et dossier
   while ($fichier = readdir($pointeur))
   {
      //on ne traite pas les . et ..
      if(($fichier != '.') && ($fichier != '..'))
      {
         //si c'est un dossier, on le lit
         if (is_dir($nom_repertoire.'/'.$fichier))
         {
         }
         else
         {
            //c'est un fichier, on l'affiche
	    echo "<div id='$fichier' ondblclick='insertion_image(document.getElementById(\"id_div_focus_image\").value,\"$fichier\",\"$id_utilisateur\");'>
<div class=\"bt_sup_image\" onclick=\"suppression_image('$fichier','$id_utilisateur');\"></div>
<img class=loaded title='$fichier' src='resize_image.php?pic=$fichier&num=$id_utilisateur'></div>";
         }
      }
   }
   //fermeture du pointeur
   closedir($pointeur);
}
?>

La partie en rouge correspond à l'image de la croix qui permet la suppresion d'une image...

Le javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function suppression_image(nom_image,id_membre)
{
	//On supprime le div
	var div_image=document.getElementById(nom_image).parentNode;
	div_image.removeChild(document.getElementById(nom_image));
	//Appel en ajax pour supprimer l'image sur le serveur
	file('suppression_image.php','nom_image='+nom_image+'&id_membre='+id_membre);
	alert("L'image "+nom_image+" a bien été supprimée.");
}

Le css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.bt_sup_image {
	margin-left: 110px !important;
	margin-top:-10px !important;
	background: url(doc/cursor_delete.gif) no-repeat !important;
	border: 0px !important;
	cursor: hand !important;
	opacity: 0.700 !important;
	width: 25px !important;
	height: 25px !important;
	position: absolute !important;
	display:block !important;
}

[calitom]

Est ce que ca peut être lié au fait que le div est dans un div avec un scroll?

[calitom]

J'ai remarqué que lorsque je fais défiler le scroll de la page principale, le div reste dans le coin du div conteneur, mais lorsque je fais défiler le scroll du div principal, le div ne bouge pas alors que le div conteneur descend...

Comment puis je résoudre ce problème?

[calitom]

Voici le code si ca peut aider:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="ImageUpload" style="z-index:10000; background-color:#FFFFFF;">
        <div id="iframe" align="center" style="width:465px; ">
    	  <iframe src="upload_image.php?id_utilisateur=<? echo $id_utilisateur;?>" frameborder="0"></iframe>
    	</div>
		<div id="Visualisateur_image" style="overflow: auto;">
		<?
		liste_image_repertoire("../sites/$id_utilisateur/images",$id_utilisateur);
		?>
		</div>
	  </div>

En gros dans l'iframe il y a un bouton parcourir qui permet d'ajouter des images dans le div Visualisateur_image sans recharger la page (avec AJAX)...

[calitom]

Je met des images d'illustration au cas où ca peut aider...

Etat initial, les images des croix rouges sont bien positionnées:


Etat après avoir scrollé dans le div (l'image de la crois n'a pas bougé, et n'est donc plus situé dans le coin haut droit du div de l'image...):


Si vous avez une idée de comment faire ce que je souhaite autrement, n'hésitez pas... Je n'ai peut etre pas choisi la meilleure solution...

[calitom]

Si je ne met pas position absolute, le div qui contient la croix rouge agit correctement, mais le problème est que l'image contenu dans le div conteneur se retrouve poussée par l'image de la croix rouge... Comment faire pour que sans la position absolute, le contenu du div ne soit pas influencé par l'image de la croix rouge?