When resizing the page, I'm facing an issue where the links overlap with the images in a flexbox layout. It seems like the padding and margin between the images and links are not working due to them not being "related" or connected. I believe I need to use specific position commands to make them related, but I'm unsure how to proceed.
const chapter1 = [];
for (let i = 1; i <= 49; i++){
chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}];
const chapter3 = [{src: '../images/maps/64.jpg'}];
const chapter4 = [{src: '../images/maps/98.jpg'}];
// Function to display images for the chosen chapter
function showImages(chapter) {
const img_list = document.getElementById('imageList');
img_list.replaceChildren();
// Loop through the images in the selected chapter
chapter.forEach(image => {
const li = document.createElement('li');
const img = new Image();
img.src= image.src;
img.alt=image.alt;
li.append(img);
const span = document.createElement('span');
span.textContent = "Image";
li.append(span);
img_list.appendChild(li);
});
}
// Add click event to the Chapter 1 link
document.querySelector('#chapter1').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter1);
});
// Add click event to the Chapter 2 link
document.querySelector('#chapter2').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter2);
});
document.querySelector('#chapter3').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter3);
});
document.querySelector('#chapter4').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter4);
});
window.onload = function(){
document.body.style.opacity = 1
showImages(chapter1);
}@charset "utf-8";
/* CSS Document */
body {
background-image: url("../images/background-maps.jpg");
background-repeat: no-repeat;
background-size: cover;
padding:0;
margin:0;
opacity: 0;
transition: opacity 1s;
/*animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;*/
}
/*@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
.menu{
background-color: rgba(255,255,255,0.5);
justify-content: center;
display: flex;
margin: 0 auto;
width:55%;
height: 100%;
padding:10px;
position: relative;
}
.menu ul{
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu li{
width: 20%;
min-width: 200px;
margin: 15px;
text-align: center;
}
.menu img{
width: 100%;
height: 100%;
object-fit: cover;
}
.menu li span{
padding: 5px;
}
a{
font-size: 20px;
font-weight: 200;
padding:5px;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 75px;
text-align: center;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
margin: auto;
padding: 5px;
}
.mappages{
padding: 5px;
position: absolute;
top: 8px;
left: 16px;
} <header>
<h1>Map Gallery</h1>
</header>
<div class="menu">
<ul id="imageList"></ul>
<div class="mappages">
<a href="#" id="chapter1">Chapter 1</a>
<a href="#" id="chapter2">Chapter 2</a>
<a href="#" id="chapter3">Chapter 3</a>
<a href="#" id="chapter4">Chapter 4</a>
</div>
</div>