28216 sujets

CSS et mise en forme, CSS3

Problème de positionnement / top et left en pourcentage

Bonjour à tous,
Dans le cadre de mon projet, et pour résumer, je dois faire des glisser-déposer de DIV sur une image (représentant en fait des emplacements dans un dépôt)

A chaque glisser-déposer, j'enregistre en base les coordonnées de l'objet (en pourcentage par rapport à la position de mon image). Par exemple si mon image fait l * L (largeur * Longueur), et que je place un emplacement en position (x,y), ses coordonnées seront (100 * x / l) et (100 * y / L)

J'espère être clair pour le moment Smiley smile

Ensuite, le but est de réafficher l'image (le dépôt) en replaçant les emplacements via les coordonnées récupérées en base (je travaille en C#).

Pour l'instant voici un code qui fonctionne (code HTML généré après compilation):


<div id="depotPicture" style="background-color:Green;">
   
   <!-- Image sur laquelle on glisse les emplacements -->     
   <img src="test_depot.jpg" />

   <!--Quelques emplacements -->        
   <div id="emp0" style="width :30px; height:30px; background-color:Red;
         top:35%; left:15%"></div>

    <div id="emp1" style="width :30px; height:30px; background-color:Red;
         top:60%; left:93%"></div>

    <div id="emp2" style="width :30px; height:30px; background-color:Red;
         top:2%; left:2%"></div>
</div>


Problème, je suis pour le moment obligé de passer par une position absolute, ce qui me fout en l'air la mise en page ded mon site. J'essaie de trouver la bonne combinaison de "position", "top", "left", mais je ne trouve pas...

D'où ma demande d'aide!

Merci d'avance
Modifié par hollywood57 (08 Jan 2009 - 17:16)
As-tu essayer de mettre le div conteneur en position relative pui les div enfants en position absolute ?
Tu pourrais mettre l'image en background sur le div conteneur, et positionner ensuite les autres par rapport à son origine.
Noix de Coco a écrit :
As-tu essayer de mettre le div conteneur en position relative pui les div enfants en position absolute ?
Tu pourrais mettre l'image en background sur le div conteneur, et positionner ensuite les autres par rapport à son origine.

argh, je m'attendais à cette réponse, j'ai oublié de préciser quelque chose! Smiley smile
Je ne peux pas mettre l'image en background de la DIV (en utilisant background(url...), car mon image est généré dynamiquement (pour résumer je récupérer le binaire de l'image qui est stocké en base et je le renvoie à ma vue). Je vais essayer en changeant les attributs de position...

merci
en fait quend je mets la DIV conteneur en position relative, elle me prend toute la largeur de l'écran. Du coup, quand je récupère mes emplacements, si j'ai par exemple x=50%, l'emplacement va se situer au milieu en haut de l'écran et non pas au milieu en heut de mon image...dans l'idéal j'aimerais que ma DIV conteneur ait exactement les dimensions de mon image, et non pas l'inverse (que mon image s'adapte à la DIV)
Tu pourrais ajuster ta <div> en PHP directement dans un attribut style, tu peux récupérer les dimensions de ton image via PHP.
Modifié par Noix de Coco (09 Jan 2009 - 19:38)
Sujet clos
Aller à