Should the text underneath the image be placed above the rest of the images?

In the process of developing my game, I encountered a challenge where text needs to be dragged under specific images. To achieve this, I envision creating tabs below the images for the text to be dragged onto.

My initial approach involved wrapping each image in a div and nesting another div within it for the tab. In CSS, I styled the tab's height to be 25px. However, the tab is not aligning properly under the image within the same div; instead, it appears above other images in that row.

This visual representation illustrates the issue: http://prntscr.com/9yv7m8. The red space demonstrates where the tab should sit beneath the pictures.

I am seeking guidance on how to rectify this situation effectively. Below is the relevant section of my code:

  • CSS: 
    body, html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}
header {
  height: 5%;
  border-bottom: thick solid grey;
}
footer {
    height: 5%;
    border-top: thick solid grey;
}
.points {
    float: right;
}
.container {
  width: 100%;
  height: 90%;
}
.plaatje {
  width: 100px;
  height: 100px;
}
.plaatje2 {
  float: left;
  width: 25%;
}
.igen {
  font-size: 25px;
  font-weight: bold;
}
.sprint {
  float: right;
}
.copyright {
  position: relative;
  bottom: 20px;
  left: 65px;
  font-size: 10px;
}
.img {
  width: 25%;
  height: 25%;
  float: left;
}
.img2 {
  width: 25%;
  height: 25%;
  float: left;
}
.answer {
  height: 25px;
}
  • HTML: 
    • 




        

		
htmlcssimagetabs

      

    

  


   
     
       
         
           
Answer №1
           


Could this be what you're searching for?



