1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Probleme de marge [Résolu]

Signaler
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
 -
Messages postés
34
Date d'inscription
mardi 21 novembre 2000
Statut
Membre
Dernière intervention
16 juin 2016
 -
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

2 réponses

Réponse 1 / 2
Messages postés
32986
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juin 2021
 351
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 ??
Réponse 2 / 2
Messages postés
34
Date d'inscription
mardi 21 novembre 2000
Statut
Membre
Dernière intervention
16 juin 2016
 1 

.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;
}
Répondre Posez votre question