• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage img verschiebt div

hallo
ich habe mir mittels JavaScript ein Grid Raster erstellt
heute habe ich versuch ein img reinzuladen das klappt auch aber das div wo das img reingeladen wird vergrößert sich dann fast um das doppelte ich habe über die Browser Konsole geschaut aber das div hat kein padding und das img hat kein margin und ich habe keine Ahnung voran das liegt habt ihr vielleicht ideen

Hier noch ein paar Schnipsel code:

HTML:
    <div id="desktop">
       <div id="grid-haupt">

       </div>
    </div>

CSS:
#desktop > #grid-haupt {
    position: inherit;
    display: grid;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: lawngreen;
}

#desktop > #grid-haupt > .grid-item {
    border: 1px solid black;
    margin: 0;
    float: left;
}

#desktop > #grid-haupt > .grid-item > .CKS-Desktop-img {
    height: 50%;
    width: auto;
    margin: 0px;
    padding: 0px;
}

Javascript:
    var div = String;
    var gridHaupt = document.getElementById("grid-haupt");
    var idX = 1;
    var idY = 1;
    var td = 10;
    var tr = 10;

    for (i = 0; i < tr; i++) {
        for (a = 0; a < td; a++) {
            div = document.createElement("div");
            div.setAttribute("class", "grid-item");
            div.setAttribute("id", idY + ":" + idX);
            div.setAttribute("ondrop", "drop(event)");
            div.setAttribute("ondragover", "allowDrop(event)");
            gridHaupt.appendChild(div);
            idX++;
        }
        idY++;
        idX = 1;

    var xml = new XMLHttpRequest();
    var count = 0;
    xml.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // Typical action to be performed when the document is ready:
            var list = xml.responseText;
            list = "[" + list + "]";
            for(i = 0; i < list.length; i++) {
                if (list[i]=="{") {
                    count++
                }
            }
            programList = eval(list);
            for(i = 0; i < count; i++) {
                var img = document.createElement("img");
                var position = document.getElementById(programList[i]["posi"]);
                img.setAttribute("class","CKS-Desktop-img");
                img.setAttribute("src","./C/Program/"+programList[i]["icon"]);
                img.setAttribute("id",programList[i]["id"]);
                img.setAttribute("draggable","true");
                img.setAttribute("ondragstart","drag(event)");
                position.appendChild(img);  
            }
            console.log(count)
            console.log(programList);
        
        }
    };
    xml.open("GET", "./Programlist.CKS-Info", true);
    xml.send();



    }
 
Werbung:
Zurück
Oben