Arranging multiple lines of text above several images using CSS

I'm encountering issues when trying to place multiple texts in front of multiple images. I've managed to achieve this using absolute and relative positioning, with one text above one image. However, the problem arises when I try to apply this to multiple IDs simultaneously. Can someone please guide me on how to resolve this? Thank you.

#box1{
float:left;
position: relative;
z-index: 10;
width: 100px;
}

#boxtext1{
float:left;
width:100px;
position: absolute;
z-index: 51;
}
#box2{
float:left;
position: relative;
z-index: 11;
width: 100px;
}

#boxtext2{
float:left;
width:100px;
position: relative;
z-index: 50;
}

http://jsfiddle.net/k9b0vgeg/3/

css

Answer №1

If there isn't a specific need for IDs (such as for javascript functionality), opting for classes would greatly simplify the process.

.container {
    display:flex;
    justify-content:center;
}
.item {
    flex: 1;
}
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
</div>

Answer №2

Instead of placing the text div outside, place it inside the main box div. Avoid using float with the absolutely positioned div and adjust left and right offset by adding CSS rules.

HTML:

<div id="box1">
    <img src="image.jpg" width="100px" />
    <div id="boxtext1">Some text1</div>
</div>
<div id="box2">
    <img src="image.jpg" width="100px" />
    <div id="boxtext2">Some text2</div>
</div>

CSS:

#box1 {
    position: relative;
    z-index: 10;
    width: 100px;
}
#boxtext1 {
    width:100px;
    position: absolute;
    z-index: 51;
    bottom:10px;
}
#box2 {
    position: relative;
    z-index: 11;
    width: 100px;
}
#boxtext2 {
    width:100px;
    position: absolute;
    z-index: 50;
    bottom:10px; //for placement.
}

Demo: http://jsfiddle.net/lotusgodkk/k9b0vgeg/6/

Answer №3

If you haven't included your HTML code, assuming the HTML displayed in your JSFIDDLE is correct:

Place your #boxtext1/2/3, etc., inside their respective #box1/2/3, and style the box text accordingly.

DEMO: JSFIDDLE

HTML:

<div id="box1">
    <img src="image.jpg" width="100px"/>
    <div id="boxtext1">
        Some text1
    </div>
</div>


<div id="box2">
    <img src="image.jpg" width="100px"/>
    <div id="boxtext2">
        Some text2
    </div>
</div>

CSS:

#box1{
    float:left;
    position: relative;
    z-index: 10;
    width: 100px;
}

#boxtext1{
    float:left;
    width:100px;
    position: absolute;
    margin-top:-100px;
    margin-left:5px;
}
#box2{
    float:left;
    position: relative;
    z-index: 10;
    width: 100px;
}

#boxtext2{
    float:left;
    width:100px;
    position: absolute;
    margin-top:-100px;
    margin-left:5px;
}

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

the sizing issue with three div elements

I am attempting to create 3 parallel divs in HTML. The middle div should be exactly 960px wide and centered on the page, with the left and right divs positioned on either side. The minimum width of the page is set to 1024px. When the browser width exceed ...

javascriptjquerycsswidthoverflow

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

I have a question... If you're interested in conditional styling, the best approach is to utilize either ng-class or ng-style. However... For instance, let's say I'm an admin and I would like to customize the color of my application using ...

javascripthtmlcssangularjs

The container's :before pseudo-element features a sleek white border

I have been experimenting with using the :before and :after pseudo-elements to generate diagonal lines within a container. However, I am encountering an issue where these pseudo-elements appear to have a white bottom border, and I am unable to determine t ...

htmlcsslineselementdiagonal

Tips for positioning a div relative to another div while controlling its z-index

Hey there, take a look at the image below https://i.sstatic.net/zYiaY.png The issue I'm facing is quite common - I have div 1 and div 2 visible in a loop, but divs 3 are hidden. When div 2 is clicked on, everything is great so far. However, what I wa ...

javascriptjquerycsshtml

The <a> tag is failing to cover the appropriate section of the <div> element

I am facing the following issue: HTML: <div id="about" class="menu1"> <a href="#">About</a></div> <div id="aboutsub"> <div id="team" class="menu2"> <a href="">Team</a></div> &l ...

htmlcsshyperlink

I want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...

javascripthtmlcssangular

Spin the connections around a circular path

I'm interested in creating a website where links rotate around a circle, similar to this example: https://i.sstatic.net/103mx.jpg. The links will display different images and texts leading to various URLs. I want the images to form a unified rotation ...

javascriptjqueryhtmlcssrotation

Displaying a division when a button is pressed

Despite my best efforts, I can't seem to get the chosen div to show and hide when the button is pressed. <button id="showButton" type="button">Show More</button> <div id="container"> <div id="fourthArticle"> <i ...

javascriptjqueryhtmlcss

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Is there a way to align the line to the right of the text when it's not selected, and have a new line appear on the left side that pushes the text and removes the line on the right side? Here is the design I'm trying to emulate. If you click t ...

htmlcss

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

htmlcssvue.jsanimationcss-animations

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

javascripthtmlcss

Limit the container's height to be no more than the height of the

Seeking input on good and bad practices in CSS/HTML/jQuery, I recently asked a question about determining when it is appropriate to use jQuery to set container dimensions. The responses I received were helpful (view them here). Realizing that jQuery may n ...

htmlcss

What is the best way to use CSS to evenly lay out a group of dynamically generated buttons?

My Vue-generated buttons need to be evenly laid out on the bottom of the page, with equal space on the left and right. The mdui button style I am using has fixed width and height, so I have to decide between a single row for fewer buttons (less than three ...

cssvue.js

Delete the right-hand p-timeline-event-opposite margin from the Angular 17 PrimeNG Timeline

I am currently utilizing the PrimeNG Timeline module to showcase a few straightforward horizontal timelines with content placed on the top side in a table format. How can I eliminate the space allocated by the .p-timeline-event-opposite section? Upon inspe ...

cssangularprimeng

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

cssreactjsreact-hooks

How can I create two buttons on one line in a Struts2 form?

My form has two buttons - one for registering and the other for canceling the form. I created them using the following code: <s:submit name="cancel" key="project.button.cancel" /> <s:submit name="login" key="form.register.registerBtn" /> How ...

javahtmlcssjspstruts2

Tips for creating an element that maintains its dimensions when a border is added during a hover effect

One issue I often face is the desire to add a border to an element on hover, only to find that as the border appears, the element's height and width change, causing it to visually jump and potentially push other elements. Is there a solution for this ...

htmlcssdom

What are some ways to address the performance challenges associated with resizing images for responsive design?

When it comes to certain images, I find that scaling them based on the page size is the best way to make them responsive. <img class="img_scale" src="img.png" alt"this img doesn't have width and height definition"> In my CSS: .img_scale{wid ...

htmlcssimageperformance

Enhancing CSS with Additional Properties

As a web developer, I recently had the opportunity to explore the new LOGIN PAGE preview of GMAIL and was very impressed with the Sign In button's UI. After examining the Page's CSS, I discovered some interesting properties, such as: **backgroun ...

csswebkit