Placing text and an image within a grid cell does not automatically stack them on top of each other

I have a large div with a grid display, consisting of 3 rows and 2 columns.

I am attempting to include text directly below the photo within each cell.

This is what my code looks like:

          <div class="arrange-fixes">

                <div class="categories">
                    <div id="operating-systems"> </div>
                    <p>Operating system installation and optimization</p>
                </div>


                    <div class="categories"></div>
                    <div class="categories"></div>
                    <div class="categories"></div>
                    <div class="categories"></div>
                    <div class="categories"></div>
                    
                </div>

  .arrange-fixes{
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     min-height:800px;
     width: 550px;

     justify-items: center;
     align-items: center;
 }

 .categories{
     display: grid;
     //background-color: lime;
     width: 225px;
     height: 162px;

     border-radius: 15px;    
     border-width: 5px;
     border-style: double;
     border-color: #85c236;

     box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);

     background-image: url("/images/fixes/windows.jpg");
     background-position: center;
     background-size: contain;
 }

I want the text to be displayed underneath the picture within my div, not on top of it. Can anyone help me achieve this?

htmlcss

Answer №1

Could you kindly include the .categories class with a position:relative style property?

.categories p{
  position: absolute;
  bottom:0;
  right: 0;
}


.arrange-fixes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  min-height:800px;
  width: 550px;
  justify-items: center;
  align-items: center;
}

.categories {
    display: grid;
    /* background-color: lime; */
    width: 225px;
    height: 162px;
    position: relative;

    border-radius: 15px;    
    border-width: 5px;
    border-style: double;
    border-color: #85c236;

    box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);
    background-image: url("/images/fixes/windows.jpg");
    background-position: center;
    background-size: contain;


}

.categories p{
  position: absolute;
  bottom:-75px;
  right: 0;
}
<div class="arrange-fixes">
      <div class="categories">
        <div id="operating-systems"></div>
        <p>Operating system installation and optimization</p>
      </div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
 </div>

Perhaps this snippet will be useful for working with Flexbox

*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}


body {
  min-height: 100vh;
  background-color: #999;
  margin: 0;
}

.container{
max-width: 900px;
display: flex;
flex-direction: column;
margin: 0 auto;
justify-content: center;
align-items: center;
}

.box-1{
  background-color: greenyellow;
  width:100%;
  height:20rem;
}

.box-2{
  background-color: blueviolet;
  width: 100%;
  color:white;
  font-size: 2rem;
  text-align: end;
}
<div class="container">
      <div class="box-1"></div>
      <div class="box-2">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
</div>

Answer №2

Hey there, thank you for clearly explaining your issue. You can easily resolve it by using the following code:

.categories{
     display: grid;
     background-color: lime;
     width: 150px;
     height: 250px;

     border-radius: 15px;    
     border-width: 5px;
     border-style: double;
     border-color: #85c236;

     box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);

     background-image: url("/images/fixes/windows.jpg");
     background-position: center;
     background-size: contain;
 }

   figure img{
            width: 100%;
      }
      figure{
            text-align: center;
      }

Here is how to implement it in HTML:

<div id="operating-systems"> 
            <figure>
                  <figcaption>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</figcaption>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/2214px-How_to_use_icon.svg.png" alt="">
            </figure>
</div>

Remember to place the figure caption above the img tag as shown and ensure the dimensions of your image and div are calculated correctly.

If you want your image to be the full background of your div element, use this CSS code:

#operating-systems{
                  background: url(https://iconstore.co/assets/img/set/thumb/unoline-gallery.png);
                  background-position: bottom;
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-clip: padding-box;
                  background-origin: content-box;
                  padding: 15px;
            }

After applying this code, you can use a p tag within your div and your text will appear at the top. I hope this solution works for you :)

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

I am attempting to create a stylish border for the .navbar-collapse element, but unfortunately, my efforts have been unsuccessful so far

I need assistance with adding a border around my mobile drop-down menu. I've tried using .navbar-collapse but it's not working. Any suggestions? Here is a sample image of the mobile size: Below is my code: <nav class="navbar navbar-default ...

htmlcsstwitter-bootstrapborder

Activate the clicked tab in the Bootstrap navbar when selected

I have gone through similar posts, but I am unable to get mine to work. My goal is to activate the clicked tab. Here is what my bootstrap navbar looks like in HTML: <div class="navbar navbar-default" role="navigation"> <div class="container" ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-3

Experience the full functionality of Google Maps API without the need for jQuery or PHP with PanTo

I'm not a developer and I find myself stuck in the panTo() function. All I want is to execute this function with an if-else statement without having to reload the Google Map or using jQuery. <body> <div id="map"></div> <d ...

javascripthtmlcss

compress a website to display advertisement

