#Elements overlaping when i dont want them to

4 messages · Page 1 of 1 (latest)

azure belfry
# 
.element{
    width:65px;
    height:65px;
    background:white;
    position:relative;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins',sans-serif;
    border: 1px solid black;
}

.atomic_number {
    position: absolute;
    font-size: 8;
    text-align: center;
    vertical-align: top;
    text-align: left
}

.symbol {
    position: absolute;
    font-size: 12;
    text-align: center;
    vertical-align:middle;
    text-align: right;
}

CSS for the alignment and style of the cells

# 
<!DOCTYPE html>
<link rel="stylesheet" href="../CSS/PeriodicTableStyle.css">
<body>
    <div class="MainTable"></div>

    <div class="RareEarth"></div>
</body>
<script type="module" src="../Javascript/PeriodicTable.js"></script>

HTML Document

# 
function makeGrid(className,table,start,end){
    for(let i = start;i<= end; i++){
        let currentEle = elementsData[i]
        let element = document.createElement("div")
        console.log(currentEle.number + " " +  currentEle.symbol)
        element.className = className
        element.innerHTML = `
        <span class="atomic_number">${currentEle.number}</span>
        <span class="symbol">${currentEle.symbol}</span>
        
        `
        table.appendChild(element)
    }
}

Function that fills the cells in Javascript

final radish
#

Oooh that’s a fun project