Probleme de marge [Résolu]

Question

Posez votre question Signaler

Probleme de marge [Résolu]

titan3131

Messages postés: 78
Date d'inscription: vendredi 26 février 2010
Dernière intervention: 8 juin 2016

- Modifié par @karamel le 16/05/2016 à 21:39 - Dernière réponse : cs_AccessToYou

Messages postés: 34
Date d'inscription: mardi 21 novembre 2000
Dernière intervention: 16 juin 2016

- 15 juin 2016 à 05:41

Javascript / DHTML Posez votre question Signaler

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

A voir également:

Votre réponse

Répondre au sujet

2 réponses

Votre réponse

Répondre au sujet

Posez votre question

jordane45 · Answer 1 · 2016-05-16T18:23:20+0200

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 24613
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 21 février 2019

362 16 mai 2016 à 18:23

0

Merci

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 ??

cs_AccessToYou · Answer 2 · 2016-06-15T05:41:01+0200

Signaler Commenter la réponse de cs_AccessToYou

cs_AccessToYou

Messages postés: 34
Date d'inscription: mardi 21 novembre 2000
Dernière intervention: 16 juin 2016

1 15 juin 2016 à 05:41

0

Merci


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

Probleme de marge [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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