I have a web page that draws cards and displays text. The text and images overlap.
I can't figure out how to make them not overlap with FlexBox, grid CSS.
var obj;$(document).ready(function() { var url = "https://clearlightdoor.com/s3cards"; $("#save_file").css("visibility", "hidden"); // Use $.ajax instead of $.getJSON to handle asynchronous loading $.ajax({ url: url, dataType: 'json', success: function(data) { obj = data['AllData']; for (var i = 0; i < obj.length; i++) { if (i == 0) { var td_data = obj[i]["img"]; $("#tenth-card").append(td_data); } else if (i == 1) { var td_data = obj[i]["img"]; $("#nineth-card").append(td_data); } else if (i == 2) { var td_data = obj[i]["img"]; $("#eighth-card").append(td_data); } else if (i == 3) { var td_data = obj[i]["img"]; $("#seventh-card").append(td_data); } else if (i == 4) { var td_data = obj[i]["img"]; $("#sixth-card").append(td_data); } else if (i == 5) { var td_data = obj[i]["img"]; $("#fifth-card").append(td_data); } else if (i == 6) { var td_data = obj[i]["img"]; $("#fourth-card").append(td_data); } else if (i == 7) { var td_data = obj[i]["img"]; $("#third-card").append(td_data); } else if (i == 9) { var td_data = obj[i]["img"]; $("#first-card").prepend(td_data); } } } }); var inc = 10; $("#next_btn").click(function() { inc = inc - 1; if (inc == 9) { $("#first-card").css("visibility", "visible"); $("#start_text").remove(); var first_text = obj[9]["line"]; $("#card_text").append(first_text); } else if (inc == 8) { // $("#second-card").css("visibility", "visible"); var second_data = obj[8]["img"]; $("#first-card").append(second_data); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 7) { $("#third-card").css("visibility", "visible"); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 6) { $("#fourth-card").css("visibility", "visible"); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 5) { $("#fifth-card").css("visibility", "visible"); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 4) { $("#sixth-card").css("visibility", "visible"); } else if (inc == 3) { $("#seventh-card").css("visibility", "visible"); } else if (inc == 2) { $("#eighth-card").css("visibility", "visible"); } else if (inc == 1) { $("#nineth-card").css("visibility", "visible"); } else if (inc == 0) { $("#tenth-card").css("visibility", "visible"); $("#save_file").css("visibility", "visible"); } });});$("#save_file").click(function() { var html_save = "<html><body><table>"; for (var i = 0; i < obj.length; i++) { html_save += "<tr style='height: 215px;'><td valign='top'>"+ obj[i]["line"] +"</td><td>"+ obj[i]["img"] +"</td></tr>"; } html_save += "</table></body></html>"; var hiddenElement = document.createElement('a'); hiddenElement.href = 'data:attachment/text,'+ encodeURI(html_save); hiddenElement.target = '_blank'; hiddenElement.download = 'tarot_reading.html'; hiddenElement.click();});/* this page uses CSS grid and FlexBox to control layout */ body { font-family: 'Old Standard TT', serif; background-color: #1c1c1c; color: #d4af37; font-size: 1.2em; background-image: url("https://tarotcardsstyles.s3.us-west-2.amazonaws.com/pattern8-pattern53b.jpg"); background-repeat: repeat; } #card, #absolute { transition: all 0.3s ease; border: 2px solid #d4af37; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } a { color: #d4af37; text-decoration: none; } a:hover, a:active { color: #fff; } a:visited { color: #d4af37; } .button { color: #d4af37; font-family: 'Old Standard TT', serif; text-decoration: none; border: 2px solid #d4af37; padding: 5px 10px; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; } /* the rotate id is on the image which comes from the json. generate_ai_tarot_reading.py makes the json. */ #rotate { transition: all 0.3s ease; border: 2px solid #d4af37; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); margin-left: auto; margin-right: auto; z-index: 1; position: relative; left: -120px; } button { text-decoration: none; color: #d4af37; background: rgba(0, 0, 0, 0.7); padding: 7px 14px; border: 2px solid #d4af37; border-radius: 5px; font-family: 'Old Standard TT', serif; font-size: 1em; margin-bottom: 20px; } .content-container { display: flex; flex-direction: column; align-items: center; margin-top: 0; } .start-text { text-align: center; margin-bottom: 20px; } .grid-container { display: flex; justify-content: center; margin-top: 200px; } .grid-item { padding: 10px; } .card-container { display: flex; justify-content: center; margin-top: 20px; } .card-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; position: relative; } .text-container { margin-top: 20px; text-align: center; } .reading-grid { display: flex; flex-direction: column; gap: 10px; } .button-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } #card_text { top: 400%; left: 100%; display: flex; } #first-card { position: relative; } #second-card, #third-card, #fourth-card, #fifth-card, #sixth-card, #seventh-card, #eighth-card, #nineth-card, #tenth-card { position: absolute; visibility: collapse; width: 100%; height: 100%; } #second-card { top: 50%; left: 50%; } #third-card { top: 100%; left: 0; display: flex; } #fourth-card { top: 0; left: -100%; } #fifth-card { top: -100%; left: 0; } #sixth-card { top: 0; left: 100%; } #seventh-card { top: 200%; left: 300%; } #eighth-card { top: 100%; left: 300%; } #nineth-card { top: 0; left: 300%; } #tenth-card { top: -100%; left: 300%; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><div class="button-container"><button id="next_btn" style="border:1px solid black;">Next</button><br><button id="save_file" style="visibility:collapse; border:1px solid black;">Save reading to file</button></div><div class="content-container"><div id="start_text" class="start-text">Think about a question you have or a situation you would like to know more about or just let yourself go still inside for a moment and click Next to begin and draw cards.</div><div class="grid-container"><div class="grid-item"><div class="card-grid"><div id="first-card" style="visibility: collapse"><div id="second-card" style="visibility: collapse"></div><div id="third-card" style="visibility: collapse"></div><div id="fourth-card" style="visibility: collapse"></div><div id="fifth-card" style="visibility: collapse"></div><div id="sixth-card" style="visibility: collapse"></div><div id="seventh-card" style="visibility: collapse"></div><div id="eighth-card" style="visibility: collapse"></div><div id="nineth-card" style="visibility: collapse"></div><div id="tenth-card" style="visibility: collapse"></div></div></div></div></div><div id="card_text"></div></div><div id="card_text"></div> is the text div that is overlapping with the images.
<html lang="en"><head><meta charset="UTF-8"><meta name="description" content="Tarot Card game featuring Celtic cross spread. The game text was partially generated by claude-3-opus-20240229"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><title>The Clear Light Door</title><link rel="icon" type="image/x-icon" href="https://tarotcardsstyles.s3.us-west-2.amazonaws.com/favicon.ico"><style> /* this page uses CSS grid and FlexBox to control layout */ body { font-family: 'Old Standard TT', serif; background-color: #1c1c1c; color: #d4af37; font-size: 1.2em; background-image: url("https://tarotcardsstyles.s3.us-west-2.amazonaws.com/pattern8-pattern53b.jpg"); background-repeat: repeat; } #card, #absolute { transition: all 0.3s ease; border: 2px solid #d4af37; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } a { color: #d4af37; text-decoration: none; } a:hover, a:active { color: #fff; } a:visited { color: #d4af37; } .button { color: #d4af37; font-family: 'Old Standard TT', serif; text-decoration: none; border: 2px solid #d4af37; padding: 5px 10px; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; } /* the rotate id is on the image which comes from the json. generate_ai_tarot_reading.py makes the json. */ #rotate { transition: all 0.3s ease; border: 2px solid #d4af37; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); margin-left: auto; margin-right: auto; z-index: 1; position: relative; left: -120px; } button { text-decoration: none; color: #d4af37; background: rgba(0, 0, 0, 0.7); padding: 7px 14px; border: 2px solid #d4af37; border-radius: 5px; font-family: 'Old Standard TT', serif; font-size: 1em; margin-bottom: 20px; } .content-container { display: flex; flex-direction: column; align-items: center; margin-top: 0; } .start-text { text-align: center; margin-bottom: 20px; } .grid-container { display: flex; justify-content: center; margin-top: 200px; } .grid-item { padding: 10px; } .card-container { display: flex; justify-content: center; margin-top: 20px; } .card-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; position: relative; } .text-container { margin-top: 20px; text-align: center; } .reading-grid { display: flex; flex-direction: column; gap: 10px; } .button-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } #card_text { top: 400%; left: 100%; display: flex; } #first-card { position: relative; } #second-card, #third-card, #fourth-card, #fifth-card, #sixth-card, #seventh-card, #eighth-card, #nineth-card, #tenth-card { position: absolute; visibility: collapse; width: 100%; height: 100%; } #second-card { top: 50%; left: 50%; } #third-card { top: 100%; left: 0; display: flex; } #fourth-card { top: 0; left: -100%; } #fifth-card { top: -100%; left: 0; } #sixth-card { top: 0; left: 100%; } #seventh-card { top: 200%; left: 300%; } #eighth-card { top: 100%; left: 300%; } #nineth-card { top: 0; left: 300%; } #tenth-card { top: -100%; left: 300%; }</style></head><body><div class="button-container"><button id="next_btn" style="border:1px solid black;">Next</button><br><button id="save_file" style="visibility:collapse; border:1px solid black;">Save reading to file</button></div><div class="content-container"><div id="start_text" class="start-text">Think about a question you have or a situation you would like to know more about or just let yourself go still inside for a moment and click Next to begin and draw cards.</div><div class="grid-container"><div class="grid-item"><div class="card-grid"><div id="first-card" style="visibility: collapse"><div id="second-card" style="visibility: collapse"></div><div id="third-card" style="visibility: collapse"></div><div id="fourth-card" style="visibility: collapse"></div><div id="fifth-card" style="visibility: collapse"></div><div id="sixth-card" style="visibility: collapse"></div><div id="seventh-card" style="visibility: collapse"></div><div id="eighth-card" style="visibility: collapse"></div><div id="nineth-card" style="visibility: collapse"></div><div id="tenth-card" style="visibility: collapse"></div></div></div></div></div><div id="card_text"></div></div></body><script>/*global $*/var obj;$(document).ready(function() { var url = "https://clearlightdoor.com/s3cards"; $("#save_file").css("visibility", "hidden"); // Use $.ajax instead of $.getJSON to handle asynchronous loading $.ajax({ url: url, dataType: 'json', success: function(data) { obj = data['AllData']; for (var i = 0; i < obj.length; i++) { if (i == 0) { var td_data = obj[i]["img"]; $("#tenth-card").append(td_data); } else if (i == 1) { var td_data = obj[i]["img"]; $("#nineth-card").append(td_data); } else if (i == 2) { var td_data = obj[i]["img"]; $("#eighth-card").append(td_data); } else if (i == 3) { var td_data = obj[i]["img"]; $("#seventh-card").append(td_data); } else if (i == 4) { var td_data = obj[i]["img"]; $("#sixth-card").append(td_data); } else if (i == 5) { var td_data = obj[i]["img"]; $("#fifth-card").append(td_data); } else if (i == 6) { var td_data = obj[i]["img"]; $("#fourth-card").append(td_data); } else if (i == 7) { var td_data = obj[i]["img"]; $("#third-card").append(td_data); } else if (i == 9) { var td_data = obj[i]["img"]; $("#first-card").prepend(td_data); } } } }); var inc = 10; $("#next_btn").click(function() { inc = inc - 1; if (inc == 9) { $("#first-card").css("visibility", "visible"); $("#start_text").remove(); var first_text = obj[9]["line"]; $("#card_text").append(first_text); } else if (inc == 8) { // $("#second-card").css("visibility", "visible"); var second_data = obj[8]["img"]; $("#first-card").append(second_data); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 7) { $("#third-card").css("visibility", "visible"); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 6) { $("#fourth-card").css("visibility", "visible"); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 5) { $("#fifth-card").css("visibility", "visible"); $("#card_text").text(""); $("#card_text").append(obj[inc]["line"]); } else if (inc == 4) { $("#sixth-card").css("visibility", "visible"); } else if (inc == 3) { $("#seventh-card").css("visibility", "visible"); } else if (inc == 2) { $("#eighth-card").css("visibility", "visible"); } else if (inc == 1) { $("#nineth-card").css("visibility", "visible"); } else if (inc == 0) { $("#tenth-card").css("visibility", "visible"); $("#save_file").css("visibility", "visible"); } });});$("#save_file").click(function() { var html_save = "<html><body><table>"; for (var i = 0; i < obj.length; i++) { html_save += "<tr style='height: 215px;'><td valign='top'>" + obj[i]["line"] +"</td><td>" + obj[i]["img"] +"</td></tr>"; } html_save += "</table></body></html>"; var hiddenElement = document.createElement('a'); hiddenElement.href = 'data:attachment/text,'+ encodeURI(html_save); hiddenElement.target = '_blank'; hiddenElement.download = 'tarot_reading.html'; hiddenElement.click();}); </script></html>