Probleme de marge

Résolu

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 - Modifié par @karamel le 16/05/2016 à 21:39
cs_AccessToYou Messages postés 34 Date d'inscription mardi 21 novembre 2000 Statut Membre Dernière intervention 16 juin 2016 - 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

A voir également:

2 réponses

Réponse 1 / 2

jordane45 Messages postés 37723 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 septembre 2023 342
16 mai 2016 à 18:23

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

cs_AccessToYou Messages postés 34 Date d'inscription mardi 21 novembre 2000 Statut Membre Dernière intervention 16 juin 2016 1
15 juin 2016 à 05:41


.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;
}

Discussions similaires

Calcul de taux de marge en javascript

Modif des marges dans un tableaux word

La taille d'un fichier .txt

Recuperer plusieur chaine de caractère.

region et cliping

Votre réponse

Discussions similaires