<html>
<title>example</title>
<head>
</head>
<body>
    <style>
    .top{background-color: #900; width: 100%; height: 100px;}
    .middle{background-color: #090; width: 100%; height: 600px; float: left;}
    .sidebar{background-color: #ccc; width: 10%; height: 600px; float: left;}
    .container{background-color: #000; width: 90%; height: 600px; float: left;}
    .row{background-color: #fff; width: 100%; height: 100px; float: left;}
    .footer{background-color: #090; width: 100%; height: 100px; float: left;}
    .slice{background-color: #069; width: 33%; height: 100px; float: left;}
    </style>
    <div class="top">top</div>
    <div class="middle">
        <div class="sidebar">sidebar</div>
        <div class="container">
            <div class="row">
                <div class="slice">1</div>
                <div class="slice">2</div>
                <div class="slice">3</div>
            </div>
            <div class="row">
                <div class="slice">1</div>
                <div class="slice">2</div>
                <div class="slice">3</div>
            </div>
            <div class="row">
                <div class="slice">1</div>
                <div class="slice">2</div>
                <div class="slice">3</div>
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</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

      

    

  



  

    

      

        
        
Discover the Ultimate Guide on Altering the Course of Mega Menu!

        
I am working on a mega menu that is set to display in the usual direction. However, for the last two items, I would like them to appear from the button upwards. I'm not quite sure how to explain it.
What I envision is something similar to this: ...

		
htmlcss

      

    

  



  

    

      

        
        
Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

        
I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists.

What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

		
phpjavascriptmysqlhtmlajax

      

    

  



  

    

      

        
        
Adjust text size automatically to fit into a container with a fixed size

        
Looking to dynamically adjust the font size of user-entered text to fit within a fixed-size div. The goal is to have the text fill the box as much as possible.

For example, if the div is 400px x 300px and the user enters "ABC", the font will be very large ...

		
jqueryhtmlcss

      

    

  



  

    

      

        
        
Difficulty with Flexbox in Internet Explorer 11 when utilizing a Bootstrap .badge element

        
At the moment, I am dealing with a flex-row that contains an element that grows with the available space and a badge that should be aligned to the end without growing. However, when using flex-grow: 0 in IE11, the span.badge does not even take up the width ...

		
cssflexboxinternet-explorer-11bootstrap-4

      

    

  



  

    

      

        
        
Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

        
Hello everyone, I hope you are doing well!

I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler.

While the toggler is functioning properly, I am having trouble making it fill the full width o ...

		
javascripthtmlcssnavbarbootstrap-5

      

    

  



  

    

      

        
        
I am looking to incorporate a 10 px border at the top of my column by utilizing bootstrap4

        
How can I add a border to the top of my column using Bootstrap 4? I've been struggling with it and can't seem to get it right. Here is the code I'm currently using, which includes <div> tags for the columns:



<!doctype html>
&l ...

		
htmlcssbootstrap-4

      

    

  



  

    

      

        
        
Python code to extract text data from a table using XPath

        
Recently, I've been using requests and lxml to develop a simple API that can fetch a timetable from a specific website. However, being new to this, I'm struggling to extract any information beyond the hours.

Despite experimenting with xpath code ...

		
pythonhtmlapixpathrequest

      

    

  



  

    

      

        
        
Implementing various style guidelines for distinct elements

        
Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows:

#slide ul,li{
float:left;
list-style-type:none;
}

Now, I am attempting to introduce another unordered list t ...

		
htmlcsscss-selectorshtml-lists

      

    

  



  

    

      

        
        
Animating or transitioning CSS keyframes to an inline value when the page is initially loaded

        
In my current project, I am working on creating HTML and CSS-based bar representations of percentage values. The structure of the code is as follows:

Using HTML:

<div class="chart">
  <div class="bar" style="width:43%"></div>
</div&g ...

		
jquerycsscss-transitionscss-animations

      

    

  



  

    

      

        
        
Mobile site experiencing owl.carousel responsiveness issues after refreshing the page

        
I am currently working on a website located at . On the homepage, right after the slider, there is a carousel of three info boxes. However, in mobile view (developer mode), after a hard refresh or viewing the link on an actual mobile device, it displays a ...

		
javascripthtmlcss

      

    

  



  

    

      

        
        
Discover the secret to accessing restaurant menus with Foursquare by utilizing file_get_contents on the designated menu URL

        
I am encountering an issue with retrieving all the menus for a specific venue ID using the Foursquare API. As a workaround, I have opted to fetch menu details by utilizing 'file_get_contents' from the following menu URL:

Snippet of Code :

$menu ...

		
phphtmlxpathdomdocument

      

    

  



  

    

      

        
        
Reactjs Rendering problem with retrieving data from the backend in a popover

        
Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v

My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

		
javascripthtmlcssreactjsantd

      

    

  



  

    

      

        
        
Engaging 3D Object with JavaScript Interactivity

        
I'm currently working on a project for my HCI assignment where I need to create an interactive Sphere using JavaScript. However, I am new to JavaScript and Three.js.

My goal is to have the sphere display statistics of a specific subject when clicked. ...

		
javascripthtmlthree.js

      

    

  



  

    

      

        
        
"Utilizing margins to create space between elements within a Bootstrap

        
I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner:

<div class="container">

  <div class="row">
    <div class="card col-md-4 col-sm-6 col-12 item-wr"  *ngFor="let item of items"> ...

		
htmlcsstwitter-bootstrapangularbootstrap-4

      

    

  



  

    

      

        
        
"Short-term" variation not appearing within the Material-ui Drawer component

        
I am attempting to create a responsive drawer component using material-ui, where it is toggleable on smaller screens and remains open on desktop.

Following the mui documentation, I added the temporary variant to the drawer, but it does not display in desk ...

		
htmlcssreactjsmaterial-ui

      

    

  



  

    

      

        
        
What is causing the div to not update until the for loop is completed?

        
I have an HTML page where I am trying to update a div while a for loop is running. However, the div does not update until after the loop finishes. Why is this happening?
        <!DOCTYPE html>
        <html>
        <body> ...

		
htmlloopsdisplay

      

    

  



  

    

      

        
        
Creating a CSS3 Grid Layout with a Fixed Header

        
I'm having some trouble creating a layout using CSS Grid. My goal is to make the header element 'sticky', so that it remains fixed at the top of the viewport while other content scrolls up and underneath it. Additionally, I want to add a bac ...

		
htmlcssgrid

      

    

  



  

    

      

        
        
When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

        
For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

		
javascriptcss

      

    

  



  

    

      

        
        
How can I preselect an item in a dropdown list in HTML using the result of an SQL query

        
Is this the correct method for setting a default value in an HTML drop down menu?

The variable $vendor_name is determined by retrieving an array of results through a query, which is then looped to generate table rows in HTML. Consequently, the value of $v ...

		
phphtmlmysqli

      

    

  



  

    

      

        
        
A dynamic Java web framework that combines RESTful JSON services with the power of HTML5 and jQuery AJAX functionality

        
As we approach the year 2013, the era of HTML5, jQuery has solidified itself as the go-to standard for web Javascript development.

Back in 2010, this link was quite popular:

I am searching for a Java web framework that can expose domain classes through R ...

		
javajqueryjsonhtmlrest