Position text beneath a collection of visuals

I've been working on a page layout where I have a menu with images aligned in a ul. However, when I try to add text under each image, the text ends up misaligned all the way to the right of the menu. I'm considering starting from scratch without using JavaScript and just implementing the images directly in the HTML file. After spending 10 hours straight on designing my website and learning new things, I might be too tired to figure this out. Any assistance would be greatly appreciated.

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map Gallery</title>
        <link rel="stylesheet" href="stylemaps.css">
    </head>

    <body onload="document.body.style.opacity='1'">

        <header>
            <h1>Map Gallery</h1>
        </header>
        
        
        <div class="menu">
            <ul id="imageList"></ul>
            
        </div>
        <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>

        
        <script src="fadeAnim.js"></script>
        <script src="mapscript.js"></script>
    </body>
</html>

CSS styles:

@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;

}

.menu{
    background-color: rgba(255,255,255,0.5);
    
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    width:55%;
    height: 100%;

 
}


.menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu li{
    width: 20%;
    min-width: 200px;
    margin: 10px;
    text-align: center;
    
}

.menu img{
    width: 100%;
    height: 100%;
    object-fit: cover;
   
    
}



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

JavaScript:

// JavaScript code here
javascripthtmlcssimagemenu

Answer №1

Welcome to the coding world @ginger! I have made some edits and placed the sample text below the image.

