Probleme de marge [Résolu]

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 3 mai 2016 à 22:11 - Dernière réponse : cs_AccessToYou 34 Messages postés mardi 21 novembre 2000Date d'inscription 16 juin 2016 Dernière intervention
- 15 juin 2016 à 05:41
Bonjour,
Je viens de mettre en place une grille dynamique de div
Mais je me retrouve avec un problème de marge de quelque PX et je ne voie pas pourquoi
<!DOCTYPE html>
<html>
<head>

<title>chifukoo</title>
<meta charset="UTF-8">
<meta name = "description" content = "test"/>
<meta name = "keywords" content = "Test drag and drop avec création dynamique"/>

<style type="text/css">

body{
 background-color:#9CB7D4; 
}

.divabsolute {
        top: 0px;
        left: 0px;
}

.div-drag {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: solid 1px black;
        border-radius: 25px;
        background-color: yellow;
}

.div-drop {
    display:inline-block;
            width: 50px;
            height: 50px;
            border:solid 1px black;
            border-radius:25px;
            background-color: yellow;
}

.plateaucadre{
 margin-left:35%;
    height:544px;
 width:544px;
 background-size: 100% 100%;
 
    border:solid 2px black;
            border-radius:10px;
           background-color: deepskyblue;
}
</style>

<script type="text/javascript">

function chifukoo(){
this.init();
}

chifukoo.prototype.allowDrop=function(ev) {
    ev.preventDefault();
}


    chifukoo.prototype.drag = function (target, ev) {
        ev.dataTransfer.setData('IdElement', target.id);
}


chifukoo.prototype.drop = function (target, ev) {
    var iddrag = ev.dataTransfer.getData('IdElement');
    alert (iddrag);
    target.appendChild(document.getElementById('jetonadeposer1'));
    ev.preventDefault();
}


chifukoo.prototype.init=function(){

 var egal = document.createElement("div");
 egal.className = "div-drag";
 for (var i = 0; i < 1; i++) {
     var jeton = document.createElement("img");
     jeton.className = "divabsolute";
     jeton.src = "sdiv.png";
     jeton.id = "tboul" + i;
     jeton.setAttribute("draggable", "true");
     jeton.ondragstart = this.drag.bind(this, event);
     egal.appendChild(jeton);
 }
 document.body.appendChild(egal);

 
     var drag = document.createElement("div");
     drag.className = "plateaucadre";
     drag.id = "iddrag";
     for (var i = 0; i < 100; i++) {
         var drop = document.createElement("div");
         drop.className = "div-drop";
         drop.ondrop = this.drop.bind(this);
         drop.ondragover = this.allowDrop.bind(this);
         drag.appendChild(drop);
         document.body.appendChild(drag);
     }
}

onload=function(){new chifukoo()}

</script>

</head>
<body>
</body>
</html>


Cordialement
Pierre Nonclercq
Afficher la suite 

2 réponses

Répondre au sujet
jordane45 20020 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 février 2018 Dernière intervention - 16 mai 2016 à 18:23
0
Utile
Bonjour,
Plutôt que de signaler la discussion comme résolue ... pourquoi ne viens tu pas mettre la solution que tu as trouvé puis mettre cette discussion en RESOLUE toi même en cliquant sur le lien à cet effet ??
Commenter la réponse de jordane45
cs_AccessToYou 34 Messages postés mardi 21 novembre 2000Date d'inscription 16 juin 2016 Dernière intervention - 15 juin 2016 à 05:41
0
Utile

.div-drop {
display: inline-block;
margin: auto;
width: 50px;
height: 50px;
border: solid 1px black;
border-radius: 25px;
background-color: yellow;
}

.plateaucadre {
margin-left: 35%;
display: flex;
flex-wrap: wrap;
align-content: space-around;
text-align: center;
height: 544px;
width: 544px;
background-size: 100% 100%;
border: solid 2px black;
border-radius: 10px;
background-color: deepskyblue;
}

Commenter la réponse de cs_AccessToYou

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.