Here is a JSFiddle link I would like to share with you: I am currently working on squeezing the webpage to display an ad on the right side. http://jsfiddle.net/5o6ghf9d/1/ It works well on desktop browsers, but I am facing issues with iPad Safari/Chrome ...

javascripthtmlcss

What is the best way to retrieve the href and id values dynamically from a card in React JS?

Hello everyone, I'm new to stackoverflow and still in the process of learning how to code. Please bear with me if this question sounds like a newbie one. My question is about having dynamic values for href and id when mapping data using axios to crea ...

javascriptjqueryhtmlreactjs

The browser is opting to download the HTML file rather than displaying it

Recently, I set up a server using Node.JS express where I specified the location of an HTML file in the public folder. app.use(express.static(__dirname + '/public')); app.listen(8080); In previous projects, this setup worked seamlessly. However ...

javascripthtmlnode.jsexpress

Nesting CSS classes allows for more specific targeting of

I am a bit rusty on CSS, it's been about 5-7 years since I last worked with it. Could someone help me come up with a solution to my problem? Here's the ideal design I have in mind: table.ctable { class:collapsible collapsed; } I know this syn ...

css

Discovering the selected row with jqueryIs there a way to locate

There is a table with rows and a button that allows you to select a row: <table id="mytable" class="table-striped"> <tbody> <tr id="1"><td>Test1</td></tr> <tr id="2"><td>Test2</td>& ...

javascriptjqueryhtml

What is the best way to implement an anchor link in my JavaScript code?

I'm struggling to wrap my head around this, as my thoughts seem to have vanished. On my webpage, there's a button element with an id: for example <button id="someId"></button> Within the document.ready function, I've set up an ...

javascriptjqueryhtmlanchorhref

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

Currently, I have a spreadsheet with a button that is supposed to link to a function in my Google Apps Script called openInputDialog. The goal is for this button to open an HTML UI where users can input text into five fields. This input should then be adde ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Creating a custom function in a Node.js application and rendering its output in the front-end interface

I've been trying to scrape data from a website and display it using innerHTML, but I'm running into some issues. The code snippet I'm using is: document.getElementById('results').innerHTML = searchJobs(''); However, I ke ...

javascripthtmlnode.jsexpress

What is the best way to display or hide specific tables depending on the button chosen?

Being fairly new to JavaScript, I find myself unsure of my actions in this realm. I've successfully implemented functionality for three links that toggle visibility between different tables. However, my ideal scenario would involve clicking one link t ...

javascripthtmlshow-hidecss-tables

Having trouble getting Ajax post to function properly when using Contenteditable

After successfully implementing a <textarea> that can post content to the database without needing a button or page refresh, I decided to switch to an editable <div> for design reasons. I added the attribute contenteditable="true", but encounte ...

javascriptphphtmlajax

"Conceal and reveal dynamic content using the power of jQuery's

Hello everyone, I'm encountering an issue with this code where I am trying to display a variable in the content. Take a look at the code below: I am attempting to show the variable $name in the div #divToToggle upon clicking, but the variable does no ...

htmlcssajax

Tips for applying an active class to buttons using ng-click?

Here is the HTML code for the buttons. The taskfilter is the filter that controls how the buttons work when clicked and the class name is 'sel' <a class="clear-completed" ng-click="taskfilter = 1" ng-class="{'sel':enabled}"> &l ...

javascripthtmlangularjs

JavaScript is restricted from being accessed beyond the confines of the ui-view element

After coming across a problem similar to one previously dismissed on stack overflow, I decided to tackle it head-on. You can find the issue and attempted solutions at this link: Previous Problem and Solutions The full project solution is available on Gith ...

htmlangularjs

Get rid of the white border surrounding the object tag

Help needed in removing a thin white border around the object tag. Below is the code snippet and what has been attempted: .hr-ob { background-color: #003262; width: 50px; height: 10px; border: none; outline: none; ...

htmlcss

Tips for customizing the scrollbar design in iOS Safari

Task at hand requires me to customize the scrollbar style on my HTML page. Below is the CSS code I am using: .txt_Content::-webkit-scrollbar { width:5px; border-radius:4px; } .txt_Content::-webkit-scrollbar-button { display: none; } .txt_Co ...

htmlioscss

What is the best way to address background-image overflow on a webpage?

I'm facing a challenge in removing the overflow from a background-image within a div. There are 4 divs with similar images that combine to form one background image (I adjust the position of each image so they align across the 4 divs). Essentially, I ...

javascriptjqueryhtmlcss

What is the best way to select the destination folder for output in Webpack?

Whenever I run webpack using "webpack --mode development", it generates a dist folder and places the bundle.js file inside it. My aim is to have it created and placed in the same directory instead. How can I achieve this? module.exports = { entry: " ...

javascripthtmlwebpack