const chapter1 = [{src: 'https://images.unsplash.com/photo-1558383331-f520f2888351?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'},
{src: 'https://images.unsplash.com/photo-1558383331-f520f2888351?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}];
/*for (let i = 1; i <= 49; i++){

chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}*/
const chapter2 = [{src: 'https://images.unsplash.com/photo-1616020453784-a24fa9845b05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}]; //not used yet
const chapter3 = [{src: 'https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}]; //not used yet
const chapter4 = [{src: 'https://images.unsplash.com/photo-1612528443702-f6741f70a049?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}]; //not used yet

// Function to showcase images for the chosen chapter
function showImages(chapter) {
    
    const img_list = document.getElementById('imageList');
    img_list.replaceChildren();// equal to innerHtml = '';
    // 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 Title";
      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;
    align-items: center;
    margin: 0 auto;
    width:55%;
    height: 100%;
    padding:10px;
 
}


.menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu li{
    width: 20%;
    min-width: 200px;
    margin: 15px;
    text-align: center;
    
}
.menu li span{
  padding:5px;
}
.menu img{
    width: 100%;
    height: 100%;
    object-fit: cover;
   
    
}
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;
}
.mappages{
  padding:5px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map Gallery</title>
        <link rel="stylesheet" href="stylemaps.css">
    </head>

    <body onload="document.body.style.opacity='1'">

        <header>
            <h1>Map Gallery</h1>
        </header>
        
        
        <div class="menu">
            <ul id="imageList"></ul>
            
        </div>
        <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>

        
        <script src="fadeAnim.js"></script>
        <script src="mapscript.js"></script>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you provide me with some insight on the process of iterating through an object utilizing the

I've developed an app that randomly plays a sound from a selected array when a button is pressed. Now, I want to add the functionality to display and play all sounds in the array upon request. I've explored various methods such as for loops and ...

javascriptreactjs

Form a tree structure using a compressed object

I’m struggling with a specific issue: I have an object structured like this: Object { id: string; parentId: string; } What I’m aiming for is a nested object structure like this: NestedObject { id: string; parentId: string; children: [ { ...

javascripttypescript

Challenges with Expanse in Object-Oriented JavaScript

I'm currently working on incorporating objects from a JSON file into an array within my JavaScript object using the $.getJSON() function in jQuery. However, I've encountered scope challenges where the array elements appear to be defined inside th ...

javascriptjqueryjsonoop

Angular 2 decorators grant access to private class members

Take a look at this piece of code: export class Character { constructor(private id: number, private name: string) {} } @Component({ selector: 'my-app', template: '<h1>{{title}}</h1><h2>{{character.name}} detai ...

javascriptangularjstypescriptangular

Unable to set the opacity of rc-tooltip to 1

Despite customizing our tooltips with CSS, we are still experiencing an issue where the tooltips appear translucent rather than having an opacity of 1. This is evident in the image provided (with text visible in the background): https://i.sstatic.net/nlM ...

cssreactjstypescripttooltip

Interact with elements across multiple SVG files using HTML

I have a website that consists of three SVGs. I am now looking to connect elements in these different SVGs by drawing simple lines between them. My goal is to create a line from element1 (#element1) in svg1 to element6 in svg2. Unfortunately, I am unable ...

javascriptjqueryhtmlcsssvg

I am having an issue where my Bootstrap 4 col-sm-6 rows are not properly stacking on mobile devices

Currently facing issues with Bootstrap 4 as my columns are not stacking on top of each other in mobile view. I have two col-sm-6 within each row. Any guidance on how to resolve this would be greatly appreciated, thank you! Feel free to visit the website a ...

htmlcssbootstrap-4responsive

The function PageMethods is not recognized

On my webpage with a MasterPage, the master page contains the following code: <ajaxToolkit:ToolkitScriptManager ID="scriptManager" runat="server" AsyncPostBackTimeout="99999999" ...

javascriptasp.netajaxpagemethods

Exploring the wonders of Ajax with different endpoints for retrieving data

On our server, we have an endpoint set up like this: app.get('/A/:A_Id/B/:B_Id/C?', callbackFunction); When I enter the URL "http://xx.xx.xx.xx:3000/A/1/B/1/C?startTimeUtc=03:00:00&endTimeUtc=05:00:00", the server successfully returns data ...

javascriptjquerynode.jsajax

The merging of $.each operations

Is it possible to combine multiple jQuery functions used to assign and change classes and IDs on elements into a single function rather than having separate functions for each? I am currently using the $.each function in jQuery. var stored = $.each; va ...

javascriptjquery

Removing characters from a C# string that fall between two specified characters

As an illustration, let's consider a string such as: "//DeleteFromHere <div> <p>my name is John I want to delete this div </p> </div> //DeleteToHere" In this case, I intend to use //DeleteFromHere as the starting ...

c#htmlasp.netstring

What happens when data is shared between two PHP files and then deleted?

Working on a PHP form where users input data. If a field is left blank, I aim to retain the information entered in other fields and prompt them to only fill in the missing one. Currently, I have two primary files set up for this task. <?php $name = ...

phphtmlformsvalidation

JS if clause fails to return true as expected

Here is my setup: <div id="user_input">...</div> And a button: <input type="button" id="panel_button">...</button> Using a selector: function $(id) { return document.querySelector(id); } With an event handler: var button_ ...

javascripthtmlcssanimation

Concatenating an unlimited amount of arrays containing Javascript objects

I currently have an array of Groups where each Group contains multiple Users. My goal is to retrieve all the unique Users associated with a given array of Groups. Here is my current approach: let actor = await User.query().findById(req.user.id).eager( ...

javascriptarraysnode.jsexpressconcatenation

Highlight text when hovered over after a delay of X seconds

I have a question about implementing a feature where when a user hovers over any word in a text for two seconds, it will automatically become underlined. If the user clicks on the word, it will remain underlined until they click outside of the text or cl ...

javascriptjquerydommootools

Transition effects in CSS when hovering

I've run into an issue where I'm attempting to create a hover transition effect on a div when the mouse hovers over it. The idea is that hovering over the main div should trigger another div to appear above it, with a smooth transitioning effect. ...

htmlcss

Arranging div blocks in columns that are seamlessly aligned

I am dealing with a situation where I have several boxes or blocks arranged in a 3-column layout. These boxes are styled using properties like float: left, width: 33%, but they have varying heights. Is there a way to make sure that the boxes always fill i ...

jqueryhtmlcssgrid-layout

Retrieve the div element using the jQuery selector for both the id and class

This is the structure I have set up: <div id="list_articles"> <div id="article"> <label>Select:</label><input type="checkbox" class="checked_art" id="1001" /> <div id="hide" style="display:none;" class="1001"> ...

jqueryclasshtmlshow

Issues with Angularjs $http.get functionality

On the server side of my ASP.net MVC application, I have a method that looks like this: [HttpGet] public JsonResult GetTrenings(string treningId) { var tempId = Guid.Parse(treningId); var trening = TreningService.GetTreningById ...

javascriptasp.net-mvcangularjshttp-get

Content involving Three.js Meshes and Geometries

I'm a beginner in Three.js and I was wondering if there is a way to extract separate elements or shells from a Mesh or Geometry object? If there isn't a built-in method for this, how might one go about creating a function to identify and detach ...

javascriptthree.js3d-modellingcsg